hyperframes/docs/prompting/capstone.mdx

---
title: Capstone — every technique, one journey
description: "One prompt, one unbroken camera move, and every technique in this guide joined into a single 62-second film."
---

<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default-v2.mp4#t=0.1" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
*"The Timeline" — 1920x1080, ~62 seconds, one prompt, one unbroken camera move, unedited.*

One prompt made this. Nothing was cut or stitched together afterward. The prompt asked for about 60 seconds. The render came back at 1:02, because the closing lockup holds for a two-second breath.

If you read this guide in order, you have already seen every part of this film. Each region was pulled out and embedded in the chapter that teaches it. The table further down says which chapter each part came from. This page is where the pieces become one composition.

## The idea

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 the film is true. Real catalog counts. Real cloud regions. Real product surfaces. The footage appears as material the tool is processing, not as a testimonial.

And the film has no scenes. There is one wide world and one camera moving through it. That is the biggest lesson on this page.

## Why the first two builds failed

Two earlier builds of this capstone passed every check and still failed review.

The first looked like sparse frames floating in space. The second was a well-dressed slideshow: separate scenes, hard cuts, motion trapped inside each frame.

{/* VISUAL: three stills side by side — the sparse-frames build, the slideshow build, and the approved continuous-camera build — so the reader can see the difference the contract made. */}

More animation was not the fix. What fixed it was a **cinematography contract** written into the prompt. Three rules:

**One camera, dwell and sweep.** The camera dollies across one wide world in a single unbroken move. The rhythm matters as much as the continuity. The camera sweeps between regions, then eases to a genuine full stop. It rests for a couple of seconds while the region's main point lands: the count completing, the kicker stamping, the spoken keywords. Then it accelerates away. The dwell is what gives the sweep meaning. Without the rest, emphasis dies mid-motion. The world keeps resolving during a dwell, so the camera rests but the film never freezes.

**Regions change by arriving, not cutting.** The next region is already visible at the edge of frame before the camera reaches it. The previous one leaves by parallax, not by fading out.

**No slideshow tells.** Nothing fades in centered, sits, and fades out. No region reads as a static slide the camera happens to pass. No motion that is just idling in place.

Three things also never leave frame. The **wire** is one continuous line, and it is the timeline itself. It becomes the chart baseline, then the map arc, then the waveform, then the 3D coil. The **ruler** is a chrome strip across the top. Its playhead tracks the film's real playback time. The **protagonist** is the `<div class="clip">` typed in the opening. It rides the wire through every region, and it is the thing that finally renders.

None of this happens on its own. The linter can check that a timeline is valid. Only the prompt can ask for cinematography.

## The prompt, word for word

Below is the whole prompt, nothing paraphrased or trimmed. It is long on purpose. This is what a film-scale ask looks like when every clause has a job. It is written at [High-fidelity looks](/prompting/visual-specs)' level of detail: exact hex values, exact timings, named eases, copy quoted word for word.

Three clauses were added after the fact. Frame review caught the builder drifting. So the prompt was tightened and the film was patched to match:

- The chip must bind to the wire's actual path geometry. It cannot just float near the line.
- The mural must stay pinned in place, be revealed by the iris, and exit by fading out.
- In the Depth region the coil must wind out of the wire and back onto it. The chip must pass behind the 3D form with real depth occlusion, not float over it.

That is the same catch-and-tighten loop [Iterating](/prompting/iterating) teaches, applied to the prompt itself so the next run cannot regress.

> /hyperframes Make a ~60-second 1920x1080 promo film for HyperFrames — the open-source framework that turns hand-authored HTML and GSAP animation into deterministic, frame-accurate video. The film's 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 true, nothing invented: real catalog counts, real cloud regions, real product surfaces.
>
> **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 (`--page-bg` `#0a0a0a`), greyscale text hierarchy (`#fafafa` / `#a1a1aa` / `#71717a`), and **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. Typography from the file: **ABC Solar Display 700** for the display lockups ("WRITE HTML." / "WRITE HTML. RENDER VIDEO."), **TT Norms Pro** for everything else, **TT Norms Pro Mono** for all machine-flavored text (code, commands, timecodes, counts, region labels) with `tabular-nums`. Sentence case everywhere except small uppercase letter-spaced eyebrows. Glass surfaces use the file's `--glass-*` tokens with real backdrop blur. Radii, borders, shadows, and easing curves come from the file's tokens (`--ease-out-quint` entrances, `--ease-spring` count-bumps). Font files are provided as woff2 assets — bundle them, don't fetch from the network.
>
> **Cinematography contract (the most important section — this is what the film lives or dies on):**
> - 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 — left to right, with occasional push-ins and one descent — 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 (the hero count completing, the kicker stamping, the spoken caption line, the check completing) — 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.
> - Scene changes happen by ARRIVING, not cutting. The next region is already visible at the edge of frame before the camera reaches it; the previous region exits by parallax, not by fade-out.
> - NO slideshow tells: no element cluster that fades in centered, sits, and fades out; no region that reads as a static slide while the camera happens to pass; no motion that is just shaking or idling in place. Motion = the camera's travel + elements entering along the direction of travel + elements the camera hands off between regions.
> - Three persistent elements thread the ENTIRE film and are never absent:
>   1. **The wire** — a 3px ink-colored horizontal line, the literal timeline. It is the film's spine: every region hangs off it, the camera follows it, and it visibly continues into the next region at all times. It may bend, split into tracks, become a waveform, arc across a map, spiral into 3D — but it is always the same continuous line.
>   2. **The ruler** — a thin frame-ruler chrome strip across the top: tick marks, a running timecode, and a playhead marker that advances in sync with the film's actual playback time (at t=30s the playhead is at 30s). The ruler is the product's own UI language and it never leaves.
>   3. **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. **The chip sits ON the wire at every moment: bind its position to the wire's actual path geometry (sample the drawn path, seek-safe), never keyframe it independently — through every bend, arc, waveform, and dive, the chip visibly hugs the line. A chip floating off-path breaks the story.**
>
> **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.
>
> **Direction (every region obeys it):**
> - Brand restraint per `frame.md`: the world is greyscale-on-near-black; `ground` `#0a0a0a` and mint `ink` `#3CE6AC` are declared as the two composition variables. The wire, the playhead, active chips, and each region's single hero accent are mint; everything else is the greyscale text/border hierarchy. No other hue anywhere — except cyan `#00E3FF`, which exists only inside the one sanctioned mint→cyan gradient on the final CTA.
> - VO-paced reveals: each region's elements land on their spoken cues as the camera arrives; secondary elements keep resolving while the camera is present; the region is complete just as the camera accelerates away.
> - Permanent chrome: the ruler (persistent element 2) plus a faint ink grid at ~8% opacity over the ground, everywhere in the world.
> - 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 (foreground elements slide past faster than the wire plane, backdrop slower — the parallax is what sells the continuous travel).
> - Negative list: no purple-blue AI gradients, no bokeh, no real browser/OS chrome screenshots, no stock photography, no third hue, no unseeded randomness, no static holds mid-film (the only near-still moment is the final lockup breath).
> - SFX from the media pipeline's library on the visual hits: keystrokes at the opening, a soft whoosh at each region handoff, ticks on counters and beat cuts, one riser into the render moment, one stamp on the lockup. All under the VO.
>
> **The journey (regions along the wire, ~timings; the camera flows through these, they are NOT cuts):**
>
> **Type (0–7s).** Black-on-charcoal close-up: a cursor types real HyperFrames markup character by character — `<div class="clip" data-start="0" data-duration="4">` and a `gsap.timeline({ paused: true })` line. As the typed line completes, the text's baseline extends and becomes **the wire** — the underline literally grows into the timeline and the camera begins its dolly along it. The typed div folds into a compact clip chip (persistent element 3) that drops onto the wire. Kinetic display type states "WRITE HTML." as the travel begins.
>
> **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.
>
> **Measure (14–21s).** The wire becomes a chart baseline (same line, same thickness — no cut): adapt the **`data-chart` registry block** — six labeled bars rise from the wire itself on spoken cues while a hero numeral counts up beside them in huge tabular mono: **50+ CATALOG BLOCKS** (the real registry count; supporting chips: 19 AGENT SKILLS · 7 RUNTIME ADAPTERS — also real). The bars recede by parallax as the camera moves on; the tallest bar's top edge hands off into the next region's horizon.
>
> **Everywhere (21–28s).** The wire arcs and the ground falls away: adapt the **`world-map` registry block** — the dotted world map scrolls beneath while the wire becomes a great-circle route arcing across it. Real render infrastructure, truthfully labeled: pulses light up at AWS and Google Cloud regions (US-EAST-1 · EU-WEST-1 · AP-SOUTH-1) with a "CLOUD RENDER · LAMBDA + CLOUD RUN" kicker — HyperFrames' actual deploy targets. The map fades away as the wire descends into the next region — the pulses hold their size until the fade; nothing on the map ever shrinks.
>
> **Material (28–39s).** The wire threads into a working canvas where footage is the material on the timeline: a real talking-head clip (generate a short clip of a person speaking one neutral line via the media pipeline's avatar video generation — it is material being processed, not a testimonial; **transcode it to HEVC `hvc1`** so the automatic proxy subsystem carries preview) sits as a clip on the wire. The order of operations IS the story: 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. THEN they speak, and 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); style the keyword type by adapting a bold **catalog caption component** (`caption-kinetic-slam` or similar) at display scale. A designed lower-third chip renders behind the subject. The clip's own audio ducks the BGM briefly; the VO resumes as the camera pulls away and the worked footage recedes by parallax.
>
> **Surface (39–45s).** SANCTIONED SEAM #1: the camera pushes through an **`sdf-iris` shader transition** — the iris opens ONTO the continuation of the same wire (the wire is visible through the iris throughout; this is a lens the journey passes through, not a cut). Inside: frosted-glass inspector panels (real translucency — blur over what's behind; the product's Studio design language) hover above the wire carrying live values (`ease: power3.out`, a color token, an fps readout), over a **generated-artwork backdrop** — a flat abstract mural evoking motion trails, generated **palette-neutral (grayscale) and duotoned live by CSS** from the two variables so it re-skins with everything else. **The mural is a full-frame, screen-fixed backdrop: it never moves on screen — the widening iris circle alone reveals it already in place at full frame, it holds dead still while the wire, glass, and chip travel in front of it, and it exits by fading out. It must never slide, and the iris lens itself must render only its glowing ring — fully transparent outside the circle, no visible container.** Drifting `data-*` tags ride between mural and glass, clear of all text.
>
> **Rhythm (45–52s).** The wire becomes a waveform: **resolve the BGM first, run `hyperframes beats` on it, and drive this region on the detected grid** — the waveform pulses and compact media cards (a lyric line, a photo card, a chart flash) snap onto the wire on real analyzed beats while the camera keeps traveling; each snap gets a tick SFX. At least six beat-hits. SANCTIONED SEAM #2: the beat-hits may hard-cut card content ON the beat — the sanctioned exception, because the camera itself never stops moving through them.
>
> **Depth (52–56s).** The wire spirals off the flat plane into real 3D — a **Three.js scene via the frame adapter** (never CSS fake-3D): the camera descends following the wire as it coils around a rim-lit faceted form (ink material on charcoal), mono axis readouts landing on cue, then rises back to the plane with the wire leading the way out. The coil winds up out of the wire and collapses back onto it — its ends never float cut off in mid-air — and the protagonist chip joins the 3D scene for the crossing: it rides the wire straight through the coil's loops and passes behind the form with true depth occlusion, never floating over the geometry as a flat overlay.
>
> **Render (56–60s).** The wire's end plugs into a render chip; the protagonist clip card from the opening arrives (callback — same chip, having traveled the whole film) and snaps into it. 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. "WRITE HTML. RENDER VIDEO." locks up with the install line `npx skills add heygen-com/hyperframes`. The camera finally eases to rest — the film's only true stillness, one breath before the end.
>
> **Copy, quoted exactly:** opening "WRITE HTML." · stats "50+ CATALOG BLOCKS", "19 AGENT SKILLS", "7 RUNTIME ADAPTERS" · map kicker "CLOUD RENDER · LAMBDA + CLOUD RUN" · closing "WRITE HTML. RENDER VIDEO." + `npx skills add heygen-com/hyperframes`. The Material region's spoken line and typed code are yours to make real and legible — no lorem ipsum, no invented product claims anywhere.
>
> **Technique, pinned:** continuous world-camera via GSAP transforms (the dolly is the film); parallax layers in every region; `data-chart`, `world-map`, `sdf-iris`, and a caption component adapted from the registry; per-character typing at the open; matched-motion handoffs at every region boundary (the wire IS the match); full footage pipeline (generated clip → HEVC → auto-proxy → background removal → lower-third → word-synced captions); real beat grid from `hyperframes beats`; real Three.js via the frame adapter; seeded two-frame-hold confetti; SFX on hits; VO-paced reveals throughout.
>
> **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"}`.
>
> **Architecture constraint (technical):** single composition file — one `index.html`, one variable scope. The world is one wide scene space traversed by a camera transform; regions may still be timed `class="clip"` sections synchronized to the camera's arrival (so capture stays efficient), but their positions form one continuous world and the wire + ruler + protagonist chip layers persist across 100% of the film. No `data-composition-src` sub-files.
>
> **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.

## Which chapter taught which region

| 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 | [Prompt anatomy](/prompting/anatomy) |
| Measure (0:14–0:21) | The `data-chart` block. The wire as a chart baseline, by matched motion. | [Data and maps](/prompting/data-and-maps), [Transitions](/prompting/transitions) |
| Everywhere (0:21–0:28) | The `world-map` block. Real Lambda and Cloud Run regions. | [Data and maps](/prompting/data-and-maps), [Rendering and output](/prompting/rendering-and-output) |
| Material (0:28–0:39) | The footage pipeline, in order. Generated clip, HEVC proxy, background removed *before* the speech, the speaker's own keywords slamming in behind the cutout, 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) |
| Surface (0:39–0:45) | The `sdf-iris` shader lens, frosted glass, a palette-neutral generated mural. | [Transitions](/prompting/transitions), [VFX and liquid glass](/prompting/vfx-and-liquid-glass), [When to generate artwork](/prompting/generated-artwork) |
| Rhythm (0:45–0:52) | Cuts on a real analyzed beat grid from `hyperframes beats`. | [Music videos and slideshows](/prompting/music-and-slideshows) |
| Depth (0:52–0:56) | Real Three.js via the frame adapter. The wire as a 3D coil, with the chip threading the loops and passing behind the form. | [Runtimes and 3D](/prompting/runtimes-and-3d) |
| Render (0:56–1:02) | Seeded confetti, two-frame holds. Determinism as the punchline. | [Motion that reads premium](/prompting/motion) (rule 8) |

Three more chapters run through the whole film instead of one region.

The camera is [Motion that reads premium](/prompting/motion)'s "camera as actor" rule taken to its limit. The camera is not in the film. It is the film.

The wire, the ruler, and the chip are [Storyboards](/prompting/storyboards)' callback device stretched across the full runtime instead of across two frames.

And the look is never described in the prompt at all. The prompt points at a `frame.md` brand file and says obey it exactly. That file holds the real HyperFrames design system. Near-black ground, greyscale text hierarchy, mint as the single go/active accent. ABC Solar Display for the lockups, TT Norms Pro Mono for machine text. One sanctioned mint-to-cyan gradient, on the closing CTA and nowhere else. A source of brand truth beats any adjective. That is [Design systems and brand](/prompting/design-systems)' whole thesis, shown at film scale.

### Why it is one file

HyperFrames reads `data-composition-variables` per composition file. One file means one variable scope, and one variable scope is what lets a single `--variables` flag re-skin the whole journey. So the single-file rule from the earlier capstones still applies here: one `index.html`.

The new wrinkle is the world. It is one wide scene space that a camera transform travels across. The regions are still timed `class="clip"` sections, synced to the moment the camera arrives, and the framework shows and hides each one by its own time window. Only the wire, the ruler, and the chip are alive for all 62 seconds. See [Variables and templating](/prompting/variables-and-templating).

## Change two colors, re-skin the film

```bash
hyperframes render --variables '{"ground":"#0d1420","ink":"#c8ff3d"}' --strict-variables
```

<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-reskin-v2.mp4#t=0.1" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
*The same composition, navy and acid green — the wire, ruler, chart, map, glass, and even the generated mural all follow the override.*

The mural trick from the previous capstone carries over. The artwork is generated in grayscale, then duotoned live by CSS layers driven by the `ground` and `ink` variables. Even the raster re-skins. Keep color in CSS and shapes in the raster whenever a template frame needs to survive a re-skin.

## What the prompt actually adds

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. None of those clauses is new. They are the chapters, restated as requirements.

What is new is the connective tissue, and that is where most of the prompt's words go.

- **The cinematography contract** fuses nine demos into one space. Remove it and you get a playlist of chapter examples. Keep it and 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, and 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.** Nine techniques drawn from a dozen chapters land looking like one designer made them.
- **One variable scope re-skins all of it.** The chart, the map, the glass, the mural, and the confetti all answer to the same two variables.
- **One soundtrack paces all of it** ([Media and audio](/prompting/media-and-audio)). The narration cues every region's reveals. The same BGM that beds the narration feeds the Rhythm region's beat analysis. 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.

That is the method this guide has been building toward. Learn each technique on its own. Then write the prompt whose job is not to invent the pieces but to bind them: shared space, shared spine, shared brand, shared variables, shared clock.

*Next: [Rules and anti-patterns](/prompting/rules-and-anti-patterns) — keep this cheat sheet open while you build.*

## Related topics

- [Fix a render that came back wrong](/prompting/iterating)
- [Rules and anti-patterns](/prompting/rules-and-anti-patterns)
- [Motion that reads premium](/prompting/motion)
- [Design systems and brand](/prompting/design-systems)
- [Variables and templating](/prompting/variables-and-templating)