From Design Canvas to Published Site
A 38-second product tour turns animated design elements into a real site, then drives through the editor to a replayed Publish payoff.
Field notes / why it works
The first 3.8 seconds show a CTA typing and editable shapes moving while the voice promises a design-to-real outcome. A finished site appears by about 0:09, followed by real starting routes and editor controls. The strongest replay window, 0:32.3–0:32.7, lands on the enlarged Publish action, making the workflow's payoff unmistakable.
Plate 01 / The format in one breath
A polished 16:9 product tour starts with an abstract design element being built, reveals that element inside a finished website, then walks through the actual editor and ends on the Publish control. The promise arrives in the first sentence, completed by 0:04: a design can become a real site. A calm voice explains capabilities while the UI supplies proof.
Why it works
- The first 3.8 s turn a design gesture into a tangible result: button copy types in by 1.5 s, shapes are selected by 2–3 s, and the narrator completes the transformation promise at 3.8 s.
- The 5.4–19.2 s section moves from a finished page to ways to start; the 19.2–32.9 s section answers how to build and ship. This makes the feature list feel like a workflow.
- YouTube’s strongest replay window is 0:32.3–0:32.7, exactly as the camera pushes into the bright Publish button. The last action provides a clear payoff.
Plate 02 / Format card
| Platform · aspect · length | YouTube · 1280 × 720, 16:9 · 37.5 s · 24 fps |
| Pace | 5 detected shots, 4 cuts, 6.4 cuts/min; 4 changes inside shots, 12.8 picture changes/min; mean shot 7.51 s, median 2.67 s. Long shots contain moving UI. |
| Script | 73 measured spoken words; 126 wpm overall, 174 wpm during active speech; 9 measured sentences averaging 8.1 words; no questions or numbers. |
| Voice | One low-register, animated, assured narrator; conversational product guide; no visible speaker. |
| On screen | Roughly 15% abstract motion/design canvas, 85% product/site examples and editor UI (estimated from the sheets). No talking head. |
| Captions | No separate subtitles. Functional UI labels and site headlines carry text; the first CTA is typed on screen. |
| Sound | Continuous tonal, music-like bed; no clear impact sounds on cuts. Measured −15.7 LUFS integrated, −0.8 dBFS true peak. |
| Structure | 4 beats: design-to-result hook → finished-site proof and starting routes → editor workflow → Publish payoff and logo 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