An Ambient Onboarding Tour
A continuous, music-led web onboarding tour that turns privacy, saving, search, and pricing into animated visual chapters.
Field notes / why it works
The glowing circle changes the initially blank page by 0:01 and yields a readable welcome promise by about 0:02. One uninterrupted web canvas still has 43 internal visual changes: privacy at 0:12, saved-content proof at 0:31, several search examples from 0:52 to 1:12, and a plan choice at 1:15. Brief blurred resets separate the ideas without losing the coherent orange-framed world.
Plate 01 / The format in one breath
A desktop-sized, continuously animated onboarding page demonstrates a product without narration. It opens with a visual welcome, then advances through a trust promise, a save-and-organize example, retrieval, and an upgrade screen. An orange outer field and a soft blue-white inner canvas make the page feel like an object being exhibited.
Why it works
- The opening circle grows a pink-orange-yellow glow by 0:01.0, then the welcome promise appears around 0:01.5–0:01.75. The viewer gets motion before needing to read.
- At 0:12, 0:31, 0:38, 0:52, and 1:15, each new chapter shows a different product benefit or action rather than another slogan.
- There are 0 hard cuts, yet 43 measured changes within the page, about 27 picture changes per minute. Short blank or blurred intervals around 0:10, 0:20, 0:50, and 1:14 reset attention between dense examples.
Plate 02 / Format card
| Reference | |
|---|---|
| Platform · aspect · length | X · 1060 × 720 (53:36, approximately 1.47:1) · 95.45 s · 60 fps |
| Pace | 1 continuous screen sequence · 0 cuts/min · 43 internal changes, 27 picture changes/min · measured shot length 95.45 s |
| Script | No spoken words; concise, static-on-screen benefit lines and UI labels. |
| Voice | None; no person is shown. |
| On screen | 100% designed onboarding UI or screen capture, mostly a wide, front-facing browser-card composition. |
| Captions | None. Editorial headlines and small product UI text carry the message. |
| Sound | Quiet, tonal music-like bed; measured −27.1 LUFS integrated and −11.2 dBFS true peak. No speech. |
| Structure | Welcome → privacy → save/organize → search/retrieve → plans; upgrade appears around 1:15. |
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 / On-screen copy templatePro
- Plate 11 / Production planPro
- Plate 12 / PromptsPro
- Plate 13 / Edit recipePro
- Plate 14 / QA checklistPro
- Plate 15 / Make it yoursPro
- Recipe / runnable promptPro