heygen-com__hyperframes/examples/docs-reference-project/STORYBOARD.md

---
format: 1920x1080
duration: 10s
message: "example.com is the domain you are allowed to use in documentation examples."
arc: Name → Purpose → Proof → Permission
audience: "A developer writing documentation who needs a safe example domain"
mode: autonomous
music: "gentle warm piano bed, quiet under the narration"
captions: "phrase-level, fixed lower band"
---

## Video direction

**Palette system** — from `frame.md`. Canvas `#E9E9E7`; the captured plate keeps the
page's own `#EEEEEE`; ink `#1B1B1B`; supporting copy `#5A5C63`; one accent `#334488`
used _only_ for the three rule instances (top rule · brand bar · page marker) and the
address. No fourth accent use.

**Motion grammar + reveal model** — every reveal is cued to a measured word timing from
`assets/narration.wav`. Long-tail eases only: `power4.out` for the two structural
reveals (title, plate), `power3.out` for copy, `expo.out` for rules drawing. Nothing
front-loads: at t=0 the frame holds one 6px rule and nothing else, and the last reveal
lands at 7.10s — inside the final 30%.

**Rhythm / held-frame allocation** — two deliberate holds. `5.15 → 6.42` is a mid-film
breather: everything visible has resolved and the narration carries alone. `8.03 → 10.0`
is the end card: the caption band clears and the frame goes completely still. Neither
hold drifts, breathes, or pans. A held read beats bad motion, and the still tail
doubles as the poster frame for docs embeds.

**Negative list** — no CTA button (the page's action is a text link, not a pill); no
sheen sweep; no ambient bloom; no grid or paper texture; no gradient mesh; no drifting
or breathing camera; no plate scale or 3D rotation of any kind (a 1x capture has no
headroom above 1:1); no per-word caption scale-pop, colour flashing, or scatter exit;
no label that repeats something already on screen. Both failure modes are banned by
name: **slideshow** (front-load then freeze) and **screensaver** (everything floating
independently).

---

## Frame 1 — example.com, as it is

- scene: The name in heavy type beside the real captured page, at 1:1
- duration: 10s
- poster: 9s
- transition_in: cut
- status: animated
- voiceover: "This is example dot com. The domain reserved for documentation examples. Use it in your docs — no permission needed."
- src: index.html
- blueprint: device-surface-showcase (Adapt)
- focal: assets/example-com.png
- roles: example-com.png = supporting surface (the evidence) · type lockup = primary
- sfx: whoosh-short @2.62 (plate travels in) · click-soft @4.54 (marker draws)

**Adapt:** keep device-surface-showcase's signature move — _the captured surface itself
is the proof, delivered as a lifted plate_ — but drop the blueprint's push-in entirely.
The blueprint assumes a surface with zoom headroom; this one is a 1x screenshot, so the
push-in is replaced by a translate-only entrance and the plate is then read _in place_
by the accent marker. The film moves the eye, not the camera.

Scene 1 (0.00–1.00s): canvas and one soft upper-left light wash. A 6px accent rule
draws left→right across the top edge in 0.9s and that is the only thing on screen.
Full-bleed, one depth layer. Nothing else exists yet — the narration has not started.

Scene 2 (1.00–2.33s): as the VO says _"This is…"_, "Example Domain" rises out of a
mask (two lines, 132px/900) in the left column. The 200×8 brand bar draws under it at
1.55s, and the mono address rises at 1.78s exactly as the VO reaches _"…example.com."_
Asymmetric 60/40, content in the left 640px, three depth layers (wash · type · rule).

Scene 3 (2.33–3.51s): on _"The domain…"_ the captured page travels in from the right on
`x` only (140px → 0) and lands at exactly 1:1, 1000×400, right-aligned and
vertically centred against the lockup. `whoosh-short` sits under the travel. The plate
lifts off the canvas on a single soft shadow; it does not tilt and it does not scale.

Scene 4 (3.51–5.15s): held while the VO reads _"…reserved for documentation…"_, then on
_"…examples."_ a 5px accent marker draws top→bottom beside the page's own paragraph,
inside the plate. `click-soft` on the draw. This is the film's argument — the words
being quoted are the page's, not ours. Nothing else changes.

Scene 5 (5.15–6.42s): **held read.** Everything on screen has resolved. The VO carries
_"Use it in your docs…"_ alone. No motion at all.

Scene 6 (6.42–7.10s): on _"…no permission needed."_ the supporting line rises into the
left column under the address, in muted ink at 38px. Final reveal, final 30% of the
shot.

Scene 7 (7.10–10.00s): the last caption group plays out and clears at 8.03s. From 8.03
the frame is a completely still end card — lockup, plate, marker, no captions. This is
the frame every docs page will screenshot.