How a Browser Builds a Page
A silent 40-second hand-drawn explainer alternates mascot-led metaphors with dark technical schematics across 18 shots.
Starter prompt / by Refs
The creator shared no short prompt. This is ours for making a film like it with Claude.
Explain what happens after you type a URL in a 40-second hand-drawn explainer, with every frame drawn in JavaScript on a canvas. A friendly robot mascot walks through each stage: DNS lookup, TCP and TLS handshakes, the HTTP request, parsing HTML into the DOM, styling, layout, paint and compositing, with a step counter in the corner. Use wobbly pencil outlines, paper grain and pastel stripes. Render frames deterministically with headless Chrome, add light sound effects, and encode 1920×1080 at 30 fps with ffmpeg.
Field notes / why it works
A recognizable browser action begins immediately, with the first field change at 0.85 seconds and a shift to the hidden system at 2 seconds. Eighteen compact shots alternate warm character metaphors with dark diagrams, while the page reveal at 0:16 and later layer, chip, garden, and town visuals make increasingly abstract stages tangible.
Plate 01 / The format in one breath
A small mascot initiates a familiar action, then travels through an otherwise invisible process. Alternating warm, hand-drawn story scenes and dark technical diagrams make abstract stages feel like one continuous journey. A numbered corner dial and small object labels carry the explanation without narration.
Why it works
- The hook starts with a recognizable browser window and a character waiting for input; the field changes within 0.85 seconds, before the first cut at 2.0 seconds.
- The palette switches from cream story scene to dark schematic every roughly 2 seconds during the first 14 seconds, keeping a quiet, text-led lesson moving.
- The final third turns rendering, memory, and separate processes into physical metaphors: a layer stack at 0:20, a chip at 0:24.5, a garden at 0:29.5, and a town at 0:34.
Plate 02 / Format card
| Reference | |
|---|---|
| Platform · aspect · length | X video · 1280×720 · 16:9 · 24 fps · 40.0 s |
| Pace | 18 shots, 17 cuts, 25.5 cuts/min; 5 internal changes; 33 picture changes/min; mean shot 2.22 s, median 2.0 s |
| Script | No spoken words; readable labels, diagrams, and character action do the teaching |
| Voice | None; mascot is expressive through pose and face |
| On screen | 9 light story/metaphor scenes and 9 dark schematic scenes; all illustrated motion graphics |
| Captions | No speech subtitles; small interface and diagram labels, plus a short end title |
| Sound | Music is present; measured mix −16.8 LUFS integrated, −2.1 dBFS true peak; beat estimate ~80 BPM is heuristic |
| Structure | Input → technical journey → visible result → deeper render/process metaphors → end title; no explicit 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