Style Guide Builder to Finished Site
A music-led UI tour turns palette experiments into design sheets and a finished site in 51 seconds.
Field notes / why it works
A continuous opening move reveals the interface without a cut until 0:13.5, making the tool itself the hook. Four UI changes from 0:13.5 to 0:19.9 make variation tangible, while design sheets at 0:31–0:39 and the finished page held from 0:42.2 complete a credible choice-to-output story.
Plate 01 / The format in one breath
A designed screen-recording tour shows a style guide assembling, changing, and becoming a usable page. The opening promises speed visually: a giant pale title and a small product panel move into a full interface by 0:03, then the same project receives several distinct treatments before an export and final page reveal.
Why it works
- The opening uses continuous scale and camera motion even though the first detected cut is at 0:13.5; the viewer discovers the interface as it settles.
- From 0:13.5–0:19.9, four internal picture changes make variation feel immediate: colors shuffle, the preview changes, and collaborator reactions appear.
- The sequence proves a workflow rather than stopping at attractive swatches: a font choice appears around 0:21, design sheets at 0:31–0:39, export options at 0:41, and a finished page at 0:46.
Plate 02 / Format card
| Platform · aspect · length | X · 4:3 · 960×720 · 50.9 s · 30 fps |
| Pace | 7 measured shots; 6 cuts, 7.1 cuts/min; 7 steps within shots, 15.3 picture changes/min total; mean shot 7.27 s |
| Script | No reliable spoken script. The 17-word machine transcript is semantically unrelated and 16 words are low confidence; treat it as a likely transcription error (inferred). |
| Voice | No verified speaking voice; product UI and music carry the explanation. |
| On screen | Nearly all designed UI and screen capture: palette, preview, cursors, design sheet, final page. No presenter. |
| Captions | No subtitles or kinetic captions; interface labels and the oversized opening title provide the text. |
| Sound | Continuous music-like bed, roughly 80 BPM; no clear effect accent on the cuts. Measured −11.2 LUFS integrated, +0.8 dBFS true peak. |
| Structure | Title/UI reveal → styling and collaboration → typography → document/export → finished site; result lands at 0:42.2. |
Pro / 13 plates + recipe
The first plates are open. The full dissection is Pro.
Get the timed shots, type and sound specs, and the runnable recipe.
Open the full blueprint- Plate 03 / The hook, frame by frame (first 3 seconds)Pro
- Plate 04 / Structure (beat sheet)Pro
- Plate 05 / Shot grammarPro
- Plate 06 / Visual style guidePro
- Plate 07 / Voice and deliveryPro
- Plate 08 / Sound designPro
- Plate 09 / PackagingPro
- Plate 10 / Script templatePro
- Plate 11 / Production planPro
- Plate 12 / PromptsPro
- Plate 13 / Edit recipePro
- Plate 14 / QA checklistPro
- Plate 15 / Make it yoursPro
- Recipe / runnable promptPro