Designing a Responsive Site on a Visual Canvas
A brisk narrated Framer demo turns canvas editing into a polished desktop-to-phone website reveal.
Field notes / why it works
The opening question lands at 0:00 over a finished site, then four rapid views in 4.8 seconds make the promise tangible. Each feature is demonstrated in the editor as it is narrated, with a desktop-to-phone result at 0:47–0:49; the strongest replay peak is 0:46.8–0:47.4.
Plate 01 / The format in one breath
A 59-second narrated screen demo asks whether site building can feel like designing, answers with a working visual canvas, then adds structure, responsive rules, and a transfer workflow. The payoff is an attractive desktop site becoming a phone site at 0:47–0:49, followed by a free-start call to action.
Why it works
- The opening asks a user-centered question immediately, while four close views of a site and cursor arrive by 0:04.8. The promise is answered at 0:05.3.
- Each capability is demonstrated in the interface as it is named: free placement at 0:08–0:12, layout structure at 0:12–0:24, breakpoint control at 0:24–0:29, and copy/paste transfer at 0:29–0:36.
- A gallery of possible sites at 0:42–0:45 leads into the desktop-to-phone payoff. The strongest replay peak is 0:46.8–0:47.4, at that finished-site reveal.
Plate 02 / Format card
| Reference | |
|---|---|
| Platform · aspect · length | YouTube · 16:9 · 1280×720 · 30 fps · 59.0 s |
| Pace | 13 measured shots; 12 confirmed cuts, or 12.2/min; five uncertain changes raise a possible ceiling to 17.3/min. Nine changes inside shots; 21.4 picture changes/min including confirmed cuts. Mean shot 4.54 s; median 3.03 s. |
| Script | 139 spoken words; 166 wpm over the full film, about 222 wpm during speech; 15 short sentences, one opening question. |
| Voice | One animated, low-register adult narrator; brisk, conversational, mostly falling sentence endings. No visible speaker. |
| On screen | Roughly 80% product/editor screen views and 20% staged site result, gallery, and logo (inferred from the sheets). No talking head. |
| Captions | No subtitles. Text is native UI, page copy, or a small instructional control label. |
| Sound | Continuous upbeat tonal music-like bed under narration; no clearly evidenced cut SFX. Last spoken words end around 0:50; audio falls near silence under the final logo. |
| Structure | Hook → canvas → layout → breakpoints → import → speed → finished-site payoff → CTA → logo. |
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 5 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