Skip to main content
“The Timeline” — 1920x1080, ~62 seconds, one prompt, one unbroken camera move, unedited. The prompt targeted roughly 60 seconds; the delivered render runs 1:02 because the final lockup holds for a two-second breath. 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, the chart and map in Data and maps, the footage pipeline in Media and audio, the glass and mural in VFX and Generated artwork, the beat grid in Music, the 3D coil in Runtimes and 3D, the continuous camera in Motion, the seeded finale in 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.

​
The cinematography contract

Two earlier builds of this capstone passed every gate and still failed review — first as sparse frames floating in space, then as a well-dressed slideshow: discrete scenes, hard cuts, motion confined inside each frame. What fixed it wasn’t more animation; it was a cinematography contract written into the prompt:
  • One continuous camera, dwell-and-sweep. The whole film is a single wide world the camera dollies across in one unbroken move — but the rhythm matters as much as the continuity: the camera SWEEPS between regions, then eases to a genuine full stop for a couple of seconds while each region’s main point lands (the count completing, the kicker stamping, the spoken keywords), 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; the camera rests, the film never freezes. Scene changes happen by arriving: the next region is already visible at the frame edge before the camera reaches it, and the previous one exits by parallax, not by fade.
  • Persistent elements that tell the story. Three things never leave frame: the wire (a single continuous line that is the timeline itself — it becomes the chart baseline, the map arc, the waveform, the 3D coil), the ruler (a frame-ruler chrome strip whose playhead tracks the film’s real playback time), and the protagonist — the <div class="clip"> typed in the opening, which rides the wire through every region and is the thing that finally renders at the end.
  • Anti-slideshow negatives. No element cluster that fades in centered, sits, and fades out; no region that reads as a static slide the camera happens to pass; no motion that is just idling in place.
Like every rule in this film, it only exists because it was demanded in writing — the linter can verify a timeline, but only the prompt can demand cinematography.

​
The full prompt, verbatim

This is the full prompt, nothing paraphrased or trimmed. Several of its clauses — the chip’s hard bind to the wire’s path geometry, the mural’s pinned/iris-revealed/fade-out behavior, and the Depth region’s 3D contract (the coil winding out of and back onto the wire, the chip passing through the loops and behind the form with true depth occlusion instead of floating over the geometry) — were added after frame review caught the builder drifting on exactly those points, and the film was patched to comply: the same catch-and-tighten loop Iterating teaches, applied to the prompt itself so the next run can’t regress.
/general-video 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.

​
Walking the prompt, chapter by chapter

Every region pins a different technique, and every technique has a chapter: The camera itself is Motion that reads premium’s “camera as actor” rule taken to its logical end — the camera isn’t in the film, it is the film. The persistent wire/ruler/protagonist are Storyboards’ callback device stretched across the whole runtime instead of two frames. And the whole thing is written in High-fidelity looks’ density: exact hexes, exact timings, named eases, quoted copy. One more chapter runs through every pixel: the film’s look isn’t described in the prompt at all — the prompt points at a frame.md brand file (the real HyperFrames design system: near-black ground, greyscale hierarchy, mint as the single go/active accent, ABC Solar Display lockups, TT Norms Pro Mono for machine text, one sanctioned mint→cyan gradient on the CTA) and says obey it exactly. That’s Design systems and brand’s whole thesis — a source of brand truth beats any adjective — demonstrated at film scale.

​
Why one file, still

HyperFrames scopes data-composition-variables per composition file, so the single-file constraint from the earlier capstones carries over — one index.html, one variable scope, which is what lets one --variables flag re-skin the whole journey. The new wrinkle: the world is one wide scene space traversed by a camera transform, while regions stay timed class="clip" sections synchronized to the camera’s arrival — the persistent layers (wire, ruler, chip) are the only elements alive for all 62 seconds, so capture stays efficient without breaking the illusion of one continuous space. See Variables and templating.

​
The re-skin: one flag, the whole journey

The same composition, navy/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 palette-neutral (grayscale) and duotoned live by CSS layers driven by the ground/ink variables, so even the raster re-skins. Keep color in CSS and shapes in the raster whenever a template frame needs to survive a re-skin.

​
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, the Mount paragraph is Prompt anatomy’s framework vocabulary staged as scenery, the chart and map paragraphs are Data and maps, the Material paragraph is Media and audio + Caption styles + Overlays run in sequence, Surface is Transitions + VFX + Generated artwork, Rhythm is Music, Depth is Runtimes and 3D, and the finale is Motion’s rule 8. 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) — 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) — 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) — the VO cues every region’s reveals (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).
That’s the method this guide has been building toward: learn each technique in isolation, 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. A chart, a map, typed markup, processed footage, 3D, glass, a shader seam, a beat grid, seeded confetti: every one traceable to a chapter you’ve already read. The film is what the glue makes of them — and the glue, like everything else here, is just words in the prompt. Next: Rules and anti-patterns — keep this cheat sheet open while you build.