Personnel Directory 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 Personnel to find a team member, switch roster views, filter by category, and add a person with the information needed for account linking.
- Workflow framing: Find or add someone in the project roster Start from the Personnel tab, choose the view that fits the task, and use email carefully if the person should claim their profile.
- Result-check framing: Confirm the record is usable A good personnel record is findable, contactable, and ready for account matching if the person signs in later.
- Status: Personnel records may contain sensitive contact or access data.
- Usage guidance: Email accuracy controls profile linking Personnel data is sensitive. Keep emails accurate for account matching, and avoid adding contact or access details the production does not need.