From design canvas to published website
A 37-second Framer demo turns a typed CTA into a finished site, then proves the workflow through the editor and a final Publish action.
Field notes / why it works
The promise starts at 0:00 while a CTA types on black, and the first page reveal arrives at 0:02.2. A polished site at 0:07.8 leads into the editor at 0:14.1, then responsive previews at 0:29.9 and a bright Publish button at 0:33.4 make the outcome feel achievable. Four major shots stay active through nine internal visual changes.
Plate 01 / The format in one breath
A calm, confident narrator promises that a creative input becomes a real output. A tiny typed button becomes a working page; the video then demonstrates choices, simple building blocks, responsive layouts, and one final action. The result is more convincing than a feature list because each claim gets a visible interface state.
Why it works
- The opening promise is spoken at 0:00 while the CTA types on a black screen; the first picture change at 2.05 s reveals the page being built.
- A live website at 0:07.8 is followed by the editor at 0:14.1, connecting polished output to the actual workflow.
- The final blue Publish button appears at 0:33.4 after the responsive layouts at 0:29.9, closing the design-to-release sequence.
Plate 02 / Format card
| Platform · aspect · length | YouTube · 16:9 · 37 s · 1280×720 · 24 fps |
| Pace | 4 detected shots, 3 cuts, 4.9–9.7 possible cuts/min; 9 internal steps, 19.5 total picture changes/min; mean shot 9.24 s |
| Script | 72 spoken words, 124 wpm overall / 173 while speaking; 7 sentences averaging 10.3 words; no questions; 5.6 uses of “you” per 100 words |
| Voice | One low-register adult narrator; warm, assured, animated inflection |
| On screen | ~11% isolated UI/motion opening, ~29% website/product result, ~60% editor/workflow; no talking head |
| Captions | No burned speech captions; interface copy, section text, and CTA do the explaining |
| Sound | Continuous quiet tonal bed, roughly 5.8 dB below voice; −15.7 LUFS integrated, −0.9 dBFS true peak |
| Structure | Outcome promise → result proof → starting options → building blocks → responsive proof → publish payoff; no spoken external CTA |
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