Websites Come Alive in Framer
A 30-second product film turns an editor view into live animation examples, then reveals the visual controls behind them.
Field notes / why it works
The editor-to-live-page transformation at 0:02.7–0:03.0 is the strongest replayed moment, giving immediate proof of the product outcome. Distinct scroll, hover, typography, and settings examples arrive across the next 17 seconds, while a 54-word narration stays tied to what appears on screen. A spare black URL card from about 0:26.4 makes the action easy to remember.
Plate 01 / The format in one breath
A low, animated narrator introduces a no-code website while a design canvas sits inside a cinematic desktop scene. The camera dives from the editor into the actual page, then moves through scroll, hover and type examples before showing the visual controls and finishing on a bare URL card. The promise is practical: attractive interactions can be built without code.
Why it works
- The opening supplies context without explanation: a recognizable editor on a monitor at 0:00–0:02.5, followed by a full-page reveal at 0:02.7–0:03.0, the strongest measured replay peak (0.79).
- Each claim gets its own proof: scrolling at about 0:03–0:06, hover from about 0:07–0:10, typography at about 0:12–0:16, and the text-effect control at 0:16.5.
- The last claim removes friction at 0:17–0:25, then leaves one simple destination at about 0:26.4 instead of a crowded end card.
Plate 02 / Format card
| Platform · aspect · length | YouTube · 16:9, 1280×720 · 30.0 s at 24 fps |
| Pace | 6 measured shots, 5 certain cuts · 10–12 cuts/min allowing one uncertain change · 14 measured picture changes/min · mean shot 5.0 s, median 4.09 s |
| Script | 54 spoken words · 116 wpm across the film, about 170 wpm while speaking · seven short sentences · no questions |
| Voice | One low-register, lively, assured adult narrator; slight rise on invitation words and falls on claims |
| On screen | Product/webpage footage dominates; cinematic desktop opener, fullscreen site demos, editor close-up, bare brand card; no presenter or speech captions |
| Captions | None. Site headlines and tiny UI labels belong to the showcased designs, not subtitles. |
| Sound | Continuous tonal, music-like bed; voice forward but bed prominent; no clear cut-synced effects; measured −16.3 LUFS integrated, −0.1 dBFS true peak |
| Structure | Editor setup → live result → hover → typography → visual controls/no-code proof → free CTA and URL |
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