Dashboard Tutorial Storyboard
Format: 1920x1080 landscape Duration: 42 seconds Design source: root DESIGN.md
| Time | Beat | Visual Direction | Motion |
|---|---|---|---|
| 0.0-8.8 | Tutorial goal | Dark command-surface frame, source route, usage note, and Playwright feature screenshot | Elements enter in staggered order; hero frame gets a subtle scale push |
| 8.8-9.3 | Transition | Amber cue-light wipe | CSS transition panel covers the outgoing scene before the next scene appears |
| 9.3-19.4 | Primary workflow | Three operational steps drawn directly from the feature page | Cards enter from varied directions, no jump cuts |
| 19.4-19.9 | Transition | Amber cue-light wipe | Same primary transition for consistency |
| 19.9-30.0 | Result check | Three checks the viewer can perform after the task | Cards build from the completed task outward |
| 30.0-30.5 | Transition | Amber cue-light wipe | Topic reset into usage guidance |
| 30.5-42.0 | Usage boundary | Usage caveat plus quick reference rows | Quick reference enters last; final scene fades down only at the end |
Source Facts
- Promise: Use Dashboard as the daily starting point: check calls, read announcements, review today's schedule, and open the tool that owns the next task.
- Workflow framing: Use Dashboard to decide where to work next The page is a summary. Use it to spot what needs attention, then follow a widget into the owning feature.
- Result-check framing: Make sure the summary matches your role Dashboard should feel different for a cast member, stage manager, or designer because each role needs different information.
- Status: Widgets vary by role, workspace, project phase, and available production data.
- Usage guidance: Use Dashboard for orientation, not final edits Dashboard summarizes project data. To change details, follow the widget into Scheduler, Feed, Attendance, or the setup tool that owns the record.