Social Feed 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: Create a Feed post that includes an update, optional media, a department mention, and a link back to the production item people need to review.
- Workflow framing: Create and target a production update Start in the Feed composer, add the actual update, then attach context before you post.
- Result-check framing: Confirm the post landed correctly After posting, check the timeline, notifications, and pinned area so the message is findable.
- Status: Use Feed for production updates, not emergency communication.
- Usage guidance: Do not use Feed as the only urgent channel For emergencies, show-critical changes, or anything that needs immediate confirmation, post the context in Feed and also contact the team directly.