docs(prompting): audit fixes — validation gate, framework vocabulary, thread consistency

2026-09-03 23:03:09 +00:00 · 2026-07-29 14:08:44 -07:00
parent 9cbab0c78a
commit 44f9db4259
28 changed files with 156 additions and 92 deletions
@@ -76,12 +76,28 @@ The fixes that come up most, as before/after pairs — each exists because of ho
 - ❌ `counts from $0 to $4.2M`
 - ✅ `counts up to $4.2M`
 ## The framework's own vocabulary
 The skeleton above is how you ask. This is what the agent writes, and it's worth recognizing on sight — when you read a composition, review a diff, or get a lint error, these four are the load-bearing pieces:
 | In the file | What it means |
 | --- | --- |
 | `class="clip"` | Marks a timed section. The framework owns its visibility — never animate a clip's own opacity or `display` to hide it. |
 | `data-start` / `data-duration` / `data-track-index` | When the clip begins, how long it runs, and which track it sits on. Two clips on the same track index must not overlap in time. |
 | `window.__timelines["<id>"]` | Every composition registers exactly one paused GSAP timeline here, built synchronously at load. The renderer seeks that timeline frame by frame — which is why nothing may depend on wall-clock time or unseeded randomness. |
 | `<video muted>` + a separate `<audio>` | Video elements render muted and their sound rides a sibling audio element, so the mixer can duck and balance it independently. |
 You rarely write these by hand, but naming them in a prompt is legitimate and sometimes necessary — "put the captions on their own track index," "keep it one composition file, one timeline" — and it's the vocabulary every error message uses. The full contract lives in the `/hyperframes-core` skill; the [appendix](/prompting/rules-and-anti-patterns) carries the rules that most often bite.
 <Note>
-**Capstone thread** — the [Level 7 capstone](/prompting/capstone) prompt is this skeleton at maximum scale — route, spec, beats (its nine regions), copy quoted exactly, technique pinned per region, and a hard negative list. The chapters between here and there each teach one clause of it; the capstone is where they compose.
+**Capstone thread** — the [Level 7 film](/prompting/capstone) makes this table its scenery. In the Mount region the timeline wire splits into three track lanes and clip chips seat onto them, tagging themselves with the very attributes above — the framework's own vocabulary, staged as a set. And the whole prompt is this chapter's skeleton at maximum scale: route, spec, beats (its nine regions), copy quoted exactly, technique pinned per region, and a hard negative list.
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
-> **Message, stated once:** "Write HTML. Render video." — opening hook and closing lockup. Arc: Type → Mount → Measure → Everywhere → Material → Surface → Rhythm → Depth → Render. Audience: developers evaluating a programmable video tool. Mood: focused build-up that keeps accelerating, resolving confident and warm at the render.
+> **Mount (7–14s).** Traveling along the wire: it splits into three parallel track lanes; clip chips slide in along the direction of travel and seat onto the lanes on their spoken cues (audio track chip, video track chip, our protagonist chip among them). Small mono labels (`data-start`, `data-track-index`) tag themselves onto chips as the camera passes. The lanes merge back to one wire as the camera accelerates out.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-mount.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *That clause, rendered — the region cut from the finished film.*
 *Next: [The specification dial](/prompting/specification-dial) — how much of the skeleton to fill in, and when density stops being optional.*
@@ -6,7 +6,7 @@ description: "One prompt, one continuous camera move, every technique in this gu
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *"The Timeline" — 1920x1080, ~62 seconds, one prompt, one unbroken camera move, unedited.*
-If you read the guide in order, you have already seen every piece of this film. Each region was cut out and embedded in the chapter that teaches its technique — the typed opening in [Code animations](/prompting/code-blocks), the chart and map in [Data and maps](/prompting/data-and-maps), the footage pipeline in [Media and audio](/prompting/media-and-audio), the glass and mural in [VFX](/prompting/vfx-and-liquid-glass) and [Generated artwork](/prompting/generated-artwork), the beat grid in [Music](/prompting/music-and-slideshows), the 3D coil in [Runtimes and 3D](/prompting/runtimes-and-3d), the seeded finale in [Motion](/prompting/motion). This page is where the pieces become one composition, and the prompt below is the glue: every paragraph of it is a chapter of this guide restated as a binding clause.
+If you read the guide in order, you have already seen every piece of this film. Each region was cut out and embedded in the chapter that teaches its technique — the typed opening in [Code animations](/prompting/code-blocks), the chart and map in [Data and maps](/prompting/data-and-maps), the footage pipeline in [Media and audio](/prompting/media-and-audio), the glass and mural in [VFX](/prompting/vfx-and-liquid-glass) and [Generated artwork](/prompting/generated-artwork), the beat grid in [Music](/prompting/music-and-slideshows), the 3D coil in [Runtimes and 3D](/prompting/runtimes-and-3d), the continuous camera in [Motion](/prompting/motion), the seeded finale in [Rendering and output](/prompting/rendering-and-output). This page is where the pieces become one composition, and the prompt below is the glue: every paragraph of it is a chapter of this guide restated as a binding clause.
 The concept is the product: the viewer travels along one literal timeline — the thing HyperFrames is built on — from the first typed character to the finished MP4. Everything in it is true: real catalog counts, real cloud regions, real product surfaces, footage staged as the material the tool processes. And the film has no scenes in the slideshow sense — it is one continuous camera journey through one wide world, which is the chapter's biggest lesson.
@@ -78,6 +78,7 @@ This is the full prompt, nothing paraphrased or trimmed. Several of its clauses
 > **Voice & music:** confident, energetic female narration — Kokoro `af_sky`, passed explicitly via `--voice` — riding the journey's momentum (the VO never waits for the camera; the camera arrives on the VO). Driving, beat-forward electronic BGM from the catalog at the engine's default narration-bed volume; the same track feeds the Rhythm region's beat analysis.
 >
 > **Negatives:** no hard cuts outside the two sanctioned seams; no static regions; no shaking or idle-in-place motion passed off as energy; no hue beyond mint (cyan only inside the one CTA gradient) — and per the brand file, no purple-blue SaaS gradients ever; no stock footage or photography; no fictional stats, projects, or testimonials — every number and label must be true of HyperFrames today; no real OS/browser chrome; no unseeded randomness; none of the film is silent.
 ## Walking the prompt, chapter by chapter
 Every region pins a different technique, and every technique has a chapter:
@@ -85,7 +86,7 @@ Every region pins a different technique, and every technique has a chapter:
 | Region | What it demonstrates | Chapter that teaches it |
 | --- | --- | --- |
 | Type (0:00–0:07) | Per-character code typing; the underline that becomes the wire | [Code animations](/prompting/code-blocks), [Prompt anatomy](/prompting/anatomy) |
-| Mount (0:07–0:14) | The timeline's own vocabulary — tracks, clips, `data-*` labels | [Vocabulary](/prompting/vocabulary) |
+| Mount (0:07–0:14) | The timeline's own vocabulary — tracks, clips, `data-*` labels | [Prompt anatomy](/prompting/anatomy) |
 | Measure (0:14–0:21) | `data-chart` block; the wire as chart baseline (matched motion) | [Data and maps](/prompting/data-and-maps), [Transitions](/prompting/transitions) |
 | Everywhere (0:21–0:28) | `world-map` block; real Lambda / Cloud Run regions | [Data and maps](/prompting/data-and-maps), [Rendering and output](/prompting/rendering-and-output) |
 | Material (0:28–0:39) | Generated clip → HEVC proxy → background removed *before* the speech → the line's keywords slam in word-synced as display text BEHIND the cutout (silhouette occlusion) → lower-third behind the subject | [Media and audio](/prompting/media-and-audio), [Caption styles](/prompting/captions-catalog), [Overlays and lower thirds](/prompting/overlays-and-lower-thirds) |
@@ -115,13 +116,13 @@ The mural trick from the previous capstone carries over: the artwork is generate
 ## How everything ties together
-Read the prompt again with the guide behind you and it stops looking like one enormous ask. Region by region it is material you already have: the typed opening is [Code animations](/prompting/code-blocks), the chart and map paragraphs are [Data and maps](/prompting/data-and-maps), the Material paragraph is [Media and audio](/prompting/media-and-audio) + [Caption styles](/prompting/captions-catalog) + [Overlays](/prompting/overlays-and-lower-thirds) run in sequence, Surface is [Transitions](/prompting/transitions) + [VFX](/prompting/vfx-and-liquid-glass) + [Generated artwork](/prompting/generated-artwork), Rhythm is [Music](/prompting/music-and-slideshows), Depth is [Runtimes and 3D](/prompting/runtimes-and-3d), and the finale is [Motion](/prompting/motion)'s rule 7. None of those clauses is new — they are the chapters, restated as requirements.
+Read the prompt again with the guide behind you and it stops looking like one enormous ask. Region by region it is material you already have: the typed opening is [Code animations](/prompting/code-blocks), the Mount paragraph is [Prompt anatomy](/prompting/anatomy)'s framework vocabulary staged as scenery, the chart and map paragraphs are [Data and maps](/prompting/data-and-maps), the Material paragraph is [Media and audio](/prompting/media-and-audio) + [Caption styles](/prompting/captions-catalog) + [Overlays](/prompting/overlays-and-lower-thirds) run in sequence, Surface is [Transitions](/prompting/transitions) + [VFX](/prompting/vfx-and-liquid-glass) + [Generated artwork](/prompting/generated-artwork), Rhythm is [Music](/prompting/music-and-slideshows), Depth is [Runtimes and 3D](/prompting/runtimes-and-3d), and the finale is [Motion](/prompting/motion)'s rule 7. None of those clauses is new — they are the chapters, restated as requirements.
 What IS new — the part you could not have written after any single chapter — is the connective tissue, and that is exactly what the rest of the prompt spends its words on:
 - **The cinematography contract** fuses nine demos into one space: one camera, arrivals instead of cuts, dwell-and-sweep pacing. Remove it and you get a playlist of chapter examples; with it, the same nine pieces are a film.
 - **The persistent elements do the handoffs.** The wire is the trick that makes each region *become* the next — the same line is the typed underline, the chart baseline, the map arc, the waveform, the 3D coil. The chip is a callback threaded through all nine techniques; the ruler makes the film's own medium visible.
- **One brand file governs every region** ([Design systems](/prompting/design-systems)) — so nine techniques from nine chapters land looking like one designer made them.
+- **One brand file governs every region** ([Design systems](/prompting/design-systems)) — so nine techniques drawn from a dozen chapters land looking like one designer made them.
 - **One variable scope re-skins all of it** ([Variables and templating](/prompting/variables-and-templating)) — the single-file constraint exists so the chart, the map, the glass, the mural, and the confetti all answer to the same two variables in one `--variables` flag.
 - **One soundtrack paces all of it** ([Media and audio](/prompting/media-and-audio)) — the VO cues every region's reveals ([pace reveals to the narration](/prompting/media-and-audio#pace-reveals-to-the-narration)), the same BGM that beds the narration feeds the Rhythm region's beat analysis, and one SFX plan rides the visual hits — keystrokes at the open, a whoosh per handoff, ticks on counters and beats, one riser into the render ([sound effects](/prompting/media-and-audio#sound-effects)).
@@ -3,7 +3,7 @@ title: Captions and talking-head footage
 description: "Two ways to dress an existing talking-head clip — readable captions or designed graphic overlays — both leaving the footage itself untouched."
 ---
-The first three rides built a video from nothing. This one starts from footage you already have — a talking-head clip — and adds a layer on top without touching the shot itself.
+The first two rides built a video from nothing and the third built one from a diff. This one starts from footage you already have — a talking-head clip — and adds a layer on top without touching the shot itself.
 ## Your first win
@@ -80,7 +80,7 @@ Three [Text Effects](/catalog/components/morph-text) components do one focused j
 - ❌ `use caption-neon-glow and caption-matrix-decode together`
 - ✅ pick one; switch styles only across a clear section break
-**Don't reach for these on talking-head footage.** These are composition snippets, not the matting/occlusion pipeline — captions won't sit behind the speaker.
+**Don't reach for these on talking-head footage.** These are composition snippets, not the matting/occlusion pipeline — dropped onto an untouched MP4, a caption sits in front of the speaker, never behind. (The capstone thread below shows `caption-kinetic-slam` reading *behind* a subject, which is not a contradiction: that composition mattes the footage itself first, so the cutout is a separate layer the type can pass under. The limitation is about the snippet alone, not the technique.)
 - ❌ `/hyperframes add caption-highlight to my interview.mp4`
 - ✅ `/embedded-captions` (see [captions and talking heads](/prompting/captions-and-talking-heads))
@@ -93,7 +93,7 @@ Three [Text Effects](/catalog/components/morph-text) components do one focused j
 - ✅ describe the tone ("tutorial, monospace, typewriter") or name a real component
 <Note>
-**Capstone thread** — in the [Level 7 film](/prompting/capstone)'s Material region, word-synced keywords from the clip's own transcription slam in as display type behind the matted-out speaker — captions as scenography, on real word timings (0:28–0:36 below, cut from the film).
+**Capstone thread** — in the [Level 7 film](/prompting/capstone)'s Material region, word-synced keywords from the clip's own transcription slam in as display type behind the matted-out speaker — captions as scenography, on real word timings (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -65,18 +65,9 @@ What you can already steer from the prompt, before you've learned any technique.
  </Accordion>
 </AccordionGroup>
 ## Changelog videos
 The `/changelog-video` skill landed after the original guide, and it isn't a `/pr-to-video` variant — it's a second workflow. Where the "Changelog roundup" variant above reshapes a *single* PR into a changelog-style beat sequence, `/changelog-video` spans a stretch of *repo history*: it turns a repo's recent merges into a fully produced, voiced, captioned changelog video, one hero visualization per theme instead of a text digest.
 > /changelog-video Make a ~50-second 1080x1080 changelog video from the last two weeks of merges to heygen-com/hyperframes. Order themes marquee feature first, then product surface, then performance, then reliability. One hero visualization per theme — mock the actual UI or a faithful analog, never a bullet list. End on a link to the full digest.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/changelog-video.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *Rendered from the prompt above, unedited — themes drawn from `heygen-com/hyperframes`'s own last two weeks of merges.*
 ## Common failure modes
-**Forcing a theme over the preset.** The style is fixed for a reason — the navy code surface is tuned for diff legibility; a foreign theme fights it and produces a compromise (see [rules and anti-patterns](/prompting/rules-and-anti-patterns)).
+**Forcing a theme over the preset.** The general rule is on [ride 1](/prompting/product-launch#common-failure-modes); the specific reason here is that the navy code surface is tuned for diff legibility, so a foreign theme costs you the one thing the workflow is good at.
 - ❌ `/pr-to-video ... dark theme, neon accents`
 - ✅ let the preset carry the look; spend your specificity on the angle and the code beats
@@ -88,7 +79,7 @@ The `/changelog-video` skill landed after the original guide, and it isn't a `/p
 - ❌ `start with the diff, then explain what it does`
 - ✅ `lead with what users get, then show the key hunk`
-**Hard-timing a narrated cut.** With narration the spoken length sets the runtime; state a range, not a fixed number.
+**Hard-timing a narrated cut.** As in [ride 1](/prompting/product-launch#common-failure-modes) — the spoken length sets the runtime, so state a range.
 - ❌ `a 40-second narrated walkthrough`
 - ✅ `a ~40-second narrated walkthrough`
@@ -25,7 +25,7 @@ Each Code Animations block answers a different "what is the viewer supposed to n
 | Code resolving out of a shader dissolve    | [`code-shader-dissolve`](/catalog/blocks/code-shader-dissolve) | 7s |
 | Code assembling from a particle swarm      | [`code-particle-assemble`](/catalog/blocks/code-particle-assemble) | 8s |
-The first four are the workhorses of a code *walkthrough* — they keep the code readable and the viewer oriented. The last three are entrance spectacle: they look great as an opener or a hero moment, but they trade legibility for motion, so don't ask them to carry an explanation.
+The first four are the workhorses of a code *walkthrough* — they keep the code readable and the viewer oriented. Everything below them trades legibility for motion: they look great as an opener or a hero moment, but they trade legibility for motion, so don't ask them to carry an explanation.
 <Tip>
  `code-morph` re-drives Shiki Magic Move as a paused GSAP timeline, and `code-diff` collapses removed lines and expands added lines. Both read "an edit happened" far more clearly than retyping the whole snippet with `code-typing` — reach for them when the story is *a change*, not *authoring from scratch*.
@@ -69,7 +69,7 @@ For "here's what changed," hand `code-diff` the before and after and let it colo
 *Rendered from the prompt above, unedited.*
-> /motion-graphics 5-second 1920x1080 video. Show a 12-line config file; a highlight band sweeps to line 7 (`timeout: 30_000`) while the surrounding lines dim. Hold with line 7 lit. Use the `code-highlight` registry block. No audio.
+> /motion-graphics 5-second 1920x1080 video. Show a 12-line config file; a highlight band sweeps to line 7 (`timeout: 30_000`) while the surrounding lines dim. Hold with line 7 lit and the cursor blinking. Use the `code-highlight` registry block. No audio.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/validate-code-highlight.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *Rendered from the prompt above, unedited — the agent authors plausible surrounding config lines; paste all 12 if the exact file matters.*
@@ -137,7 +137,7 @@ When the code you're animating comes from a real PR, don't hand-write the beats
 - [Motion that reads premium](/prompting/motion) — the hold-and-settle rules the code blocks still need from you.
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone) opens with this chapter's technique: real HyperFrames markup typed character by character, and the typed line's baseline literally grows into the timeline wire the rest of the film travels (0:00–0:07 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone) opens with this chapter's technique: real HyperFrames markup typed character by character, and the typed line's baseline literally grows into the timeline wire the rest of the film travels (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -16,13 +16,13 @@ There are two ways to get a chart, and the choice is about control:
 Feed data inline or as a file. Small series go straight in the prompt; a CSV gets referenced and parsed at build time (keep it deterministic — no [render-time fetches](/concepts/determinism)).
-> 12-second 1920x1080 video. Turn this into an animated bar chart with a staggered reveal and value labels counting up on each bar:
+> /motion-graphics 12-second 1920x1080 video. Turn this into an animated bar chart with a staggered reveal and value labels counting up on each bar:
 > ```
 > Python 41, TypeScript 33, Rust 19, Go 14, Java 9
 > ```
 > Use the `data-chart` registry block. No audio.
-> 10-second 1920x1080 video, dark slate background. Title "Top languages 2026" top-left. Five horizontal bars (Python, TypeScript, Rust, Go, Java) grow from zero with staggered starts, overtaking each other twice mid-animation; each bar has a right-edge value label counting up to its final %. End state holds 2s with the leader pulsing once. Hand-draw everything — no chart library. No audio.
+> /motion-graphics 10-second 1920x1080 video, dark slate background. Title "Top languages 2026" top-left. Five horizontal bars (Python, TypeScript, Rust, Go, Java) grow from zero with staggered starts, overtaking each other twice mid-animation; each bar has a right-edge value label counting up to its final %. End state holds 2s with the leader pulsing once. Hand-draw everything — no chart library. No audio.
 **State the block *or* opt out of it — don't leave it implicit.** "Animate this data" without a decision drifts between a generic block and an improvised layout.
 - ❌ `animate this CSV as a chart`
@@ -53,7 +53,7 @@ Each map block answers a different geographic question. Say what the map is *for
 The US map encodings combine — asking to "shade states *and* draw flows between two cities" gets you one composition: the agent merges the blocks at source onto a shared projection so arcs land exactly on the choropleth's states.
-> 12-second 1920x1080 video. A US choropleth shades states by adoption rate with staggered reveals and a gradient legend, then connection arcs draw between San Francisco, Austin, and New York. Use the `us-map` and `us-map-flow` registry blocks. No audio.
+> /motion-graphics 12-second 1920x1080 video. A US choropleth shades states by adoption rate with staggered reveals and a gradient legend, then connection arcs draw between San Francisco, Austin, and New York. Use the `us-map` and `us-map-flow` registry blocks. No audio.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/validate-us-map-flows.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *Rendered from the prompt above, unedited.*
@@ -89,7 +89,7 @@ For a point-to-point journey — a route drawing across a map with a landing bea
 - [The specification dial](/prompting/specification-dial) — deciding when to name a block versus hand-draw.
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Measure and Everywhere regions are this chapter end to end: `data-chart` bars rise from the timeline wire while the hero count lands, then the same wire becomes a great-circle arc over the `world-map` block's real cloud render regions (0:14–0:28 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Measure and Everywhere regions are this chapter end to end: `data-chart` bars rise from the timeline wire while the hero count lands, then the same wire becomes a great-circle arc over the `world-map` block's real cloud render regions (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -90,7 +90,7 @@ The engine rationale: a workflow's preset is a coherent, tested system — color
 </CardGroup>
 <Note>
-**Capstone thread** — the entire [Level 7 film](/prompting/capstone) obeys a supplied `frame.md` — the real HyperFrames brand. The closing lockup is where the system shows most: ABC Solar Display for the display type and the mint→cyan CTA gradient in its single sanctioned appearance (0:56–1:02 below, cut from the film).
+**Capstone thread** — the entire [Level 7 film](/prompting/capstone) obeys a supplied `frame.md` — the real HyperFrames brand. The closing lockup is where the system shows most: ABC Solar Display for the display type and the mint→cyan CTA gradient in its single sanctioned appearance (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -98,6 +98,6 @@ This is the clause in the [full capstone prompt](/prompting/capstone#the-full-pr
 > **Design system: the provided `frame.md` is the single source of brand truth — read it first and obey it exactly.** It is the real HyperFrames brand (by HeyGen), dark-first: flat near-black ground […] **mint `#3CE6AC` used sparingly as the single accent — mint means go / primary / active**. The mint→cyan gradient (`#3CE6AC → #00E3FF`) appears in exactly one place in the whole film: the final CTA lockup.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-render.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
-*That clause, rendered — the region cut from the finished film.*
+*That clause paying off, rendered — the closing lockup, where the brand file's display face and its one sanctioned gradient finally appear together.*
 *Next: [Variables and templating](/prompting/variables-and-templating) — turn the brand tokens that repeat across a series into named slots you fill per render.*
@@ -1,6 +1,6 @@
 ---
 title: Verified example prompts
-description: "18 copy-paste prompts, every one run end-to-end to a finished video that passes check."
+description: "Copy-paste prompts, every one run end-to-end to a finished video that passes check."
 ---
 This is the level's gallery, not a new lesson — read these with the vocabulary you just picked up: the [six-part skeleton](/prompting/anatomy), the [specification dial](/prompting/specification-dial), and the [word list](/prompting/vocabulary) or [full visual spec](/prompting/visual-specs) it maps to. Spot the skeleton parts in each prompt below as you read it.
@@ -69,7 +69,7 @@ What you can already steer from the prompt, before you've learned any technique.
 ## Common failure modes
-**"60 seconds" instead of "~60 seconds".** A supplied script's spoken duration is not knowable until the TTS renders; a hard target makes the agent mangle the words to hit the clock.
+**"60 seconds" instead of "~60 seconds".** Same rule as [ride 1](/prompting/product-launch#common-failure-modes), and it bites harder here because the script is the whole video — a supplied script's spoken duration isn't knowable until the TTS renders.
 - ❌ `a 60-second explainer from this text: ...`
 - ✅ `a ~60-second explainer from this text: ...`
@@ -26,7 +26,7 @@ The same brief — four people arm in arm, warm gradient sweaters, flat-illustra
 *Generated illustration animated as layers — real anatomy and editorial shading; the animated line still passes behind the figures because the artwork was keyed to transparency.*
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Surface region rides on generated artwork: a palette-neutral mural duotoned live by CSS from the composition's two variables, so even the raster re-skins on a `--variables` render (0:38–0:45 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Surface region rides on generated artwork: a palette-neutral mural duotoned live by CSS from the composition's two variables, so even the raster re-skins on a `--variables` render (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -17,6 +17,14 @@ description: "Talk to the agent like a video editor — small targeted edits bea
 The agent already has the composition open and the skills loaded — small targeted edits produce better results than long re-specifications.
 ## The gates can't tell you it's good
 Before the loop: know what you are iterating *against*. `lint` and `check` are necessary and not sufficient — they verify structure, not quality. `lint` reads the HTML, `check` runs the composition in a headless browser and reports runtime errors, layout collisions, motion problems, and contrast failures. Every one of those is a fact about whether the composition is *well-formed*. None of them is an opinion about whether the video is *good*.
 So the failure mode to expect is: **passes every automated gate, fails human review.** Both earlier builds of this guide's [capstone](/prompting/capstone) did exactly that — one came back clean and read as sparse elements floating in empty frames, the next came back clean and read as a well-dressed slideshow. No linter has an opinion about either.
 Which is why the loop below always ends at the render, not at the gate. Watch the output, name what's wrong in specific terms, and change one thing.
 ## Editing is for nudging, not gambling
 Three moves keep iteration convergent instead of circular:
@@ -43,7 +43,7 @@ SFX resolve from a small bundled library plus the catalog. Cue them to specific
 ## Pace reveals to the narration
-Once a video has a voice, the voice is the clock. The single highest-leverage audio instruction after choosing the voice is telling the agent that on-screen elements land **on their spoken cues** — the stat appears as the narrator says it, not at some independent time the builder eyeballed. Without this, narration and visuals drift into two parallel tracks that happen to share a file:
+Once a video has a voice, the voice is the clock — the next instruction that matters is telling the agent that on-screen elements land **on their spoken cues** — the stat appears as the narrator says it, not at some independent time the builder eyeballed. Without this, narration and visuals drift into two parallel tracks that happen to share a file:
 > VO-paced reveals: each scene's elements land on their spoken cues; secondary elements keep resolving while the narrator is mid-thought; the scene is complete just as the narration moves on.
@@ -103,7 +103,7 @@ See the [Rendering guide](/guides/rendering#input-video-codecs) for the mechanic
 ## The supplied-assets rule
-The single most reliable media instruction is an explicit path. The agent will search when you describe an asset, but a path removes every ambiguity about *which* file — and for your own brand assets, it's the only way to guarantee the right one:
+For any asset you already have, an explicit path is the instruction that removes the most ambiguity. The agent will search when you describe an asset, but a path removes every ambiguity about *which* file — and for your own brand assets, it's the only way to guarantee the right one:
 - ❌ `use my logo`
 - ✅ `use assets/logo.svg`
@@ -129,7 +129,7 @@ This mirrors the negatives discipline in [Anatomy](/prompting/anatomy): close th
 </CardGroup>
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Material region runs this chapter's entire pipeline on one clip: generated footage → HEVC auto-proxy → background removal mid-scene → word-synced captions from the clip's own transcription, with the clip's audio ducking the BGM (0:28–0:36 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Material region runs this chapter's entire pipeline on one clip: generated footage → HEVC auto-proxy → background removal mid-scene → word-synced captions from the clip's own transcription, with the clip's audio ducking the BGM (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -6,7 +6,7 @@ description: "Seven motion-grammar rules from frame-by-frame study of profession
 By now you can specify a frame precisely — exact copy, exact colors, exact layout, exact timing. This level makes it feel alive. Static frames can be perfect and the video still feels cheap if the motion is dead. Professional motion design follows a grammar you can put directly in prompts:
 1. **Nothing ever fully stops.** Every "hold" carries ambient idle motion — a 1-2% breathing scale, slow drift, a shimmer. Never write "holds motionless"; write "settles into a gentle ambient idle." A frozen final second is the single biggest cheap-motion tell.
-2. **The camera is an actor.** Give each scene one continuous camera move — a 4-8% push-in, a slow orbit, parallax between layered planes — easing gently but never settling on screen (compute the ease over a window slightly longer than the render).
+2. **The camera is an actor.** Give each scene one continuous camera move — a 4-8% push-in, a slow orbit, parallax between layered planes — easing gently and never *decaying* to a dead stop at the end of a scene (compute the ease over a window slightly longer than the render). A deliberate mid-film rest is a different thing, and it is sanctioned: see [avoiding the slideshow](#avoiding-the-slideshow).
 3. **Overlapping action.** No two elements share a start or end time. Entrances stagger at irregular offsets; the next element begins while the last is still settling.
 4. **Overshoot and follow-through.** Every pop scales past its target and settles back; letters can tumble in individually with rotation.
 5. **Depth planes.** One or two large, heavily-blurred foreground elements drifting near the lens sell depth instantly.
@@ -27,7 +27,7 @@ The difference is measurable, not just visible: in the final second the frozen b
 ## Avoiding the slideshow
-The seven rules govern motion *inside* a scene. Apply all seven, cut between scenes, and you can still end up with a slideshow: a sequence of well-animated cards that happen to play in order. It's the most common note on multi-scene work, and two failed review passes on the [Level 7 film](/prompting/capstone) are what taught us the diagnosis — neither fix was more animation.
+The seven rules govern motion *inside* a scene. Apply all seven, cut between scenes, and you can still end up with a slideshow: a sequence of well-animated cards that happen to play in order. It's the most common note on multi-scene work, and the rebuild passes on the [Level 7 film](/prompting/capstone) after its slideshow diagnosis are what taught us the two properties — neither fix was more animation.
 **What a slideshow actually is:** a run of scenes that are *independent* (nothing connects one to the next) and *uniform in energy* (nothing tells you which moment matters). So any fix has to supply two properties:
@@ -42,7 +42,13 @@ The capstone treats the whole film as a single wide space the camera travels acr
 For property 1, "no hard cuts" was not enough on its own — the first rebuild honored it and still played as slides, because each region faded up centered, sat, and faded out while the camera politely waited. What worked was naming the things that survive the boundary: **persistent elements** (a wire that becomes the chart baseline, then the map arc, then the waveform, then the 3D coil; a frame-ruler; a protagonist chip), **arrivals instead of cuts** (the next region is already at the edge of frame before the camera reaches it; the previous exits by parallax), and **a negative that names the tell** (agents default to the slideshow because it is safe — forbid it explicitly).
-For property 2, the second rebuild fixed continuity and broke emphasis: the camera never stopped, so every hero moment landed mid-sweep and got thrown away. The fix was a **dwell** — a genuine 1.5–2.5s full stop while the point lands. The subtlety that keeps this from contradicting rule 1: during a dwell the **camera** rests, the **film** does not. Counters keep ticking, labels keep stamping. Say that, or you trade a slideshow for a freeze-frame.
+For property 2, the second rebuild fixed continuity and broke emphasis: the camera never stopped, so every hero moment landed mid-sweep and got thrown away. The fix was a **dwell** — a genuine 1.5–2.5s full stop while the point lands. Two subtleties keep this consistent with the rules above. Against rule 1: during a dwell the **camera** rests, the **film** does not — counters keep ticking, labels keep stamping. Say that, or you trade a slideshow for a freeze-frame. Against rule 2: a dwell is a mid-film rest the piece resumes from, not the decayed settle that rule guards against — what rule 2 forbids is a camera that runs out of energy and dies on the last frame.
 <Note>
 **Capstone thread** — this is the method the [Level 7 film](/prompting/capstone) uses, and the reason it reads as a film instead of nine demos in a row.
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys both properties — prompt language you can lift for your own video:
 > ONE continuous camera journey with a dwell-and-sweep rhythm. The whole film is a single wide world (one large scene space) that the camera dollies across […] in one unbroken move with NO hard cuts anywhere except inside the two sanctioned seam moments named below. The rhythm: the camera SWEEPS between regions, then eases to a genuine REST at each region's hero moment — a full stop of roughly 1.5–2.5 seconds while the main point lands […] then accelerates away. The dwell is what gives the sweep meaning: without the rest, emphasis dies mid-motion. During a dwell the WORLD keeps resolving (counters tick, labels stamp, secondary motion continues) — the camera rests, the film never freezes.
@@ -57,12 +63,12 @@ Each of these supplies both properties by different means. They also compose —
 | Method | How it crosses the boundary | Where the emphasis comes from |
 | --- | --- | --- |
-| **Match cuts** | Cut freely, but on a shared shape, color, or motion vector, so the eye carries a form through the seam | Break the rhyme deliberately at the moment that matters |
+| **Match cuts** ([Transitions](/prompting/transitions)) | Cut freely, but on a shared shape, color, or motion vector, so the eye carries a form through the seam | Break the rhyme deliberately at the moment that matters |
-| **A hero prop** | Cut the environment, keep one object continuously on screen (the product, a chart, a character) | Push in on the prop and still everything else around it |
+| **A hero prop** ([Storyboards](/prompting/storyboards)) | Cut the environment, keep one object continuously on screen (the product, a chart, a character) | Push in on the prop and still everything else around it |
-| **Persistent chrome** | Scenes change *inside* a frame that never does — a HUD, a ruler, a browser shell, a border | Let the chrome fall away for one beat; its absence is the accent |
+| **A persistent frame** | Scenes change *inside* a frame that never does — a HUD, a ruler, a browser shell, a border | Let the chrome fall away for one beat; its absence is the accent |
-| **Audio as the spine** | One unbroken sentence or musical phrase crosses the cut; the ear ties what the eye didn't | A rest in the audio — a held note, a beat of silence before the number lands |
+| **Audio as the spine** ([Media and audio](/prompting/media-and-audio)) | One unbroken sentence or musical phrase crosses the cut; the ear ties what the eye didn't | A rest in the audio — a held note, a beat of silence before the number lands |
 | **Beat-locked cutting** | Cuts land on an analyzed grid, so the rhythm itself is the connective tissue ([Music](/prompting/music-and-slideshows)) | Hold through a downbeat, or drop a hit, so one card gets twice the space |
-| **Accumulation** | Nothing ever exits — each scene adds to one canvas and the frame reflows to the new material | Everything but the newest element quiets to a low idle |
+| **Accumulation** ([Storyboards](/prompting/storyboards)) | Nothing ever exits — each scene adds to one canvas and the frame reflows to the new material | Everything but the newest element quiets to a low idle |
 Whichever you choose, put the two properties in the prompt in your own words, and name the tell you are forbidding. The device is negotiable; the properties are not.
@@ -81,7 +81,7 @@ What you can already steer from the prompt, before you've learned any technique.
 </Tip>
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Rhythm region cuts media cards onto a real analyzed beat grid from `hyperframes beats` — the film's only sanctioned hard cuts, every one on a detected beat while the camera keeps traveling (0:45–0:52 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Rhythm region cuts media cards onto a real analyzed beat grid from `hyperframes beats` — the film's only sanctioned hard cuts, every one on a detected beat while the camera keeps traveling (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -105,12 +105,12 @@ Quote the exact copy — unquoted names and titles get paraphrased (see [anatomy
 - ✅ pick a real block, or describe the card and let the agent build a custom one in a freeform composition
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Material region docks a designed lower-third chip that renders *behind* the matted-out subject (0:28–0:36 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Material region docks a designed lower-third chip that renders *behind* the matted-out subject (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
-> […] the main **keywords of their own line — derived from the clip's transcription — land word-synced as huge display text BEHIND the cutout**, each keyword slamming in on its spoken moment with the subject's silhouette occluding it (the two-layer text-behind-subject plate) […] A designed lower-third chip renders behind the subject.
+> […] as the camera arrives and BEFORE the person speaks, the framework mattes the footage — **the background peels away via background removal**, sliding off along the travel direction and leaving the cutout standing alone on the brand ground. […] A designed lower-third chip renders behind the subject.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-material.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *That clause, rendered — the region cut from the finished film.*
@@ -31,7 +31,7 @@ The guide is one arc, novice to advanced. Each level is what you can do once you
 Install the skills in your project (or globally for your agent):
 ```bash
-npx skills add heygen-com/hyperframes
+npx skills add heygen-com/hyperframes --full-depth
 ```
 The installer shows a picker. Select the **core skills** below — every project needs them. In Claude Code, restart the session after installing; the skills register as **slash commands**. Start at `/hyperframes`: it orients you to the whole surface and routes "make me a video" requests to the right workflow.
@@ -44,9 +44,10 @@ The installer shows a picker. Select the **core skills** below — every project
 | `/hyperframes-core`     | Composition contract — HTML structure, `data-*` attributes, clips, tracks  |
 | `/hyperframes-animation`| All animation — motion rules, scene blueprints, transitions, and the runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) |
 | `/hyperframes-creative` | Creative direction — design spec, palettes, typography, narration, beats   |
-| `/hyperframes-cli`      | Dev-loop CLI — `init`, `lint`, `inspect`, `preview`, `render`, `doctor`    |
+| `/hyperframes-cli`      | Dev-loop CLI — `init`, `lint`, `check`, `preview`, `render`, `doctor`    |
 | `/media-use`            | Media OS — TTS voiceover (`tts`), `transcribe`, `remove-background`, plus BGM / SFX / image resolution |
 | `/hyperframes-registry` | Block and component installation via `hyperframes add`                     |
 | `/hyperframes-keyframes`| Seek-safe keyframe authoring across runtimes, plus `hyperframes keyframes` diagnostics |
 | `/general-video`        | The general authoring workflow — fallback for any video that doesn't match a specific workflow below |
 **Optional workflows — add the ones that match your inputs** (`/hyperframes` routes to whichever you've installed)
@@ -62,9 +63,10 @@ The installer shows a picker. Select the **core skills** below — every project
 | `/music-to-video`        | A music track + your images → beat-synced video (lyric / slideshow / kinetic promo) |
 | `/slideshow`             | A deck outline or slides → navigable presentation with presenter mode (not a rendered MP4) |
 | `/remotion-to-hyperframes` | Port an existing Remotion (React) composition to HyperFrames HTML         |
 | `/figma`                 | A Figma file / frame / URL → imported assets, brand tokens, and reconstructed motion |
 <Tip>
-  To skip the picker and install everything (core + every workflow) in one shot, run `npx skills add heygen-com/hyperframes --all`. And start HyperFrames prompts with `/hyperframes` (or invoke the skill another way for non-Claude agents) — it loads the routing + composition context explicitly so the agent picks the right workflow and gets the rules right the first time.
+  To skip the picker and install everything (core + every workflow) in one shot, run `npx skills add heygen-com/hyperframes --all --full-depth`. And start HyperFrames prompts with `/hyperframes` (or invoke the skill another way for non-Claude agents) — it loads the routing + composition context explicitly so the agent picks the right workflow and gets the rules right the first time.
 </Tip>
@@ -104,6 +106,8 @@ Cold-start prompts work best when you specify **duration** ("10 seconds", "5 sce
 Warm-start prompts produce richer, more grounded videos because the agent is writing about *something specific* instead of inventing copy.
 The four prompts above illustrate shape, not results — every prompt in this guide that ships with an embedded render was run exactly as written, and the gallery of those lives in [Verified examples](/prompting/examples).
 ## Recommended workflow
 1. `npx hyperframes init my-video` — scaffold a project (skills install automatically)
@@ -111,7 +115,10 @@ Warm-start prompts produce richer, more grounded videos because the agent is wri
 3. Prompt with `/hyperframes` and one of the shapes above
 4. `npx hyperframes preview` — watch in the browser as the agent edits
 5. Iterate with small targeted prompts
-6. `npx hyperframes render --output final.mp4` when you're happy
+6. `npx hyperframes lint && npx hyperframes check` — the gate: structure, runtime errors, layout collisions, motion, and contrast. Both must pass before you render
 7. `npx hyperframes render --output final.mp4` when you're happy
 `check` is the step people skip and regret. It runs the composition in a headless browser and reports what a still frame can't tell you — an element overflowing its region, two text blocks colliding, a runtime error that only fires mid-timeline, contrast below WCAG AA. It is fast and it is not optional: a render that took ten minutes will happily contain a defect `check` would have named in seconds.
@@ -138,10 +145,12 @@ And at the far end of the [specification dial](/prompting/specification-dial), a
 <CardGroup cols={2}>
  <Card title="Prompt anatomy" href="/prompting/anatomy">The six-part skeleton every one-shot prompt shares</Card>
-  <Card title="Verified examples" href="/prompting/examples">18 copy-paste prompts, each one-shots a finished video</Card>
+  <Card title="Verified examples" href="/prompting/examples">Copy-paste prompts, each one-shots a finished video</Card>
  <Card title="The specification dial" href="/prompting/specification-dial">How much to specify, and what density buys</Card>
  <Card title="Vocabulary" href="/prompting/vocabulary">Words that map to specific framework settings</Card>
  <Card title="Premium motion" href="/prompting/motion">The seven-rule grammar that keeps video from feeling cheap</Card>
  <Card title="Recreating references" href="/prompting/recreating-references">Match something you saw, from text alone</Card>
  <Card title="Capstone" href="/prompting/capstone">The film above, dissected frame by frame</Card>
 </CardGroup>
 *Next: [Your first video](/prompting/product-launch) — one URL, one prompt, a finished launch video.*
@@ -3,13 +3,19 @@ title: Recreating something you saw
 description: "Transcribe motion, iterate with absolute targets, distill the constants — and know where the text-only ceiling is."
 ---
-[Iterating](/prompting/iterating) covered the discipline in general. This page is its hardest test: matching a specific reference you watched rather than a look you're inventing. In practice, matching a specific reference from text alone reaches roughly 90% — but only with a specific workflow, and knowing where the ceiling is.
+[Iterating](/prompting/iterating) covered the discipline in general. This page is its hardest test: matching a specific reference you watched rather than a look you're inventing. In practice, matching a specific reference from text alone reaches roughly 90% — but only with a specific workflow, and knowing where the ceiling is. (The percentages on this page are observed results from the guide's own recreation builds, judged frame-against-frame; treat them as the shape of the curve, not a guarantee.)
-**Transcribe motion, not just composition.** Watch the reference frame by frame and write down: the exact duration, the camera's path, what each element does with timestamps, how entrances overlap, which layers are blurred, sampled colors. A prompt built this way one-shots ~75% of the target — structure and motion arc land, rendering calibration doesn't.
+## Transcribe motion, not just composition
-**Iterate with absolute targets.** Compare your render against the reference frame by frame, then correct one axis at a time while freezing everything that already matches. State corrections as absolute values, not relative nudges — "dot radius = 25% of row spacing", not "make dots 2x finer". Relative corrections pendulum: too big, then too small, then too big. Expect a handful of rounds to converge.
+Watch the reference frame by frame and write down: the exact duration, the camera's path, what each element does with timestamps, how entrances overlap, which layers are blurred, sampled colors. A prompt built this way one-shots ~75% of the target — structure and motion arc land, rendering calibration doesn't.
-**Distill the converged values back into the prompt.** Iteration is a search; the found constants are reusable. A prompt carrying them one-shots ~80–90% of the converged quality on a fresh build — the discrete facts (timings, counts, hexes, ratios, camera arcs) transfer losslessly, while continuous qualities (glow prominence, framing feel) still vary by a calibration note or two. And the converged composition file itself is the pixel-exact artifact: renders are deterministic, so re-rendering it reproduces the result bit-for-bit.
+## Iterate with absolute targets
 Compare your render against the reference frame by frame, then correct one axis at a time while freezing everything that already matches. State corrections as absolute values, not relative nudges — "dot radius = 25% of row spacing", not "make dots 2x finer". Relative corrections pendulum: too big, then too small, then too big. Expect a handful of rounds to converge.
 ## Distill the converged values back into the prompt
 Iteration is a search; the found constants are reusable. A prompt carrying them one-shots ~80–90% of the converged quality on a fresh build — the discrete facts (timings, counts, hexes, ratios, camera arcs) transfer losslessly, while continuous qualities (glow prominence, framing feel) still vary by a calibration note or two. And the converged composition file itself is the pixel-exact artifact: renders are deterministic, so re-rendering it reproduces the result bit-for-bit.
 A distilled spec that one-shots a broadcast-style animated globe:
@@ -33,4 +39,13 @@ A distilled spec that one-shots a broadcast-style animated globe:
 The honest ceiling: words carry discrete, countable things losslessly and underdetermine continuous perceptual qualities — bloom falloff, material feel, optical color mixing. That last 10% doesn't close from text; it oscillates. If pixel-exact matters, keep the composition file.
 ## Related
 <CardGroup cols={2}>
  <Card title="Iterating" href="/prompting/iterating">The correction loop this page pushes to its limit</Card>
  <Card title="High-fidelity looks" href="/prompting/visual-specs">Writing the spec density a recreation needs</Card>
  <Card title="Runtimes and 3D" href="/prompting/runtimes-and-3d">The adapter the worked example uses</Card>
  <Card title="Capstone" href="/prompting/capstone">Every technique composed into one film</Card>
 </CardGroup>
 *Next: [Rendering and output](/prompting/rendering-and-output) — once the cut is locked, the words that pick the right export.*
@@ -11,7 +11,7 @@ Not a new video — a **translation**. The [`/remotion-to-hyperframes`](/prompti
 This is a migration, not a creation workflow. It only fires on an explicit ask to port, convert, migrate, or translate a **Remotion** source. Two things that look similar but aren't this:
- "Make something like my Remotion video" with no ask to migrate the actual source → a fresh build, [`/general-video`](/prompting/anatomy).
+- "Make something like my Remotion video" with no ask to migrate the actual source → a fresh build, [`/general-video`](/prompting/overview#one-time-setup).
 - A non-Remotion source (After Effects, Framer Motion, plain React/CSS) → there's no Remotion source to translate; re-create it natively instead.
 The direction is one-way. There's no export back out to Remotion or any other framework.
@@ -90,6 +90,8 @@ That routes to HyperFrames' AWS Lambda path, which fans the render across many p
 - ❌ `set up Lambda so I can preview edits faster` — cloud dispatch adds latency to a fast local loop
 - ✅ `render the final 3-minute 4K cut on Lambda` — the workload that actually justifies fanning out
 Lambda is not the only remote target. **HeyGen-hosted cloud rendering** ([guide](/deploy/cloud)) takes the infrastructure off your hands entirely — no AWS account to configure — and **Google Cloud Run** ([guide](/deploy/gcp-cloud-run)) is the option when your stack already lives on GCP. Name the one you want ("render this on Cloud Run"); the routing is explicit, never inferred.
 ## Preview before you commit the slow render
 The cheapest way to avoid a wasted `high`/4K/HDR render is to judge the frame first. The habit the workflow skills follow:
@@ -115,7 +117,7 @@ The cheapest way to avoid a wasted `high`/4K/HDR render is to judge the frame fi
 </CardGroup>
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone) ends on this chapter's core promise: the protagonist chip snaps into a render slot and seeded confetti holds every piece for exactly two frames — deterministic, identical on every render (0:56–1:02 below, cut from the film). Its Everywhere region names the real cloud render targets: Lambda and Cloud Run.
+**Capstone thread** — the [Level 7 film](/prompting/capstone) ends on this chapter's core promise: the protagonist chip snaps into a render slot and seeded confetti holds every piece for exactly two frames — deterministic, identical on every render (cut from the film, below). Its Everywhere region names the real cloud render targets: Lambda and Cloud Run.
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -123,6 +125,6 @@ This is the clause in the [full capstone prompt](/prompting/capstone#the-full-pr
 > A **seeded confetti burst** fires — mulberry32, **seed 42, each piece holding position for exactly two frames before stepping** (stop-motion feel) — and the VO lands the honest punchline: identical on every render, because determinism is the whole point.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-render.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
-*That clause, rendered — the region cut from the finished film.*
+*That clause, rendered — the seeded confetti, identical on every render of this composition.*
 *Next: [Porting from Remotion](/prompting/remotion-migration) — bringing an existing Remotion project into everything you now know.*
@@ -3,7 +3,7 @@ title: Rules and anti-patterns
 description: "The technical rules that keep renders correct, and the prompt patterns that cause friction."
 ---
-Every rule below was taught somewhere earlier in this guide — nothing here is new material. This page is the lookup table: skim it when you're debugging a render or hand-editing a composition, and follow a rule's link back to the chapter that explains *why* it exists. The lint-rule rows extend the same seven rules with more specific cases the linter now catches automatically.
+Almost every rule below is taught in context somewhere earlier in this guide; a few of the narrower lint rules appear only here, because they surface as an error message before they ever matter to a prompt. This page is the lookup table: skim it when you're debugging a render or hand-editing a composition, and follow a rule's link back to the chapter that explains *why* it exists. The lint-rule rows extend the same seven rules with more specific cases the linter now catches automatically.
 ## Rules to know
@@ -87,7 +87,7 @@ The rule of thumb: anything the video needs to *know* must be present before ren
 </CardGroup>
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Depth region is real Three.js through the frame adapter: the timeline wire coils around a rim-lit faceted form, and the protagonist chip threads the coil's loops and passes behind the form with true depth occlusion (0:51–0:58 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Depth region is real Three.js through the frame adapter: the timeline wire coils around a rim-lit faceted form, and the protagonist chip threads the coil's loops and passes behind the form with true depth occlusion (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -35,7 +35,7 @@ A storyboard's direction block is the rules every frame obeys without restating
 - ❌ `use the brand colors, plus a highlight color for the important bits`
 - ✅ `ground: deep navy; ink: warm white. Emphasis = invert, scale up, or go denser — never a third color.`
-**VO-paced reveals.** This is the throughline rule for *when* things appear, and it's worth stating close to verbatim because it's genuinely the rule the build follows: *every frame reveals to the VO — at t=0 only what the narrator is saying is on screen; each part arrives on its spoken cue, with reveals spreading across the back half.* Pair it with a hold behavior: say whether a held frame stays fully still or gets a subtle idle (never a slow drift or "breathing" — that reads as unfinished, not as a choice). If the piece is silent, keep the rule's shape but swap the trigger: reveals land on named timestamps instead of spoken clauses — the pacing still has to be deliberate, there's just no VO to key it to.
+**VO-paced reveals.** The rule itself is in [Media and audio](/prompting/media-and-audio#pace-reveals-to-the-narration); a storyboard is where you *apply* it per frame — at t=0 only what the narrator is saying is on screen, each part arriving on its spoken cue. Pair it with a hold behavior: say whether a held frame stays fully still or gets a subtle idle (never a slow drift or "breathing" — that reads as unfinished, not as a choice). If the piece is silent, keep the rule's shape but swap the trigger: reveals land on named timestamps instead of spoken clauses — the pacing still has to be deliberate, there's just no VO to key it to.
 **One breather.** Across the whole film, name exactly one frame as the breather — the deliberately calmer, more static beat, or the longest held read. Every other frame keeps developing continuously. Naming it prevents the build from either over-animating the one frame that's supposed to let the audience exhale, or under-animating the rest to match it.
@@ -100,7 +100,7 @@ Without stating the return explicitly, a rebuild is free to treat the early moti
 </CardGroup>
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone) stretches this chapter's callback device across its whole runtime: the `<div class="clip">` chip typed in the opening rides the wire through every region and finally snaps into the render slot as the payoff (0:56–1:02 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone) stretches this chapter's callback device across its whole runtime: the `<div class="clip">` chip typed in the opening rides the wire through every region and finally snaps into the render slot as the payoff (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -108,6 +108,6 @@ This is the clause in the [full capstone prompt](/prompting/capstone#the-full-pr
 > **The clip card** — the `<div class="clip">` typed in the opening travels the whole journey: it slides onto the wire as a clip chip after being typed, rides ahead of the camera between regions (handing itself off — visible leaving one region and arriving in the next), and is the thing that finally renders at the end. It is the protagonist.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-render.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
-*That clause, rendered — the region cut from the finished film.*
+*That clause paying off, rendered — the protagonist chip arriving at the render slot after a full minute on the wire.*
 *Next: [Editing existing videos](/prompting/editing-existing-videos) — the editor verbs that turn a first render, storyboard or not, into the twenty edits after it.*
@@ -7,7 +7,7 @@ description: "Map energy and mood to named shader and CSS transition blocks, and
 ## What transitions do and when they trigger
-A transition tells the viewer how two scenes relate — a crossfade says "this continues," a whip pan says "next point," a burn says "something changed." Any composition with more than one scene needs them: without a transition, a scene change reads as an unintentional jump cut (see [rules and anti-patterns](/prompting/rules-and-anti-patterns)). The skills add transitions by default, so prompts trigger this layer whenever you describe scene changes, crossfades, wipes, reveals, or a mood ("warm," "clinical," "glitchy") — or when you name a block directly.
+A transition tells the viewer how two scenes relate — a crossfade says "this continues," a whip pan says "next point," a burn says "something changed." Most compositions with more than one scene want them: an *unmotivated* scene change reads as an accidental jump cut (see [rules and anti-patterns](/prompting/rules-and-anti-patterns)). A bare cut is legitimate when something else carries the continuity — a match cut on a shared shape, a beat grid, a prop that stays on screen — which is the alternatives table in [avoiding the slideshow](/prompting/motion#avoiding-the-slideshow). The skills add transitions by default, so prompts trigger this layer whenever you describe scene changes, crossfades, wipes, reveals, or a mood ("warm," "clinical," "glitchy") — or when you name a block directly.
 Two families, both first-class:
@@ -91,7 +91,7 @@ Name the block and the seam — transitions are the one place where per-seam con
 - ✅ pick a real block, e.g. `sdf-iris` for an iris reveal
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone) allows itself exactly one shader seam: the camera pushes through an `sdf-iris` lens into the Surface region (0:38–0:45 below, cut from the film) with the timeline wire visible through the iris the whole way — a lens the journey passes through, not a cut.
+**Capstone thread** — the [Level 7 film](/prompting/capstone) allows itself exactly one shader seam: the camera pushes through an `sdf-iris` lens into the Surface region (cut from the film, below) with the timeline wire visible through the iris the whole way — a lens the journey passes through, not a cut.
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -56,6 +56,25 @@ The most common miss is describing the finished video with the values already fi
 The engine rationale: variables are runtime values a script applies to the live DOM, resolved from declared defaults, per-instance overrides, or the CLI in that precedence order. Declaring them up front means the reusable structure exists from the first render and the default is just one more value set. Baking `"Acme — Pro — $49"` into the markup produces a composition with no slots — reuse then means an edit pass over hardcoded text for every variant, which is exactly what variables exist to avoid.
 ## Prove the template actually re-skins
 A template that never re-skins can pass every gate you have. `lint` and `check` verify structure, and `--strict-variables` catches an undeclared or mistyped key — but none of them can tell you whether the values you passed ever reached the DOM. The failure looks like success: the render completes, exits clean, and is **pixel-identical to the default**.
 So test it differentially — render twice and compare:
 ```bash
 hyperframes render --output default.mp4
 hyperframes render --variables '{"ground":"#0d1420","ink":"#c8ff3d"}' --strict-variables --output reskin.mp4
 ```
 Two identical files mean the override never landed. The usual cause is scope: `data-composition-variables` is declared **per composition file**, so variables declared inside a sub-composition pulled in with `data-composition-src` do not inherit a root-level `--variables` override — the sub-composition keeps its own defaults and a root override silently does nothing.
 This is not hypothetical. The first build of this guide's [capstone](/prompting/capstone) was authored as seven sub-composition files, each declaring its own palette variables. Every gate passed, the re-skin render succeeded, and it came out identical to the default. That is why the capstone prompt now carries a hard architecture constraint — one `index.html`, one variable scope — and why it names both renders it expects:
 > **Variables:** expose `ground` (default `#0a0a0a`) and `ink` (default `#3CE6AC`) as composition variables on the single root file, bound via CSS custom properties everywhere (including the duotoned mural), so one `--variables` call re-skins the entire journey. It will be rendered twice: the default brand palette, and a second full render with `{"ground":"#0d1420","ink":"#c8ff3d"}`.
 If you need sub-compositions *and* a template, forward the values explicitly at each mount point rather than assuming they inherit.
 ## What can't be a variable
 A few inputs are read once at compile time and no variable can move them: composition **dimensions** (`data-width` / `data-height`), the **root composition's total duration**, **frame rate**, and **output format / codec**. So this doesn't do what it reads like:
@@ -34,7 +34,7 @@ The liquid-glass blocks are frosted-glass Apple-style UI floating over an aurora
 The four `liquid-glass-*` panel blocks share the aurora-shader stage, so they compose cleanly into one scene; `ios26-liquid-glass` and `macos-tahoe-liquid-glass` are complete device environments and generally stand alone.
-> 8-second 1920x1080 video. Frosted glass notification cards drift in and stack over an aurora shader background, each reading a fake alert ("Build passed", "Deploy live", "0 incidents"). Use the `liquid-glass-notification` registry block. No audio.
+> /motion-graphics 8-second 1920x1080 video. Frosted glass notification cards drift in and stack over an aurora shader background, each reading a fake alert ("Build passed", "Deploy live", "0 incidents"). Use the `liquid-glass-notification` registry block. No audio.
 **"Liquid glass" means the block, not a filter you're describing.** These are complete WebGL stages; asking for "a glassy blur on my div" gets you a CSS `backdrop-filter`, not this look.
 - ❌ `add a liquid glass effect over my text`
@@ -73,7 +73,7 @@ The [Effects](/catalog/components/vignette) components are lightweight, pure-CSS
 These are the ambient layer of the [motion grammar](/prompting/motion): grain and a slow `parallax-zoom` keep a "held" beat alive instead of freezing. Never write "holds motionless" — a still final second is the biggest cheap-motion tell; let a grain overlay and a 2% push carry the hold.
-> 6-second 1920x1080 video. A product logo settles center-frame, then holds — but keep it alive with a film grain overlay and a slow 3% push-in, plus one shimmer sweep across the wordmark at 4s. Use the `grain-overlay`, `parallax-zoom`, and `shimmer-sweep` registry components. No audio.
+> /motion-graphics 6-second 1920x1080 video. A product logo settles center-frame, then holds — but keep it alive with a film grain overlay and a slow 3% push-in, plus one shimmer sweep across the wordmark at 4s. Use the `grain-overlay`, `parallax-zoom`, and `shimmer-sweep` registry components. No audio.
 **Reach for grain over a literal freeze.** The engine holds the final state exactly as written.
 - ❌ `logo appears and holds still to the end`
@@ -101,7 +101,7 @@ The Effects components above have none of this — they're plain CSS and animate
 - [HTML-in-Canvas guide](/guides/html-in-canvas) — how `drawElementImage` works and the flag details.
 <Note>
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Surface region floats its inspector panels on the brand's glass tokens — translucent white over real backdrop blur, the mural visibly smearing through each panel (0:38–0:45 below, cut from the film).
+**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Surface region floats its inspector panels on the brand's glass tokens — translucent white over real backdrop blur, the mural visibly smearing through each panel (cut from the film, below).
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
@@ -14,9 +14,9 @@ Every element is a primitive the agent can build directly. Two honest limits:
 ## The density contract
-A spec tells the builder what each element *is*; a density contract tells it how full every frame must be. The capstone film states it once and every region obeys:
+A spec tells the builder what each element *is*; a density contract tells it how full every frame must be. The [Level 7 film](/prompting/capstone) states it once and every region obeys — this is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys it:
-> Density: every region fills three roles — one focal element at display scale, at least two supporting elements on their own cues, and the chrome/wire. Asymmetric compositions; display type ~a tenth of frame width; three depth layers with parallax between them.
+> Density: every region fills three roles — one focal element at display scale, at least two supporting elements on their own cues, and the chrome/wire. Asymmetric compositions; display type ~a tenth of frame width; three depth layers with parallax between them […]
 That's the whole formula, reusable in any prompt: **one focal + at least two supporting + persistent chrome**, composed asymmetrically (60/40, never one element centered in emptiness), display type around a tenth of the frame width, and at least three depth layers so parallax can sell the space. Supporting elements land on their own cues — a frame that fills all three roles at t=0 is a poster, not a scene. Ask for the contract explicitly when a build keeps coming back sparse: "every scene carries one focal element, two supporting elements on staggered cues, and the persistent chrome" is a sentence a builder can be held to.
@@ -34,5 +34,5 @@ The same density applied to a product-UI piece and a typographic piece — both
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/spec-precision-type.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *Rendered from the spec above, unedited.*
-*Next: [Verified example prompts](/prompting/examples) — the level's gallery: 18 prompts to read with the vocabulary you now have.*
+*Next: [Verified example prompts](/prompting/examples) — the level's gallery, read with the vocabulary you now have.*
@@ -5,7 +5,7 @@ description: "Natural-language adjectives the skills map to specific framework s
 [The dial](/prompting/specification-dial) told you *how much* to specify; this page is the word list for the cheap-precision setting — style tokens that cost you nothing to say and remove real ambiguity. The skills map natural-language adjectives to specific framework settings. Using the right word gets you the right result without specifying technical details.
-### Motion & easing
+## Motion & easing
 Describe how motion should *feel* and the agent picks the matching GSAP ease:
@@ -28,7 +28,7 @@ Each word, rendered — the same move, only the ease changes:
 </tbody></table>
-### Camera language
+## Camera language
 Compositions have no physical camera, but camera words translate directly into scene transforms (or real camera moves in Three.js scenes):
@@ -50,7 +50,7 @@ The same scene under each camera word:
 </tbody></table>
-### Depth language
+## Depth language
 | Say this               | Agent builds                                             |
 | ---------------------- | -------------------------------------------------------- |
@@ -59,7 +59,7 @@ The same scene under each camera word:
 | out-of-focus background | blurred, slower-moving back layer                        |
 | shallow depth of field | sharp subject, blurred everything-else                    |
-### Pacing language
+## Pacing language
 | Say this          | Agent builds                                        |
 | ----------------- | --------------------------------------------------- |
@@ -69,7 +69,9 @@ The same scene under each camera word:
 | breathing room    | a held moment before the next beat starts            |
 | ambient idle      | 1–2% breathing scale + slow drift during holds       |
-### Caption tones
+## Caption tones
 *The full chapter: [Caption styles](/prompting/captions-catalog).*
 Describe the *energy* of your captions and the agent picks matching typography, size, and animation:
@@ -95,7 +97,9 @@ Per-word styling also works:
 "Highlight numbers differently"
 ```
-### Transitions
+## Transitions
 *The full chapter: [Transitions](/prompting/transitions).*
 Every multi-scene composition benefits from transitions. Describe the energy level:
@@ -114,7 +118,9 @@ Or describe by mood:
 "Dramatic zoom for the reveal"
 ```
-### Audio-reactive animation
+## Audio-reactive animation
 *The full chapter: [Media and audio](/prompting/media-and-audio).*
 Map audio frequency bands to visual properties. The agent uses these defaults:
@@ -135,7 +141,7 @@ Map audio frequency bands to visual properties. The agent uses these defaults:
  Keep audio-reactive effects subtle for text (3–6% intensity). Go bigger for backgrounds (10–30%).
 </Tip>
-### Marker highlights
+## Marker highlights
 Hand-drawn emphasis effects for text:
@@ -159,7 +165,7 @@ The five modes on the same sentence:
 <tr><td style={{ padding: "6px", border: "none" }}><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-highlight.mp4" style={{ width: "100%", borderRadius: "0.4rem" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7 }}>highlight</div></td><td style={{ padding: "6px", border: "none" }}><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-circle.mp4" style={{ width: "100%", borderRadius: "0.4rem" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7 }}>circle</div></td><td style={{ padding: "6px", border: "none" }}><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-burst.mp4" style={{ width: "100%", borderRadius: "0.4rem" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7 }}>burst</div></td><td style={{ padding: "6px", border: "none" }}><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-scribble.mp4" style={{ width: "100%", borderRadius: "0.4rem" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7 }}>scribble</div></td><td style={{ padding: "6px", border: "none" }}><video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/marker-sketchout.mp4" style={{ width: "100%", borderRadius: "0.4rem" }}></video><div style={{ fontSize: "0.8em", textAlign: "center", opacity: 0.7 }}>sketchout</div></td></tr>
 </tbody></table>
-### Text-to-speech voices
+## Text-to-speech voices
 TTS runs locally via Kokoro (no API key needed). Describe the content and the agent picks a voice, or request one directly:
@@ -175,7 +181,9 @@ TTS runs locally via Kokoro (no API key needed). Describe the content and the ag
 "Add TTS with British male voice at 1.1x speed"
 ```
-### Rendering quality
+## Rendering quality
 *The full chapter: [Rendering and output](/prompting/rendering-and-output).*
 | Quality    | Use for                  |
 | ---------- | ------------------------ |
@@ -189,15 +197,4 @@ TTS runs locally via Kokoro (no API key needed). Describe the content and the ag
 "Export as transparent WebM"
 ```
 <Note>
 **Capstone thread** — the [Level 7 film](/prompting/capstone)'s Mount region (0:07–0:14) is this page's thesis staged as scenery: the framework's own vocabulary — tracks, clips, `data-*` attributes — becomes the scene itself, because the builder and the viewer share the same words for it.
 </Note>
 This is the clause in the [full capstone prompt](/prompting/capstone#the-full-prompt-verbatim) that buys the piece — prompt language you can lift for your own video:
 > **Mount (7–14s).** Traveling along the wire: it splits into three parallel track lanes; clip chips slide in along the direction of travel and seat onto the lanes on their spoken cues (audio track chip, video track chip, our protagonist chip among them). Small mono labels (`data-start`, `data-track-index`) tag themselves onto chips as the camera passes. The lanes merge back to one wire as the camera accelerates out.
 <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-region-mount.mp4" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
 *That clause, rendered — the region cut from the finished film.*
 *Next: [High-fidelity looks](/prompting/visual-specs) — past single words, into full visual specs that carry an entire look.*