A Visual Editor Demonstrated in the Live Codebase
Two colleagues introduce a browser visual editor, then prove it through real selection, layout, and style changes.
Field notes / why it works
The conversational hook starts at 0:00 and hands off to a concrete screen demo at 0:21, exactly where the strongest replay peak begins. The proof escalates from element selection to alignment at 0:40 and design-system/layout controls by 1:16, while 29 shots and 22 internal changes keep a two-minute walkthrough moving without obscuring the interface.
Plate 01 / The format in one breath
Two colleagues make a practical design problem feel conversational, then demonstrate the fix in a real interface. The screen capture carries the proof: select something, move it, apply a change, and show the result. The final exchange widens that small action into a larger product benefit.
Why it works
- The opening uses an opinion from a practitioner at 0:00, while the first full-screen title at 0:10 supplies the product promise before the demo.
- The screen first takes over at 0:20–0:21, which coincides with the strongest replay peak at 0:21.4–0:22.7; viewers can inspect the actual workflow.
- The demo progresses from selection (0:21) to drag and drop (0:32), alignment and apply (0:40–0:49), then fonts and layout controls (0:50–1:16). Each step makes the earlier claim more credible.
Plate 02 / Format card
| Platform · aspect · length | YouTube · 16:9 · 2:05 · source measured at 640×360, 23.98 fps |
| Pace | 29 shots, 28 confirmed cuts · 13.4–15.4 cuts/min including four uncertain moments · 24 picture changes/min · mean shot 4.31 s, median 3.29 s |
| Script | 399 measured words · 196 wpm overall, 229 wpm while speaking · 29 sentences, 13.8 words each · no questions |
| Voice | Two conversational adult voices (inferred from frames and dialogue); first is reflective and design-minded, second is brisk and demonstrative |
| On screen | Approx. 50% screen or laptop demonstration, 45% two-person/solo interview, 5% title or logo (estimated from shot sheet durations) |
| Captions | No burned speech captions; sparse title card, two lower-third name/role labels, and native interface text |
| Sound | Dry dialogue and room tone; no measured music bed or clear cut effects · −24.8 LUFS integrated, −4.6 dBFS true peak |
| Structure | Conversational hook → title/introductions → screen demonstration → specific control examples → broader workflow benefit → logo hard stop |
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