ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-05 00:56:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(prompting): add by-video-type and by-feature prompt guide pages

Browse Source 
Adds 18 pages completing the Prompt Guide expansion (phases 2-4): six
video-type pages seeded by the verified example prompts, and twelve
feature pages giving prompting guidance for surfaces the docs implied
but never covered (transitions, caption styles, overlays, code blocks,
data/maps, VFX, rendering/output, editing existing videos, media/audio,
variables, runtimes/3D, design systems). All block/component/skill names
grounded against the catalog and skills; render pairing deferred.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-07-09 22:21:11 -07:00
co-authored by Claude Fable 5
parent 383dd35685
commit 816f580f2d
19 changed files with 1619 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/docs.json
+28
View File
@@ -94,6 +94,34 @@
"prompting/generated-artwork", "prompting/generated-artwork",
"prompting/recreating-references" "prompting/recreating-references"
] ]
},
{
"group": "By video type",
"pages": [
"prompting/product-launch",
"prompting/explainers",
"prompting/code-and-prs",
"prompting/music-and-slideshows",
"prompting/captions-and-talking-heads",
"prompting/motion-graphics"
]
},
{
"group": "By feature",
"pages": [
"prompting/transitions",
"prompting/captions-catalog",
"prompting/overlays-and-lower-thirds",
"prompting/code-blocks",
"prompting/data-and-maps",
"prompting/vfx-and-liquid-glass",
"prompting/rendering-and-output",
"prompting/editing-existing-videos",
"prompting/media-and-audio",
"prompting/variables-and-templating",
"prompting/runtimes-and-3d",
"prompting/design-systems"
]
} }
] ]
}, },
docs/prompting/captions-and-talking-heads.mdx
+84
View File
@@ -0,0 +1,84 @@
---
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."
---
## Two things you can add to a talking head
Both workflows take an existing talking-head / interview / podcast clip and add a layer on top. Neither edits the footage — no trims, no recolor, no reframe, no reorder. The clip plays untouched underneath; you're choosing what rides on top of it.
| You want | Route | What it adds |
| --- | --- | --- |
| The spoken words as readable text | `/embedded-captions` | Captions / subtitles — a rail, with earned climax embeds |
| Designed on-screen graphics synced to the talk | `/talking-head-recut` | Overlay cards — titles, lower-thirds, data callouts, quotes, PiP |
If the words themselves need to read, you want captions. If you want a produced look — kinetic titles, a stat callout, a pull-quote card, the speaker shrunk into a corner while a chart fills the frame — you want overlay cards. When it's genuinely both, caption first, then package; they're siblings, not substitutes.
`/embedded-captions` runs locally end to end — it transcribes and mattes the subject itself, no API key — and needs a **single-subject clip**. Multi-speaker clips or hard cuts get split per shot or refused, because the matte is one person.
## Base prompt — captions
Captions route by **identity**, not by mode. You pick one look from the catalog; the engine behind it is a lookup detail you never have to name. The default is a clean verbatim rail — `anchor` — with the occasional peak word composited behind the subject.
> /embedded-captions Add captions to ./interview.mp4. Use the `anchor` identity — clean verbatim rail carrying the spoken words, readable lower-third. Promote just the two hardest-hitting lines to an embed behind the speaker; highlight the key word in each rail line. 9:16. Footage stays untouched.
The rail carries most of the text; an **embed** is the scarce, earned peak — one big word matted behind the subject at the climax, never every line. Embedding the whole transcript is the most common mistake this skill guards against.
## Base prompt — overlay cards
> /talking-head-recut Package ./founder-clip.mp4 with designed graphic overlay cards synced to the transcript. 9:16 portrait, warm-paper style. Open with a fullscreen kicker + title hook, drop a lower-third when she names the company, a data callout card counting up the "200+ teams / $1.2M ARR" stat, and a pull-quote card for the strongest line. Speaker stays full-bleed under the cards; shrink her into a corner PiP while the data card holds. The clip plays untouched underneath.
You describe the *cards* — their content, timing, and how the speaker shares the canvas with them (full-bleed, split, PiP, or glass overlay). The skill designs and writes each card; there's no fixed archetype list, so the overlays follow what the transcript actually says.
## Variants
<AccordionGroup>
<Accordion title="Cinematic caption embed (mood over verbatim)">
> /embedded-captions Cinematic captions on ./poem.mp4 — no rail, hero typography composited behind the speaker, words accumulating as a column. Use the `editorial` identity (lowercase-italic hero). One apex word per thought, air between them. 4:5. Never grade the footage.
Column-flow identities drop the rail and make everything embed-style — reach for them on poetic / social / "cinematic" asks where mood beats strict readability, never on an explainer where the words must read.
</Accordion>
<Accordion title="Bright-scene captions">
> /embedded-captions Add verbatim captions to ./outdoor-vlog.mp4. It's a bright daylight scene, so use the `ink` identity — near-black type printed onto the surface — not a light-on-bright look that washes out. Keep it a readable rail. 16:9.
Screen-blend cream looks wash out over bright backdrops (luminance > ~180); `ink` is built for bright surfaces. Match the identity to the scene rather than asking the engine to recolor a look.
</Accordion>
<Accordion title="VFX-grade themed captions">
> /embedded-captions Bring the energy on ./hype-clip.mp4 — I want the captions to hit hard. Use the `stomp` identity: heavy themed constitution, punch reactions on the climax. Rail carries the verbatim; the payoff line is the setpiece. 9:16.
Themed identities (`ordnance`, `terminal`, `stomp`, `neonsign`, `stardust`, …) are the answer to "make it explode / 特效 / like AE did it". Theme mode is the one place a register-gated reaction beat may touch the frame — applied after the matte composite so subject, text, and plate move as one — but the a-roll is still never graded.
</Accordion>
<Accordion title="Landscape data recut">
> /talking-head-recut Recut ./analyst-interview.mp4 as a 16:9 explainer with a clinical style. Split layout: speaker on the right, data cards on the left. Cards for each claim — a count-up for the headline number, a swiss-grid comparison for the two options, a terminal-style callout for the technical bit. Auto-pace the card count for a 5-minute clip. Footage untouched.
Layout (split / stack / pip / overlay) sets how speaker and cards share the canvas; card count auto-infers from duration and information density, with a floor of five so even a short clip has rhythm.
</Accordion>
</AccordionGroup>
## The knobs that matter
**Identity and tone (captions).** One identity picks the entire look — surface, palette, motion, climax behavior. Route by content: explainer / interview / must-read words → a rail-carrying identity like `anchor`, `keynote`, or `documentary`; poetic / social / cinematic → a column-flow identity by register (`editorial`, `cream`, `loud`, `neon`); "炸 / 特效 / VFX" → a themed identity (`ordnance`, `terminal`, `stomp`). Unsure → `anchor`: the words read and the scene stays safe. Don't ask for "Standard vs Cinematic vs Theme" — those are engine names; name the identity.
**Verbatim rail vs climax embed.** The rail is the default and carries most of the text. An embed is a promotion — one peak word matted behind the subject, scarce and spaced (roughly one per beat, never two co-visible, at most one apex). Tell the skill *which* lines earn the embed; leave the rest on the rail.
**Style, layout, and canvas (recut).** Pick a style group (warm-paper / clinical / experimental), a layout (split / stack / pip / overlay), and a canvas ratio; the video frame follows from layout × style. The recommended ratio matches the source, but you choose — 16:9 for desktop / YouTube, 9:16 for Reels / Shorts, 4:5 for feed.
**Keyword highlighting.** On the caption rail, a punch word can carry an inline `emphasis` — an accent-color or active-word pop — without leaving the rail. Ask for "highlight the key word in each line" and it stays readable.
## Failure modes
**Asking for footage edits.** Both skills add a layer and leave the a-roll exactly as shot. Trimming, speeding up, recoloring, reframing, or reordering is NLE editing and out of scope — captions and cards are the only additions.
- ❌ `add captions and trim the dead air at the start, and warm up the color to match my brand`
- ✅ `add captions; leave the footage untouched` — do the trim / grade in an editor first, then bring the finished clip here.
**Embedding every word.** On a talking head the rail is the verbatim default; matting every caption behind the subject buries the words and spends the climax on nothing.
- ❌ `composite every caption behind the speaker for a cinematic look` (on an explainer)
- ✅ `verbatim rail; promote only the two payoff lines to an embed`
**Multi-subject clips.** The caption matte is one person; two speakers or hard cuts flicker or get refused.
- ❌ `caption this two-person podcast in one pass`
- ✅ `split the clip per shot / per speaker first, then caption each` — or use a single-subject cut.
<Tip>
For the beat-timestamped skeleton these prompts share, see [Prompt anatomy](/prompting/anatomy); for adjectives that map to motion and emphasis settings, [Vocabulary](/prompting/vocabulary). To build a video from scratch instead of dressing existing footage, start at the router in `/hyperframes`.
</Tip>
docs/prompting/captions-catalog.mdx
+75
View File
@@ -0,0 +1,75 @@
---
title: Caption styles
description: "Map caption tone to named caption components, and prompt per-word emphasis for composed videos."
---
## What caption styles do and when they trigger
Caption components are drop-in snippets that render animated on-screen text — one visual identity per component, animating per word or per line. Prompts trigger this layer when you ask for captions, subtitles, kinetic text, lyric-style words, or word-by-word titles inside a composition you're building. Describe the *energy* of the captions and the agent picks matching typography, size, and animation; name a component to lock the look.
<Note>
These components are for **composed videos** — captions you author into a HyperFrames composition. To add captions to an existing **talking-head MP4**, use the [`/embedded-captions`](/prompting/captions-and-talking-heads) workflow instead: it carries its own catalog of caption identities built around subject matting and occlusion (the caption sits *behind* the speaker), which the composition snippets below don't do.
</Note>
## Tone → caption component
| Tone | Components |
| ---- | ---------- |
| **Hype / high-energy social** | [`caption-kinetic-slam`](/catalog/components/caption-kinetic-slam), [`caption-highlight`](/catalog/components/caption-highlight), [`caption-particle-burst`](/catalog/components/caption-particle-burst), [`caption-emoji-pop`](/catalog/components/caption-emoji-pop) |
| **Clean / corporate** | [`caption-clip-wipe`](/catalog/components/caption-clip-wipe), [`caption-weight-shift`](/catalog/components/caption-weight-shift) |
| **Elegant / editorial** | [`caption-editorial-emphasis`](/catalog/components/caption-editorial-emphasis), [`caption-gradient-fill`](/catalog/components/caption-gradient-fill), [`caption-weight-shift`](/catalog/components/caption-weight-shift) |
| **Neon / nightlife / music** | [`caption-neon-glow`](/catalog/components/caption-neon-glow), [`caption-neon-accent`](/catalog/components/caption-neon-accent) |
| **Tech / cyber / glitch** | [`caption-glitch-rgb`](/catalog/components/caption-glitch-rgb), [`caption-matrix-decode`](/catalog/components/caption-matrix-decode) |
| **Karaoke / lyric / follow-along** | [`caption-pill-karaoke`](/catalog/components/caption-pill-karaoke), [`caption-highlight`](/catalog/components/caption-highlight) |
| **Textured / cinematic display type** | [`caption-texture`](/catalog/components/caption-texture), [`texture-mask-text`](/catalog/components/texture-mask-text) |
| **Depth / 3D layering** | [`caption-parallax-layers`](/catalog/components/caption-parallax-layers) |
## Text-effect components
Three [Text Effects](/catalog/components/morph-text) components do one focused job rather than caption a whole track:
| Component | Use when |
| --------- | -------- |
| [`caption-blend-difference`](/catalog/components/caption-blend-difference) | Text sits over busy or shifting footage and must stay legible — it auto-inverts per pixel against whatever is behind it. |
| [`morph-text`](/catalog/components/morph-text) | You want one spot to cycle through a short word list with a gooey morph ("fast / simple / yours"). |
| [`texture-mask-text`](/catalog/components/texture-mask-text) | A large display word filled with a physical texture (brick, rock, wood, metal, lava). |
## Example prompts
> /faceless-explainer 30-second vertical explainer. Add [`caption-highlight`](/catalog/components/caption-highlight) captions, TikTok-style — one word active at a time.
> Hype captions with [`caption-kinetic-slam`](/catalog/components/caption-kinetic-slam): one full-screen word per beat, alternating slam-in direction.
> Neon music-video captions using [`caption-neon-glow`](/catalog/components/caption-neon-glow). Make brand names larger with an accent color and highlight the numbers differently.
> Fill the hero word "STONE" with [`texture-mask-text`](/catalog/components/texture-mask-text) using the rock texture.
## Knobs
- **Tone** picks typography, size, and animation — Hype (heavy, 72–96px, scale-pop) through Storytelling (serif, 44–56px, slow fade). See the caption-tone table in [vocabulary](/prompting/vocabulary).
- **Per-word emphasis.** "Make brand names larger with accent color," "highlight numbers differently," "add bounce to emotional keywords" all work — several components key off this: [`caption-editorial-emphasis`](/catalog/components/caption-editorial-emphasis) drives a dramatic size contrast on emphasis words, [`caption-particle-burst`](/catalog/components/caption-particle-burst) fires on keywords, and the neon components carry keyword accent colors.
- **Texture variable.** [`caption-texture`](/catalog/components/caption-texture) ships lava, marble, metal, wood, concrete, and rock — name the one you want.
- **Word list.** [`morph-text`](/catalog/components/morph-text) cycles an editable list; quote the words in order.
- **Format.** Full-screen single-word styles ([`caption-kinetic-slam`](/catalog/components/caption-kinetic-slam)) and TikTok-style highlights ([`caption-highlight`](/catalog/components/caption-highlight)) are built for vertical / social framing — say "vertical" or "9:16" so sizing and safe areas match.
## Failure modes
**Don't stack a heavy effect on every word.** Caption components already animate per word; layering another emphasis on top of that competes and turns illegible. Emphasize only the keywords.
- ❌ `make every word explode with particles`
- ✅ `caption-particle-burst, firing only on the keywords`
**Don't mix caption styles in one section.** One identity per composition (or per section) reads as designed; two competing styles read as a mistake.
- ❌ `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.
- ❌ `/hyperframes add caption-highlight to my interview.mp4`
- ✅ `/embedded-captions` (see [captions and talking heads](/prompting/captions-and-talking-heads))
**Don't match a hype style to calm content.** A high-energy caption on a corporate explainer fights the tone; let the tone table pick the identity.
- ❌ `glitchy RGB captions` (on a wellness brand piece)
- ✅ `clean captions with caption-clip-wipe`
**Don't invent caption names.** Only the components in the [Captions](/catalog/components/caption-highlight) and [Text Effects](/catalog/components/morph-text) groups exist.
- ❌ `add typewriter-bounce captions`
- ✅ describe the tone ("tutorial, monospace, typewriter") or name a real component
docs/prompting/code-and-prs.mdx
+71
View File
@@ -0,0 +1,71 @@
---
title: Code changes and PRs
description: "What to say to turn a GitHub pull request into a code-change explainer - changelog, feature reveal, fix, or refactor walkthrough."
---
## What this makes
A code-change explainer built from a GitHub pull request. The [`/pr-to-video`](/prompting/overview) workflow reads the PR through `gh` — the diff, commits, files, and contributors — reshapes it into a story, and builds it frame by frame, rendering code beats on a purpose-built diff surface.
The input is a **code change**, not a website or a product page. A PR link (`https://github.com/owner/repo/pull/N`), an `owner/repo#N` ref, or "this PR" in a checked-out repo all work. A product to sell → [`/product-launch-video`](/prompting/product-launch); a topic with no PR → [`/faceless-explainer`](/prompting/explainers). Unsure → start at `/hyperframes`.
## Base prompt
Verified, from the [examples](/prompting/examples) page — a 30-second feature reveal:
> /pr-to-video Make a 30-second 1920x1080 feature-reveal video from [PR URL]. Lead with what users get, not the diff; show the key code change with the `code-diff` block for one beat only; end on version number + repo URL. No narration, kinetic captions instead.
## Variants
<AccordionGroup>
<Accordion title="Changelog roundup">
> /pr-to-video Make a ~40-second 1920x1080 changelog video from [PR URL]. Changelog angle: open with the release line, then one beat per notable change — a short label and a one-line "what it does" each. Show at most two `code-diff` hunks across the whole video. End on version + repo URL. Calm male TTS narration.
A changelog trades depth for breadth — many small changes, each a beat, rather than one change explored deeply. Keep code beats sparse so the pace stays fast.
</Accordion>
<Accordion title="Fix explainer">
> /pr-to-video Make a ~40-second 1920x1080 fix-explainer from [PR URL], for developers. Fix angle: state the bug's symptom first, then the root cause, then the one-line fix on the `code-diff` block. End on version + repo URL. No narration, kinetic captions.
A fix reads as symptom → cause → fix. Lead with what users saw break, not the stack trace — the diff is the payoff, not the opening.
</Accordion>
<Accordion title="Refactor walkthrough">
> /pr-to-video Make a ~70-second 1920x1080 refactor-walkthrough from [PR URL], for developers. Refactor angle: why the old shape hurt, then the new shape, showing the before/after with the `code-morph` block for the key file. End on version + repo URL. Calm male TTS narration.
A refactor changes shape without changing behavior, so the story is *why* the new structure is better. `code-morph` animates one form transforming into another — the right block when the point is the transition, not a line-by-line delta.
</Accordion>
</AccordionGroup>
## The knobs that matter
| Knob | What to say | Why it matters |
| --- | --- | --- |
| **Impact vs diff** | "lead with what users get, not the diff" | The video explains the *change*, it doesn't read the diff aloud; opening on impact answers "why should I care?" before the code |
| **How many hunks** | "one `code-diff` beat only" / "at most two hunks" | Code beats feature 2-4 real hunks total, each a small legible snippet — a whole file is unreadable at video scale |
| **Which code block** | `code-diff` for a delta · `code-morph` for a refactor · `code-typing` for new code | The block matches the story: a diff shows added/removed lines, a morph shows one shape becoming another |
| **Angle** | "changelog" / "feature-reveal" / "fix-explainer" / "refactor-walkthrough" | Sets the story shape; the workflow reshapes the PR into it rather than walking files in diff order |
| **Audience** | "for developers" (default) / "mixed technical" / "non-technical stakeholders" | Shifts how much the narration assumes — a non-technical cut leans harder on impact and lighter on code |
| **End card** | "end on version number + repo URL" | The conventional close for a code explainer; state what goes on it so it's a real CTA, not an afterthought |
| **Narration vs captions** | "calm male narration" or "no narration, kinetic captions instead" | Both are supported; captions-only keeps it silent-friendly for social, narration carries a longer walkthrough |
| **Length** | "~30s" for one headline, up to ~3 min for a large PR | The workflow reads the change size and recommends a tier — a huge PR is a ceiling on story, not a floor to fill |
<Tip>
The style is fixed to the workflow's warm-editorial preset with a navy code surface built for diffs — it's what makes the code beats legible. You don't choose a theme here; you choose the angle, the hunks, and the narration.
</Tip>
## 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)).
- ❌ `/pr-to-video ... dark theme, neon accents`
- ✅ let the preset carry the look; spend your specificity on the angle and the code beats
**Asking for the whole diff.** A PR video explains the change; it doesn't recite every file. A full diff is unreadable at video scale.
- ❌ `walk through the entire diff, file by file`
- ✅ `feature the 2-3 key hunks, each a small legible snippet`
**Opening on the code.** The diff is the payoff, not the hook — lead with what the change means.
- ❌ `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.
- ❌ `a 40-second narrated walkthrough`
- ✅ `a ~40-second narrated walkthrough`
docs/prompting/code-blocks.mdx
+125
View File
@@ -0,0 +1,125 @@
---
title: Code animations
description: "Prompt code walkthroughs — typing, diffing, highlighting, scrolling — and pick a terminal or editor theme by name."
---
## Code animations
Code is the one subject where the framework does the hard part for you. The [Code Animations](/catalog/blocks/code-typing) blocks handle syntax highlighting, caret tracking, diff coloring, and camera moves deterministically — you describe the *walkthrough*, name the block, and paste your snippet. This page is the vocabulary for doing that well; for turning a real pull request into a code-change video, see [Code and PRs](/prompting/code-and-prs).
Everything here follows the [one-shot skeleton](/prompting/anatomy): route, spec, beats, copy, technique, negatives. The "technique" slot is where you name the block, and the "copy" slot is where your code goes — quoted exactly, because unquoted code gets paraphrased into something that won't compile.
### Pick the motion by what the viewer should learn
Each Code Animations block answers a different "what is the viewer supposed to notice." Map the intent to the block:
| You want to show… | Name this block | Length |
| ------------------------------------------ | ------------------------------------------------------- | ------ |
| Code being written, character by character | [`code-typing`](/catalog/blocks/code-typing) | 5s |
| An edit — before → after, red/green | [`code-diff`](/catalog/blocks/code-diff) | 6s |
| One line as *the* line, everything else dim | [`code-highlight`](/catalog/blocks/code-highlight) | 5s |
| Walking a long file to a spot deep inside | [`code-scroll`](/catalog/blocks/code-scroll) | 6s |
| One snippet transforming into another | [`code-morph`](/catalog/blocks/code-morph) | 7s |
| Snippets flying in and stacking up | [`code-snippet-flight`](/catalog/blocks/code-snippet-flight) | 6s |
| Code on a rotating 3D slab (title-card feel) | [`code-3d-extrude`](/catalog/blocks/code-3d-extrude) | 8s |
| 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.
<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*.
</Tip>
### Prompting a typing reveal
`code-typing` streams tokens with a caret that tracks the frontier — no CSS animation, so it seeks cleanly. Give it the exact code and a pace.
> /motion-graphics 6-second 1920x1080 video. A dark editor types this snippet, token by token, caret tracking the frontier, then holds on the blinking cursor for the final second:
> ```
> export async function render(comp: Composition) {
> await comp.seek(0);
> return comp.capture();
> }
> ```
> Use the `code-typing` registry block. No narration, no image or media files.
**Quote the code as a literal block.** Prose descriptions of code get paraphrased.
- ❌ `type out a function that seeks to zero and captures`
- ✅ paste the actual snippet in a fenced block — it renders verbatim
**Give the caret somewhere to rest.** Compositions hold their final state, so if you don't ask for a hold the last frame is a frozen full snippet — the [dead-motion tell](/prompting/motion).
- ❌ `types the code and ends`
- ✅ `types the code, then holds on the blinking cursor for the final second`
### Prompting a diff or a highlight
For "here's what changed," hand `code-diff` the before and after and let it color the delta. For "look at *this* line," give `code-highlight` the full context and name the target line.
> /motion-graphics 6-second 1920x1080 video. Show this edit as a colored diff — the removed line collapses in red, the added line expands in green:
> removed: `const res = await fetch(url)`
> added: `const res = await fetch(url, { signal })`
> Use the `code-diff` 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. Use the `code-highlight` registry block. No audio.
**Name the target line unambiguously.** The block dims context around one line — tell it which.
- ❌ `highlight the important line`
- ✅ `highlight line 7 (`timeout: 30_000`)`
### Prompting a scroll-through
`code-scroll` moves the camera down a long file to bring a target line to center and spotlights it — the block for walking real modules, not toy snippets.
> /motion-graphics 6-second 1920x1080 video. Scroll a ~60-line source file so line 44 (`return dedupeFrames(frames)`) arrives at center and gets spotlighted; ease the scroll and let it settle without snapping. Use the `code-scroll` registry block. No audio.
**Ask the scroll to ease and settle, not snap.** A linear scroll that stops dead reads mechanical.
- ❌ `scroll straight to the line`
- ✅ `ease the scroll and let it settle` — pair with the [motion grammar](/prompting/motion)
### Choosing a theme by name
The [Code Snippets](/catalog/blocks/code-snippet-monokai) blocks are pre-styled shells with per-character typing already built in. There are two families, and you select one by asking for it in plain language — the exact block name is the theme name.
**macOS Terminal.app profiles** — a real terminal window chrome. Say "apple terminal, ocean profile" → [`code-snippet-apple-terminal-ocean`](/catalog/blocks/code-snippet-apple-terminal-ocean). The full set of profiles:
| Profile | Block | Profile | Block |
| ------------ | ----------------------------------------- | -------------- | ------------------------------------------- |
| Basic | `code-snippet-apple-terminal-basic` | Novel | `code-snippet-apple-terminal-novel` |
| Clear Dark | `code-snippet-apple-terminal-clear-dark` | Ocean | `code-snippet-apple-terminal-ocean` |
| Clear Light | `code-snippet-apple-terminal-clear-light` | Pro | `code-snippet-apple-terminal-pro` |
| Grass | `code-snippet-apple-terminal-grass` | Red Sands | `code-snippet-apple-terminal-red-sands` |
| Homebrew | `code-snippet-apple-terminal-homebrew` | Silver Aerogel | `code-snippet-apple-terminal-silver-aerogel`|
| Man Page | `code-snippet-apple-terminal-man-page` | Solid Colors | `code-snippet-apple-terminal-solid-colors` |
**VS Code workbench themes** — full editor chrome (activity bar, sidebar, tabs, terminal, status bar). Say "monokai" or "visual studio dark":
| Say this | Block | Say this | Block |
| ---------------------- | ------------------------------------- | ------------------- | ---------------------------------- |
| Monokai | `code-snippet-monokai` | Solarized Light | `code-snippet-solarized-light` |
| Dark Modern | `code-snippet-dark-modern` | Light Modern | `code-snippet-light-modern` |
| Dark Plus | `code-snippet-dark-plus` | Light Plus | `code-snippet-light-plus` |
| Dark 2026 | `code-snippet-dark-2026` | Light 2026 | `code-snippet-light-2026` |
| High Contrast | `code-snippet-high-contrast` | High Contrast Light | `code-snippet-high-contrast-light` |
| Visual Studio Dark | `code-snippet-visual-studio-dark` | Visual Studio Light | `code-snippet-visual-studio-light` |
> /motion-graphics 5-second 1920x1080 video. A macOS Terminal window in the Ocean profile types `npx skills add heygen-com/hyperframes` character by character, then holds on the prompt. Use the `code-snippet-apple-terminal-ocean` registry block. No narration.
**Match the theme to the surface you're claiming to show.** A terminal command in a VS Code editor chrome reads wrong; a source file in Terminal.app reads wrong.
- ❌ `monokai theme typing a shell command`
- ✅ `apple terminal homebrew profile typing a shell command`
<Tip>
Ambiguity resolves to the closest named block. "Dark theme" is under-specified — the agent picks one of a dozen dark variants and you may not get the one you pictured. Say the theme name. This is the [specification dial](/prompting/specification-dial) applied to code: name the block when the default choice can miss.
</Tip>
### Pairing with a pull request
When the code you're animating comes from a real PR, don't hand-write the beats — the [`/pr-to-video`](/prompting/code-and-prs) workflow reads the diff and composes `code-diff`, `code-highlight`, and `code-scroll` around the actual changed hunks. Use the blocks on this page directly when you're illustrating a concept; route through the PR workflow when you're narrating a specific change set.
### Where to go next
- [Anatomy of a one-shot prompt](/prompting/anatomy) — the skeleton every prompt above uses.
- [Copy-paste examples](/prompting/examples) — full prompts you can adapt.
- [Code and PRs](/prompting/code-and-prs) — turning a GitHub PR into a code-change video.
- [Motion that reads premium](/prompting/motion) — the hold-and-settle rules the code blocks still need from you.
docs/prompting/data-and-maps.mdx
+81
View File
@@ -0,0 +1,81 @@
---
title: Data and maps
description: "Prompt animated charts, count-up stats, and maps — highlight regions, draw flows, size bubbles — or hand-draw a chart for full control."
---
## Data and maps
Numbers and geography are the two subjects where "what data" and "how it moves" are separate decisions. The [Data](/catalog/blocks/data-chart) blocks give you a polished chart or map you feed values into; the count-up [showcase](/catalog/blocks/apple-money-count) blocks handle the odometer-and-flourish moment. Everything here plugs into the [one-shot skeleton](/prompting/anatomy) — the data goes in the "copy" slot, the block name in "technique."
### Charts: name the block, or hand-draw
There are two ways to get a chart, and the choice is about control:
- **Name [`data-chart`](/catalog/blocks/data-chart)** to get the built animated bar + line chart — staggered reveal, value labels, NYT-style typography — and feed it your numbers. Fast, consistent, no design decisions.
- **Say "hand-draw everything — no chart library"** to make the agent build the chart from inline SVG and GSAP instead. You give up the polish of the block for total control over shape, motion, and layout — a bar race that overtakes mid-animation, an arc that draws to match a counter, a layout no library ships.
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:
> ```
> 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.
**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`
- ✅ `turn this CSV into an animated bar chart — use the `data-chart` registry block` **or** `…hand-draw everything, no chart library`
**Format numbers for the animation you asked for.** An odometer count-up needs fixed digit columns; a `$0 → $4.2M` range forces an awkward `$0.0M` start.
- ❌ `counts from $0 to $4.2M`
- ✅ `counts up to $4.2M`
### Count-up stats
For a single hero number, [`apple-money-count`](/catalog/blocks/apple-money-count) is the Apple-style finance counter — it rolls from $0, flashes green, and bursts money icons with sound. Name it when you want that exact flourish; hand-draw when you want a bare number in your own type.
> /motion-graphics 6-second 1920x1080 video, dark navy background. Beat 1 (0-1s): label "ARR" fades up small, top-center. Beat 2 (1-4s): a giant number counts up to $4.2M with an odometer roll, easing out as it lands. Beat 3 (4-6s): "+312% YoY" stamps in below in green, then settles into a gentle ambient idle. Use the `apple-money-count` registry block as base. No narration.
### Maps: match the ask to the map
Each map block answers a different geographic question. Say what the map is *for* and name the matching block:
| You want to… | Name this block | Length |
| ----------------------------------------------- | -------------------------------------------------- | ------ |
| Shade US states by a value (choropleth) | [`us-map`](/catalog/blocks/us-map) | 12s |
| Size US cities by a value (proportional bubbles)| [`us-map-bubble`](/catalog/blocks/us-map-bubble) | 12s |
| Draw connections between US cities (origin→dest)| [`us-map-flow`](/catalog/blocks/us-map-flow) | 12s |
| Show US states as an equal-weight hex grid | [`us-map-hex`](/catalog/blocks/us-map-hex) | 10s |
| Shade Spain by autonomous community | [`spain-map`](/catalog/blocks/spain-map) | 12s |
| Shade the world country by country | [`world-map`](/catalog/blocks/world-map) | 14s |
The US maps are composable — `us-map-bubble` and `us-map-flow` are built to layer over the base `us-map`, so "shade states *and* draw flows between two cities" is one composition, not two.
> 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.
**Pick the encoding, don't just say "map."** Choropleth (color), bubble (size), hex (equal weight), and flow (arcs) tell different stories from the same data.
- ❌ `put California's number on a US map`
- ✅ `size each city as a proportional bubble` → `us-map-bubble`, or `shade each state by value` → `us-map`
**Name the region's block.** The choropleths are region-specific with baked-in projections (`spain-map` is D3 conic conformal, `world-map` is Natural Earth) — there's no generic "any country" map.
- ❌ `a map of Spain's regions` (leaves the projection and geography to chance)
- ✅ `use the `spain-map` registry block`
### Routes and flights
For a point-to-point journey — a route drawing across a map with a landing beat — [`nyc-paris-flight`](/catalog/blocks/nyc-paris-flight) is the Apple-style flight animation: a plane flies New York → Paris with a marker circle, landing pop, and sound effects. Use it as the base and re-point the endpoints in your prompt.
> /motion-graphics 6-second 1920x1080 video. A realistic map with a plane flying between two cities, a marker circle at the origin, and a landing pop at the destination. Use the `nyc-paris-flight` registry block as base. No narration.
**A route is a flow with a vehicle, not a static arc.** If you want the drawn arc without the plane and sound, that's `us-map-flow`; if you want the journey performance, that's `nyc-paris-flight`.
- ❌ `draw a line from NYC to Paris` (ambiguous between arc-only and full flight)
- ✅ `a plane flies the route with a landing pop` → `nyc-paris-flight`
### Where to go next
- [Anatomy of a one-shot prompt](/prompting/anatomy) — the skeleton, and why odometers need fixed digit columns.
- [Copy-paste examples](/prompting/examples) — bar-chart race and stat-grid prompts to adapt.
- [Generated artwork](/prompting/generated-artwork) — where hand-drawn HTML/CSS/SVG shines, and where it doesn't.
- [The specification dial](/prompting/specification-dial) — deciding when to name a block versus hand-draw.
docs/prompting/design-systems.mdx
+90
View File
@@ -0,0 +1,90 @@
---
title: Design systems and brand
description: "Point the agent at a source of brand truth - a design spec, a site, or a Figma file - instead of asking for 'on-brand', and let it compose the frame."
---
## Design systems and brand
"Make it on-brand" is the single vaguest thing you can ask. The agent has no way to know what your brand *is*, so it invents one. The fix is always the same: give it a **source of brand truth** — a design spec, a live site, or a Figma file — and name it in the prompt. Everything on this page is a way to do that.
## Point at a spec, don't describe a vibe
HyperFrames projects can carry a design spec — `frame.md` (video-first) or `design.md` — whose frontmatter tokens are the machine-readable brand: exact hex values, font families, weight relationships, and the brand's Do's and Don'ts. When one exists, name it:
> Use the palette and type from `frame.md`. Build a 15-second feature announcement.
- ❌ `make it feel on-brand and premium`
- ✅ `pull colors and fonts from design.md; premium means generous spacing and one restrained accent`
The engine rationale: `on-brand` is a mood the agent guesses at. A spec's frontmatter is normative — the agent quotes the hex and font family verbatim instead of approximating, and reads the prose sections for intent. If your brand lives somewhere else (a PDF brand guide, a screenshot, pasted hex codes), attach it — attachments and pasted tokens are read more reliably than a described impression.
## Brand is truth for color and type — not for layout
A design spec tells the agent what the brand *looks like*; it does **not** dictate how to compose a video frame. Say what's sacred and let the agent stage the rest:
> Colors and fonts are locked to the brand — keep the exact hexes and the display/body pairing. Layout, spacing, and motion are yours to compose for video.
The engine rationale: web-scale brand values don't survive video. A `1px` border with a `0.06`-opacity shadow is invisible after H.264 compression; a web body size vanishes on a 1080p frame. The brand color, background choice (if the brand is a light canvas, keep it light), fonts, and weight relationships are strict — but type sizes, decorative opacity, and border weight get scaled up for the medium. Over-specifying layout from a web design system fights this; pin the palette and typography, delegate the frame.
## Use the site's own palette and fonts
When there's no spec but there is a brand out there, point at it and let the agent extract:
> Match this site's look — pull its palette and fonts — and make a 20-second launch clip: `https://…`
For a well-known brand, naming it is often enough for the agent to research the palette and typography. One caveat worth stating: a single-page-app homepage often returns a near-empty shell, so if the palette comes back thin, point the agent at a blog, press, or docs page instead. This is the same brand-truth move — the *site* is the source instead of a file.
## Bringing in a Figma frame, brand, or logo
If the brand lives in Figma, ask for it directly — the agent imports it rather than eyeballing a screenshot:
> Bring in the brand tokens from this Figma file, then build the intro: `https://figma.com/…`
> Import this Figma frame as the opening scene and this logo as an SVG: `<links>`
The [Figma import](/guides/figma) path freezes each import as a local asset with recorded provenance (so renders stay deterministic) and imports brand variables as composition brand tokens. Two things worth knowing when you phrase the ask:
- **Import tokens before components.** Say "brand tokens first, then the components" — that's what lets imported component colors link to your brand variables instead of baking in duplicate hexes.
- **Storyboard frames are states, not slides.** If you point at a strip of scene frames, ask the agent to *reconstruct the motion between them* — a frame showing an element at four positions is one element animating, not four stills to flip through.
## Keeping a multi-video series consistent
For a series — a launch set, a weekly clip, a per-region cut — consistency comes from a **shared source of truth**, not from re-describing the brand each time:
> All four videos share `frame.md` for palette and type. Only the headline and the stat change per video.
Because the runtime exposes every declared brand token as a CSS custom property, the parts that stay constant come from the one spec (or one set of imported Figma tokens), and the parts that vary become [variables](/prompting/variables-and-templating). Change one brand value in the spec and every video re-skins on the next render — you don't touch four files. This is where design systems and templating meet: the brand is shared, the content is parameterized.
## Supplying brand assets by path
Logos, fonts, textures, and product shots are inputs — hand the agent the path, don't ask it to draw them:
> Logo at `assets/logo.svg`, brand font files in `assets/fonts/`, product shot at `assets/hero.png`. Use them; don't invent placeholders.
Prefer an SVG logo (scalable, animatable) over a raster one. State the paths explicitly so the agent wires the real assets instead of generating stand-ins — and so the render is deterministic, with every asset present locally before it starts.
## Supply inputs a workflow accepts — don't fight its preset
The creation workflows (`/product-launch-video`, `/website-to-video`, and the rest) each come with a designed look. The productive move is to feed that look your brand inputs, not to override its composition after the fact:
- ❌ `run /product-launch-video, then restyle every scene to my colors afterward`
- ✅ `run /product-launch-video with my palette, fonts, and logo as inputs up front`
The engine rationale: a workflow's preset is a coherent, tested system — colors, spacing, motion, and component treatments that hang together. Supplying brand inputs at the start lets it apply your palette and type *within* that system. Restyling scene-by-scene afterward pulls threads out of a design that was balanced as a whole, and you spend more effort fighting the preset than you'd have spent handing it a spec.
## Related
<CardGroup cols={2}>
<Card title="Figma Import" icon="figma" href="/guides/figma">
Import brand tokens, assets, components, and motion from a Figma file.
</Card>
<Card title="Variables and templating" icon="sliders" href="/prompting/variables-and-templating">
Turn brand tokens into variables that re-skin a whole series from one value.
</Card>
<Card title="The specification dial" icon="gauge" href="/prompting/specification-dial">
How pinning exact hexes and type direction removes drift.
</Card>
<Card title="Claude Design" icon="message" href="/guides/claude-design">
Attach a brand guide or screenshot to seed a first draft from your look.
</Card>
</CardGroup>
docs/prompting/editing-existing-videos.mdx
+125
View File
@@ -0,0 +1,125 @@
---
title: Editing existing videos
description: "Direct the agent like an editor — trim, move, retime, swap, restyle — with the NLE verb you already know mapped to the prompt that lands it in one pass."
---
## Editing existing videos
Most HyperFrames time isn't the first render — it's the twenty edits after it. A composition is plain HTML with `data-*` timing attributes and a GSAP timeline, so every edit you'd make in a non-linear editor maps to a specific, inspectable change in the source. You don't re-specify the video; you name the edit the way you'd say it to a human editor, and the agent makes the smallest change that does it.
This page maps the editor verbs to the prompts that land them. Two habits from [Iterating](/prompting/iterating) apply to every one of them, so keep them in mind: **change one thing per render**, and **state targets as absolute values** ("scene 2 = 2 seconds", not "a bit shorter") so the agent lands it in a single pass instead of oscillating.
## The verb → edit map
Every timeline verb resolves to a `data-*` attribute or an inline style. This is what each one touches under the hood — useful to know because it's why absolute targets work and why some edits are cheap:
| You say | Editor verb | What the agent edits |
| --- | --- | --- |
| "start scene 2 later / earlier" | Move | `data-start` |
| "put the captions on top of the video" | Restack | `data-track-index` + inline `z-index` |
| "end the logo sooner" | Trim (right) | `data-duration` |
| "skip the first second of the clip" | Trim (front, media only) | `data-media-start` / `data-playback-start` |
| "make scene 2 two seconds long" | Retime | `data-duration` (and the GSAP timeline length) |
| "the audio bed is too loud" | Level | `data-volume` |
<Note>
The mental model the Studio timeline uses: **move** changes when a clip *starts*, **right trim** changes when it *ends*, and **front trim** only exists for media clips — a `<video>` or `<audio>` can skip into its own content, but a GSAP-driven `<div>` can't start halfway through its animation. See [Timeline editing](/guides/timeline-editing) for the full clip-type breakdown.
</Note>
## Trim, move, and restack
These are the pure-timing edits — no visual change, just when and where a layer lives on the timeline.
> Trim the intro so it ends at 0:03 instead of 0:05.
> Move the lower third to start at 0:08.
> The captions are rendering behind the video — put them on a higher track so they sit on top.
Absolute targets matter most here. "Make the intro shorter" invites a guess; "the intro should end at 3.0s" is a single `data-duration` write with nothing to overshoot.
- ❌ `tighten up the opening`
- ✅ `intro clip duration = 3s; leave its animation and position alone` — one attribute, and the freeze clause stops a rebuild from drifting on axes you'd already settled
## Split a scene
The Studio timeline exposes move and trim as drag gestures but does **not** yet offer split, slip, slide, ripple, or roll. You can still split by directing the agent, because it edits the HTML directly — a split is just one clip becoming two with adjusted `data-start` / `data-duration`:
> Split scene 2 at 0:04 so I can drop a transition between the two halves.
Name the exact cut point. The agent turns one clip into two adjacent clips; you then treat each half as its own layer.
## Retime a scene
Retiming is a duration change, but with one catch worth knowing: a scene driven by a GSAP timeline needs the timeline to be at least as long as the new duration, or the render cuts off early.
> Make scene 2 run 4 seconds instead of 2.5 — keep the animation, just give it more room.
- ❌ `stretch scene 2` — ambiguous whether you mean slower motion or a longer hold
- ✅ `scene 2 duration = 4s, same motion, add the extra time as a hold at the end`
<Warning>
If a retimed scene cuts off before its new end, the fix is extending the GSAP timeline length (the `tl.set({}, {}, <seconds>)` sentinel pattern). The agent handles this; it's the single most common reason a lengthened clip renders short. See the [Video editor cheatsheet](/guides/video-editor-cheatsheet#timing-cheatsheet).
</Warning>
## Make it snappier (retiming *feel*, not just duration)
"Snappier," "punchier," "more relaxed" are pacing words, and they map to concrete easing and timing choices — [Vocabulary](/prompting/vocabulary) has the full table. The agent reads "snappy" as a decisive ease (`power4.out`) and tighter durations, "dreamy" as slow symmetrical motion, and so on.
> Make scene 2 snappier — quicker entrances, harder cuts.
> The reveal feels robotic; give it a bouncy overshoot.
Change one scene's feel per render so you can attribute what helped. If a scene keeps missing, strip it to the minimal version (subject + its motion only), confirm it reads, then re-layer.
## Adjust a keyframe
Individual animation properties are editable — the value, the ease, the timing of any tween. You can direct these by prompt, or edit them yourself in the Studio Design Panel; either way they resolve to the same GSAP code.
> The title slides in from too far — change its entrance to travel 40px, not 200.
> Give the add-to-cart item an arc instead of a straight diagonal, like it's being tossed into the cart.
State the property target absolutely (`Move X = 40`, `arc curviness ≈ 1.5`). [Keyframes & arc motion](/guides/keyframes) covers what's editable, arc-motion paths, and gesture recording.
<Tip>
For an element-specific edit, the Design Panel's clipboard icon copies structured context — the element's id, position, size, and current animation — ready to paste into your prompt. It gives the agent exact spatial context instead of a vague "the title."
</Tip>
## Swap an asset
Replacing a video, image, logo, or audio track is a source-swap. The one rule: **name the path.** The agent will search for "my logo," but a path skips the search and removes the ambiguity of which file you mean.
> Replace the background music with `assets/track.mp3`.
> Swap the hero image for `assets/product-v2.png` and keep its animation.
- ❌ `use the new logo`
- ✅ `swap the logo for assets/logo-2025.svg`
## Change copy
On-screen text is edited verbatim when you quote it. Unquoted text gets paraphrased — the agent treats a description as an instruction to write copy, not to place it exactly.
> Change the headline to "Ship faster." — exact text, keep the styling.
- ❌ `update the title to say something about speed`
- ✅ `title copy: "Ship faster."`
## Restyle one element
Visual tweaks — color, size, weight, position of a single element — are where the "freeze the rest" clause earns its keep. Without it, a restyle prompt can trigger a rebuild that drifts on layout or motion you'd already approved.
> Make the CTA button 20% larger and switch it to the accent color — don't touch anything else.
- ❌ `make the CTA pop more`
- ✅ `CTA background = accent color, font-size = 1.2× current; framing and motion are right, leave them`
## Related
<CardGroup cols={2}>
<Card title="Iterating" href="/prompting/iterating">One variable per edit, absolute targets, freeze what works</Card>
<Card title="Vocabulary" href="/prompting/vocabulary">Pacing and easing words that retime the *feel* of a scene</Card>
<Card title="Timeline editing" href="/guides/timeline-editing">Which edits the Studio timeline persists, and how</Card>
<Card title="Video editor cheatsheet" href="/guides/video-editor-cheatsheet">The `data-*` attributes as timeline controls</Card>
</CardGroup>
docs/prompting/explainers.mdx
+72
View File
@@ -0,0 +1,72 @@
---
title: Explainers
description: "What to say to turn an article, notes, or a topic into a faceless explainer - where every visual is invented, not captured."
---
## What this makes
A faceless explainer: arbitrary text — an article, notes, a topic, a brief — becomes a narrated video where every visual is invented per scene (typography, abstract graphics, diagrams, data-viz). The [`/faceless-explainer`](/prompting/overview) workflow picks a design system, reshapes your text into a teaching story, generates its own TTS narration, and builds it frame by frame.
**Faceless means there's nothing to capture.** No site, no footage, no asset inventory — the visuals are designed downstream. If you have a product to sell use [`/product-launch-video`](/prompting/product-launch); if you have a real site to show use `/website-to-video`; a GitHub PR goes to [`/pr-to-video`](/prompting/code-and-prs). Unsure → start at `/hyperframes`.
## Base prompt
Verified, from the [examples](/prompting/examples) page — a ~60-second vertical explainer from pasted text:
> /faceless-explainer Turn this into a ~60-second 1080x1920 vertical explainer: [paste your text]. One idea per scene, big typography, diagrams over stock footage, brand color #FF5533 on off-black. Male TTS voice, calm. Embedded captions, keywords highlighted in the brand color.
Note the `~` — with a supplied script the runtime follows the spoken words, so ask for *about* a minute, not exactly one. See the [anatomy](/prompting/anatomy) for the rest of the skeleton.
## Variants
<AccordionGroup>
<Accordion title="30-second landscape topic explainer (16:9)">
> /faceless-explainer Make a ~30-second 1920x1080 explainer on how HTTPS keeps a request private, for a non-technical audience. Concept angle: one idea per scene, big geometric type, a simple lock/key diagram as the centerpiece. Deep blue on off-white. Female TTS voice, warm and clear. Embedded captions, key terms highlighted in the accent color.
Shorter runtime, landscape for YouTube / embed. Fewer scenes means the topic has to compress — name the single takeaway so the workflow knows what to keep.
</Accordion>
<Accordion title="Listicle">
> /faceless-explainer Make a ~45-second 1080x1920 listicle: "5 habits of fast-shipping teams". Listicle angle — one habit per scene, each with a big number and a one-line label, escalating energy toward #1. Off-black with a lime accent. Male TTS voice, upbeat. Embedded captions, the habit label highlighted each scene.
The listicle angle gives each item its own scene with a consistent number-and-label shape, so the structure reads as a countdown rather than a wall of points.
</Accordion>
<Accordion title="How-to with diagrams">
> /faceless-explainer Make a ~60-second 1920x1080 how-to on setting up a CI pipeline, for developers. How-to angle: one step per scene, each built around a simple node-and-arrow diagram that draws on as the narration explains it. Charcoal with a teal accent. Calm male TTS voice. Embedded captions, the step name highlighted.
A how-to leans on diagrams as the load-bearing visual. Describe the diagram *shape* per step ("node-and-arrow", "a pipeline that fills left to right") and let the workflow invent the specifics.
</Accordion>
</AccordionGroup>
## The knobs that matter
| Knob | What to say | Why it matters |
| --- | --- | --- |
| **Verbatim vs summarized** | "use my wording verbatim" or "restructure it freely" | The workflow asks once. Verbatim keeps your voice but locks the word count; summarized lets it cut and reorder for pace |
| **Duration** | "~60 seconds", never "60 seconds" | With a script the narration sets the real length; a hard number forces the agent to trim or pad the words |
| **Scene density** | "one idea per scene" | A faceless scene has one invented focal to animate; two ideas in a scene leave nothing to build the motion around, and it reads as a text dump |
| **Angle** | "concept" / "how-to" / "listicle" / "narrative" | The angle decides the story shape — the workflow reshapes your text into it rather than reading paragraphs in order |
| **Caption style** | "embedded captions, keywords highlighted in the accent color" | Captions are burned in; naming the highlight color ties them to the palette instead of a default pill |
| **Palette** | "brand color #FF5533 on off-black" | With no site to borrow from, the preset supplies a full palette; a named accent + ground personalizes it |
| **Voice** | "male TTS voice, calm" / "warm female voice" | Gender and tone are prompt words; the provider is a workflow decision |
<Tip>
The single biggest quality lever here is scene density. "One idea per scene" turns a dense paragraph into a paced sequence — the workflow reorders and compresses your text to hit it, which is exactly what makes an explainer teach instead of recite.
</Tip>
## 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.
- ❌ `a 60-second explainer from this text: ...`
- ✅ `a ~60-second explainer from this text: ...`
**Cramming ideas into a scene.** Every faceless visual is invented around a single focal; overload the scene and there's no clear thing to animate.
- ❌ `explain all five caching layers in one scene`
- ✅ `one idea per scene — one caching layer at a time`
**Asking it to capture or pull real imagery.** There is no capture step; a faceless explainer invents its visuals.
- ❌ `pull screenshots from the site and explain the feature`
- ✅ that's a site or product video — use `/website-to-video` or [`/product-launch-video`](/prompting/product-launch)
**Leaving the look unspecified when you care.** With no brand to read, the preset picks the palette; if you have colors, name them.
- ❌ `make it look on-brand`
- ✅ `brand color #FF5533 on off-black`
docs/prompting/media-and-audio.mdx
+106
View File
@@ -0,0 +1,106 @@
---
title: Media and audio
description: "Ask for the voiceover, music, sound, captions, cutouts, and assets a composition needs — with the precise, unambiguous phrasing the media pipeline acts on."
---
## Media and audio
HyperFrames owns media *playback*; a companion media pipeline resolves everything else — voice, music, sound effects, images, icons, logos, captions, and background removal. You reach all of it by describing what the composition needs, and the agent resolves each need to a frozen local file. The craft here is precision: vague media asks ("add some music," "no sound") are the ones that come back wrong, because the pipeline does exactly what the words say.
## Voiceover (TTS)
Text-to-speech runs locally through Kokoro — no API key needed — with a HeyGen TTS upsell behind it. Describe the content and the agent picks a fitting voice, or name the voice, tone, and speed directly:
> Generate narration for this script with a professional female voice.
> Add TTS voiceover, British male voice, at 1.1× speed.
The [Vocabulary](/prompting/vocabulary#text-to-speech-voices) table maps content types to Kokoro voices (for example `af_heart` / `af_nova` for a product demo, `am_adam` / `bf_emma` for a tutorial, `af_sky` / `am_michael` for marketing). Name one directly if you already know it; otherwise describe the read and let the agent choose.
- ❌ `add a voice`
- ✅ `warm, unhurried female narration of the quoted script` — tone and pace are what actually change the delivery
## Background music
Music resolves from a large catalog by mood, and it should almost always sit *under* the narration, not compete with it. Give the mood **and** a loudness target — the pipeline can duck and normalize to a level, so an explicit target lands a mix instead of a guess:
> Add subtle electronic BGM, kept under −18 dB so it stays beneath the voiceover.
> Upbeat tech-launch music bed at a low level, ducking under narration.
- ❌ `add background music` — you'll get a full-volume track fighting the VO
- ✅ `subtle background music, ducked ~12 dB under the voice` — a mix instruction the pipeline can execute
<Tip>
A stated loudness target ("under −18 dB," "ducked under the voice") is the difference between music that supports the piece and music that buries it. When there's narration, always say the bed goes under it.
</Tip>
## Sound effects
SFX resolve from a small bundled library plus the catalog. Cue them to specific moments — a transition, a stamp-in, an impact — rather than sprinkling them:
> Add a whoosh on each of the three scene transitions.
> Put a soft click on the button press at 0:04.
## Captions and transcription
Captions come from word-level timestamps. When you generate a voiceover, the timing comes with it; for existing footage, transcription produces the timing (Parakeet by default, with a whisper.cpp fallback). Scaffolding a project from a source video can generate captions from its audio directly.
> Transcribe the narration and add karaoke-style captions synced to it.
> Generate captions from `assets/interview.mp4` and style them hype, scale-pop.
Caption *look* is its own vocabulary (tone, size, per-word emphasis) — see [Captions catalog](/prompting/captions-catalog) for the styles. This page is about producing the timed text; that page is about styling it.
## Background removal (transparent cutouts)
The `remove-background` command mattes a subject out of a video or image locally and hands you a transparent WebM you can drop into any scene as a `<video>`:
> Remove the background from `assets/presenter.mp4` and float the subject over the scene.
One caveat is load-bearing: the built-in model is **purpose-built for people** — head-and-shoulders or full-body, reasonably stable framing, a background that contrasts with the subject. It returns a mostly-empty mask on **non-human subjects** (products, animals, objects). If you need to cut out a product, say so — the agent should route to a different tool rather than run the person model and get nothing.
- ❌ `remove the background from this product shot` with the built-in command — the human-matting model can't see it
- ✅ `matte the presenter out of assets/talk.mp4` (person) — or, for a product, flag that it's a non-human subject so a different matter is used
The [Remove background guide](/guides/remove-background) covers the person-only caveat, the two-layer plate for text-behind-subject, and alternatives for objects and hair-fine mattes.
## Video-in-video and picture-in-picture
Layering footage — a talking head over a scene, a subject in front of a headline, PiP inset — is a compositing prompt. Two grounded rules keep it frame-accurate, and the agent applies them for you, but naming the layout you want helps:
> Put the transparent presenter cutout in the bottom-right, over the chart scene.
> Layer the headline *behind* the presenter so their silhouette occludes the text.
<Note>
Two mechanics the workflow skills handle automatically (from the [Remove background guide](/guides/remove-background#compositing-patterns-and-pitfalls)): a cutout that reveals into view is wrapped in a non-timed `<div>` and the *wrapper* is animated (the framework forces `opacity: 1` on timed clips, so animating the video directly does nothing); and both the base video and the cutout mount at `data-start="0"` so their decoders stay in sync at the cut. You rarely need to say this — but it's why "late-mounting" a PiP clip can land a frame off.
</Note>
## 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:
- ❌ `use my logo`
- ✅ `use assets/logo.svg`
This matters even when resolution would otherwise work: brand and entity assets should point at *your* file, not a resolved lookalike. (Third-party logos are a separate case — the pipeline pulls official marks from a logo cascade and never hand-redraws them, so "add the LinkedIn logo" is fine; "add my company's logo" needs a path.)
## Say what "no sound" actually means
The most common audio mistake is a negative that means less than you think. "No narration" removes the voiceover — it does **not** silence music or sound effects. If you want genuine silence, say so:
- ❌ `no narration` when you mean a completely silent video — music and SFX can still be added
- ✅ `no audio at all` — the unambiguous way to ask for silence
This mirrors the negatives discipline in [Anatomy](/prompting/anatomy): close the gap explicitly, because the engine acts on the literal words.
## Related
<CardGroup cols={2}>
<Card title="Vocabulary" href="/prompting/vocabulary">Voice names, caption tones, and audio-reactive mappings</Card>
<Card title="Captions catalog" href="/prompting/captions-catalog">Styling the timed text this page produces</Card>
<Card title="Remove background guide" href="/guides/remove-background">The matting command, its person-only caveat, and alternatives</Card>
<Card title="Video components" href="/guides/video-components">Installable overlays, captions, and effects</Card>
</CardGroup>
docs/prompting/motion-graphics.mdx
+71
View File
@@ -0,0 +1,71 @@
---
title: Motion graphics
description: "Short, design-led pieces where motion is the message - kinetic type, a stat hit, a logo sting - and the knobs that decide MP4 versus transparent overlay."
---
## What a motion graphic is
A motion graphic is a short, design-led piece where **motion is the message** — kinetic typography, a stat count-up, a chart hit, a logo sting, a lower-third or social overlay, an animated map, tweet, or headline. It's usually under 10 seconds (up to ~30s), has no narration and no live-action subject, and renders to an MP4 or a transparent overlay.
Route with `/motion-graphics`. The workflow is autonomous by design — at most one clarifying question, then straight through to render. Reach for a different workflow when the piece grows past what "motion is the message" covers:
| If the piece is… | Route instead |
| --- | --- |
| Longer, multi-scene, or narrated | `/general-video` |
| A narrated video of a website | `/website-to-video` |
| A topic explainer with a voice-over | `/faceless-explainer` |
| A product promo / launch | `/product-launch-video` |
| Captions on existing footage | `/embedded-captions` |
## Base prompt
The canonical shape: routed, spec'd, beat-timestamped, copy quoted, technique pinned, gaps closed.
> /motion-graphics Make an 8-second 1920x1080 video. Beat 1 (0-4s): dark macOS terminal types "npx skills add heygen-com/hyperframes" character by character, then hold on the blinking cursor. Beat 2 (4-5s): the terminal shatters into fragments. Beat 3 (5-8s): bold white kinetic text on black slams in word by word, snappy: "YOU JUST MADE THIS / WITH HYPERFRAMES." Use the `code-typing` and `vfx-shatter` registry blocks. No narration, no image or media files.
## Variants
Each reuses a registry block, so the agent composes rather than hand-building from scratch.
<AccordionGroup>
<Accordion title="Stat count-up">
> /motion-graphics 6-second 1920x1080 video, dark navy background. Beat 1 (0-1s): label "ARR" fades up small, top-center. Beat 2 (1-4s): a giant number counts up to $4.2M with an odometer roll, easing out as it lands. Beat 3 (4-6s): "+312% YoY" stamps in below in green, then everything settles into a gentle ambient idle (subtle breathing scale, slow particle drift). Use the `apple-money-count` registry block as base. No narration.
</Accordion>
<Accordion title="Logo sting">
> /motion-graphics 5-second 1920x1080 logo sting. Beat 1 (0-2s): the word "ACME" assembles from scattered particles. Beat 2 (2-3s): full-frame `swirl-vortex` shader transition. Beat 3 (3-5s): logo lockup + tagline "Ship faster." settles on white, holds. Use `code-particle-assemble` for the assembly.
</Accordion>
<Accordion title="Animated tweet">
> /motion-graphics 7-second 1080x1350 vertical video. A real tweet card (handle @hyperframes, text "we render video from HTML now. no timeline UI. just code.") slides up over a soft animated gradient, likes counter ticks 0→1.2K, then the card tilts in 3D and a highlight sweeps the second sentence. Hold on the card at the end. Use the `x-post` and `vfx-liquid-background` registry blocks. No narration, no image or media files.
</Accordion>
<Accordion title="Map route">
> /motion-graphics 8-second 1920x1080 video. Dark world map, a glowing arc animates from San Francisco to Tokyo over 3s, destination pin drops with a pulse, then camera zooms into Tokyo and the label "LATENCY: 89ms" types on. Use the `nyc-paris-flight` registry block as the base pattern, restyle to teal on charcoal. No narration.
</Accordion>
</AccordionGroup>
## The knobs that matter
**Duration.** Keep it short — motion graphics live under 10 seconds, up to ~30. A 2-second idea stretched to 8 feels slow no matter how it's animated; if the piece genuinely needs multiple scenes or a longer runtime, it's a `/general-video`, not a motion graphic.
**MP4 vs transparent overlay.** The default output is an MP4. Ask for a transparent overlay — a lower-third, a callout, a bug meant to composite over other footage — and the render targets `webm` or `mov` with alpha. Transparency only makes sense when part of the frame is *meant* to be empty. A full-frame design (its own background, edge-to-edge composition) has nothing to be transparent, so asking for a transparent WebM there produces either an opaque file or a broken-looking one. Say "transparent overlay, alpha channel" only for pieces designed to sit on top of something else.
**Registry blocks vs freeform.** Naming a block (`apple-money-count`, `x-post`, `data-chart`, `code-typing`, `us-map` / `world-map`) makes the agent compose reuse-first: install the block, customize in place, hand-author only the gaps. Omit the block and it hand-builds from your description — fine for one-off looks, more drift on the details you didn't pin. Name blocks exactly as they appear in the [catalog](/catalog/blocks/data-chart).
**Easing and motion feel.** The words you use for *how* motion feels — "snappy", "bouncy", "settles with overshoot" — map to specific eases. Spend them; they're cheap precision. See [Vocabulary](/prompting/vocabulary) for the adjective-to-ease table and [Premium motion](/prompting/motion) for the grammar that keeps a piece from reading cheap (nothing fully stops, action overlaps, the camera acts).
## Failure modes
**Transparent output on a full-frame design.** Alpha is for overlay elements, not for pieces that fill the frame. A design with its own background has no transparent region to export.
- ❌ `an 8s full-screen stat count-up on dark navy — export as a transparent WebM`
- ✅ `an 8s stat count-up on dark navy, MP4` — or, for a bug to composite over footage: `just the count-up chip, no background, transparent overlay (webm)`
**Narration on a motion-is-the-message piece.** Motion graphics are unnarrated by definition — the visual carries it. A voice-over means a different workflow.
- ❌ `/motion-graphics a 10s logo sting with a voice-over reading the tagline`
- ✅ `/motion-graphics a 10s logo sting, no narration` — for a spoken track, use `/faceless-explainer` or `/general-video`.
**Stretching a short idea long.** Runtime is a knob, and past ~30s a single motion beat runs out of things to do.
- ❌ `a 45-second kinetic-type piece of one headline`
- ✅ `an 8-second kinetic-type piece of one headline` — or promote it to a multi-scene `/general-video`.
<Tip>
For the six-part skeleton and the per-beat content formula these prompts share, see [Prompt anatomy](/prompting/anatomy); for the full set of run-verified examples, [Verified examples](/prompting/examples). Unsure whether your ask is a motion graphic at all? Start at the router in `/hyperframes`.
</Tip>
docs/prompting/music-and-slideshows.mdx
+71
View File
@@ -0,0 +1,71 @@
---
title: Music videos and slideshows
description: "Two music- and slide-driven outputs that look alike in a brief but ship differently - a beat-synced MP4 versus a navigable deck - and how to route to the right one."
---
## Two outputs that a brief blurs together
"Make a slideshow from these photos and this track" and "make a slideshow deck for my pitch" both say *slideshow*, but they produce different things and route to different workflows. Name the output you want up front.
| You want | Route | Output |
| --- | --- | --- |
| Photos / clips cut to a music track, exported as a video | `/music-to-video` | A beat-synced **MP4** with audio |
| A presentation you click through — slides, reveals, speaker notes | `/slideshow` | A **navigable deck**, not an MP4 |
`/music-to-video` turns a **music track** — an audio file, a video to pull audio from, or a track generated from a mood brief — into a beat-synced video. The music drives all pacing; any photos or clips you supply are cut onto the same beat grid, and a complete video needs zero assets (typography carries it otherwise). There is no narration and no website capture.
`/slideshow` authors a HyperFrames deck — discrete slides with fragment reveals, hotspot branching, and a built-in presenter mode with speaker notes. Its output is the **running deck**, served with `hyperframes present`. Do not point `render` at a deck: it resolves only the first scene and emits a silently truncated MP4. If the user didn't explicitly ask for a slideshow, the skill confirms the deck route before authoring — that's a routing decision, not a style preference.
## Base prompt — beat-synced slideshow
The verified starting point: photos cut to a track, exported to a square MP4.
> /music-to-video 20-second 1080x1080 video from ./track.mp3 (pick the best 20 seconds of the track) and the 8 photos in ./shots/. Cut on the beat grid, one photo per bar, punch-in on downbeats, `whip-pan` transitions on phrase changes. End on the last photo with "SUMMER '26" in condensed caps. No TTS.
Every timing decision here is delegated to the track's own analysis — you describe the *treatment* ("one photo per bar", "punch-in on downbeats"), and the beat grid supplies the *times*.
## Variants
<AccordionGroup>
<Accordion title="Lyric video">
> /music-to-video 30-second 1080x1920 lyric video from ./song.mp3 (pick the strongest 30-second section — a verse into the hook). Transcribe the vocals for word timing. Lines rise in one at a time on the beat, big condensed type on a dark grain background; the hook lands with each word punching in on its downbeat. Keyword in each line highlighted in acid green. No photos — typography only. No TTS.
Word-level timing comes from transcribing the track (or from lyrics you paste, placed on the beat grid). No supplied assets needed — type is the whole video.
</Accordion>
<Accordion title="Kinetic promo from a mood brief (no track)">
> /music-to-video 15-second 1080x1080 kinetic promo. No track supplied — generate one: driving synthwave, high energy. Cut hard on the beat: full-frame word cards ("FASTER", "SHARPER", "SHIP IT") slam in on downbeats, alternating black/white with inverted type, a glitch flash on each phrase change. End on the wordmark "NOVA" holding with a subtle ambient idle. No TTS.
With no audio supplied, the track is generated from the mood you describe; the beat grid it produces still drives every cut. Fast, high-energy briefs suit this workflow best.
</Accordion>
<Accordion title="Presentation deck (slideshow)">
> /slideshow Build a 5-slide pitch deck, 1920x1080. One idea per slide, each headline a complete-sentence claim (not a label), punchline first. Slide 2 reveals three pain points one at a time as fragments. Slide 3 shows bottom-up market math (accounts × ACV), not a bare "$40B TAM". Add presenter notes to every slide, and a hotspot on slide 3 that branches to a "sizing methodology" detail slide. I'll present it with `hyperframes present`.
This produces a clickable deck, not a video. Fragments are reveal hold-points inside a slide; the hotspot branches off the main line and returns on Back. Headlines follow the deck's hard rules — complete-sentence claims, one idea + one visual per slide, font no smaller than a 30pt equivalent.
</Accordion>
</AccordionGroup>
## The knobs that matter
**The beat grid.** `/music-to-video` analyzes the track once into energy phases, onsets, rolls, silences, hard stops, and phrases, then cuts at real musical changes. You steer *how* it cuts, not *when*: "one photo per bar" sets cut density, "punch-in on downbeats" adds the accent, "transitions on phrase changes" reserves the visible moves for structural boundaries. On genuinely rhythmic music the grid is trustworthy and cuts snap to the beat; on calm music the grid is a metronome the analyzer imposed, so the skill paces by phrase and energy instead of hard-cutting — say "let it flow, no hard cuts" if the track is ambient.
**Track section — describe, don't timestamp.** Ask for "the best 20 seconds" or "the verse into the hook" and let the analyzer choose boundaries that land on musical anchors. Hard timestamps ("use 0:32–0:52") cut mid-phrase and fight the grid.
**Asset supply.** Zero assets is valid — typography and templates carry a complete video. Any photos or clips you hand it are woven in *on the same beat grid* (beat-cut or Ken Burns), so more assets means more to cut between, not a different pacing model. Point at a directory ("the 8 photos in ./shots/") and name the end card.
**Deck structure (slideshow).** Fragments (reveal hold-points), hotspots + branch sequences (off-line detail slides), and presenter notes are the deck's structural knobs. Ask for them by name — "reveal the bullets as fragments", "branch to a detail slide from a hotspot", "add speaker notes" — and the island wiring follows.
## Failure modes
**Hard track timestamps.** The whole point of `/music-to-video` is that the track's structure sets the cuts. A literal time window ignores the analyzed beat grid and lands cuts mid-phrase.
- ❌ `use the section from 0:32 to 0:52`
- ✅ `pick the best 20 seconds of the track`
**Expecting an MP4 from `/slideshow`.** A deck is authored as several top-level scenes with no master-root composition, so `render` resolves only the first one and truncates. The supported outputs are the live `present` deck and per-slide snapshots.
- ❌ `/slideshow ... then render it to deck.mp4`
- ✅ `/slideshow ... I'll present it with hyperframes present` — or, if you actually need a rendered video, use `/music-to-video` (beat-synced) or `/general-video`.
**Wrong workflow for the output.** Photos set to music that you'll export and post is `/music-to-video`; a thing you click through live is `/slideshow`. Picking by the word "slideshow" alone builds the wrong deliverable.
<Tip>
Both prompts here are unnarrated. `/music-to-video` has no TTS by design; if you want a spoken voice-over instead of a music bed, that's a different workflow (see the router in `/hyperframes`). For the six-part skeleton these prompts share, see [Prompt anatomy](/prompting/anatomy); for adjectives that map to eases and transitions, [Vocabulary](/prompting/vocabulary).
</Tip>
docs/prompting/overlays-and-lower-thirds.mdx
+87
View File
@@ -0,0 +1,87 @@
---
title: Overlays and lower thirds
description: "Prompt named lower-third and social-post overlay blocks with timing, copy, and brand tone."
---
## What overlays do and when they trigger
Overlays are timed blocks that sit on top of your footage or scene — a lower third that names a speaker, a broadcast ticker, or a replica social-media card. Because each is a timed clip, prompts trigger this layer when you ask to *add* something *at* a moment: "add a lower third at 0:03 with the name and title," "show an animated tweet during the intro," "put a Spotify now-playing card in the corner." Give the timestamp, the copy, and the tone; the agent places the block on a track above the footage.
Two groups:
- **[Lower thirds](/catalog/blocks/lt-clean-bar)** — name/title identifiers for speakers, interviews, podcasts, and news.
- **[Social overlays](/catalog/blocks/x-post)** — animated replicas of platform UI (posts, cards, notifications, follow prompts).
## Brand tone → lower third
Lower thirds split into **cards** (a filled shape behind the text) and **cardless** (text with a rule or sweep, designed to overlay live footage without boxing it in).
| Tone | Blocks |
| ---- | ------ |
| **Minimal / clean / corporate** | [`lt-clean-bar`](/catalog/blocks/lt-clean-bar), [`lt-soft-pill`](/catalog/blocks/lt-soft-pill) |
| **High-energy / podcast / bold** | [`lt-bold-block`](/catalog/blocks/lt-bold-block), [`lt-color-block`](/catalog/blocks/lt-color-block) |
| **Cardless over footage** (interview, talking head) | [`lt-accent-underline`](/catalog/blocks/lt-accent-underline), [`lt-kicker-name`](/catalog/blocks/lt-kicker-name), [`lt-mask-reveal`](/catalog/blocks/lt-mask-reveal), [`lt-side-rule`](/catalog/blocks/lt-side-rule) |
| **Card over bright footage** | [`lt-dark-card`](/catalog/blocks/lt-dark-card) |
| **Broadcast / news** | [`lower-third-bild`](/catalog/blocks/lower-third-bild), [`news-ticker`](/catalog/blocks/news-ticker) |
| **Two-part wipe (name + role)** | [`lt-stack-bars`](/catalog/blocks/lt-stack-bars) |
<Tip>
Over live footage, prefer a **cardless** lower third — they're text-shadowed for legibility without a box that fights the shot. Use a **card** ([`lt-dark-card`](/catalog/blocks/lt-dark-card) charcoal for bright scenes) when the background is too busy for cardless text to read.
</Tip>
## Use → social overlay
Each social overlay is a self-contained animated card with editable placeholder content.
| You want | Block |
| -------- | ----- |
| An animated tweet / X post with engagement metrics | [`x-post`](/catalog/blocks/x-post) |
| A Reddit post card with upvotes and comments | [`reddit-post`](/catalog/blocks/reddit-post) |
| A Spotify now-playing card with album art and progress | [`spotify-card`](/catalog/blocks/spotify-card) |
| A macOS notification banner | [`macos-notification`](/catalog/blocks/macos-notification) |
| An Instagram follow prompt | [`instagram-follow`](/catalog/blocks/instagram-follow) |
| A TikTok follow prompt | [`tiktok-follow`](/catalog/blocks/tiktok-follow) |
| A YouTube subscribe lower third | [`yt-lower-third`](/catalog/blocks/yt-lower-third) |
## Example prompts
Quote the exact copy — unquoted names and titles get paraphrased (see [anatomy](/prompting/anatomy)).
> Add a lower third at 0:03 for 4 seconds with [`lt-clean-bar`](/catalog/blocks/lt-clean-bar). Name: "Dana Ríos". Title: "Head of Design".
> Podcast clip. Bring in [`lt-bold-block`](/catalog/blocks/lt-bold-block) when the guest starts talking — name "MARCUS LEE", tag "GUEST" — brand accent #FF5A1F.
> During the intro, show an [`x-post`](/catalog/blocks/x-post) card with the quote "we shipped it in a weekend" and 12.4K likes, then slide it out before the demo.
> /motion-graphics Transparent overlay only — a [`spotify-card`](/catalog/blocks/spotify-card) now-playing widget animating in, bottom-left. Export as transparent WebM so I can drop it over footage in my editor.
## Knobs
- **Timing.** "at 0:03," "for 4 seconds," "slide it out before the demo" set the block's start and duration — an overlay is a timed clip, so it needs both.
- **Copy.** Quote every editable field: name, title, handle, headline, metrics, ticker text. The blocks ship with placeholder content you replace.
- **Track placement.** Overlays go on a track *above* the footage so they composite on top; say "over the footage" if you're layering onto an existing clip.
- **Brand accent.** Give a hex or brand color — most lower thirds carry an accent bar, tab, or block that takes it.
- **Card vs cardless.** State it when it matters, or let the tone table decide.
- **Transparent output.** For use in an external NLE, render the overlay on its own as a transparent WebM — see [rendering and output](/prompting/rendering-and-output).
## Failure modes
**Don't leave the copy unquoted.** Unquoted names and titles get paraphrased; quoted text renders verbatim.
- ❌ `add a lower third with the speaker's name and role`
- ✅ `lt-clean-bar — name: "Dana Ríos", title: "Head of Design"`
**Don't omit the timestamp.** An overlay is a timed clip; without a start (and ideally a duration) the agent has to guess when it appears and how long it holds.
- ❌ `put a lower third somewhere in the intro`
- ✅ `lower third at 0:03, holding 4 seconds`
**Don't let the overlay render behind the footage.** It has to sit on a track above the clip, or the video covers it.
- ❌ `add the tweet card to the video` (ambiguous layering)
- ✅ `x-post card on a track above the footage, top-right`
**Don't over-spec real account data.** These are stylized replicas with editable placeholders — provide the copy you want shown, not a live URL to scrape.
- ❌ `pull my actual Spotify page`
- ✅ `spotify-card: track "Midnight City", artist "M83"`
**Don't invent overlay names.** Only the blocks in the [Social Overlays](/catalog/blocks/x-post) and [Lower Thirds](/catalog/blocks/lt-clean-bar) groups exist.
- ❌ `add a linkedin-post overlay`
- ✅ pick a real block, or describe the card and let the agent build a custom one in a freeform composition
docs/prompting/product-launch.mdx
+85
View File
@@ -0,0 +1,85 @@
---
title: Product launch videos
description: "What to say to turn a product URL, a script, or a brief into a launch or promo video - and when to reach for a site tour instead."
---
## What this makes
A launch or promo that *sells*: SaaS promos, feature reveals, product demos, app and company launches. The [`/product-launch-video`](/prompting/overview) workflow captures the product's site (or takes a pasted script), reads its brand, writes a story, and builds it frame by frame.
**Route it right — the distinction is intent, not input:**
| You want… | Route |
| --- | --- |
| To market, launch, promote, or reveal a product (the default for any commercial URL) | `/product-launch-video` |
| A video *of* a general site — a portfolio / blog / docs / landing-page tour or showcase, not a sales pitch | `/website-to-video` (see the [guide](/guides/website-to-video)) |
"Promo for our site" is a launch, even though it names a site — use `/product-launch-video`. A neutral walkthrough of a docs site is a tour — use `/website-to-video`. Unsure → start at `/hyperframes` and let it route.
## Base prompt
Verified, from the [examples](/prompting/examples) page — a 45-second launch from a live URL:
> /product-launch-video Make a 45-second 1920x1080 launch video for https://linear.app. Energetic but minimal, use the site's own palette and screenshots. Structure: hook stating the problem, 3 feature beats with UI captures and one-line captions, end card with logo + "Try it free". Female TTS voice, confident tone, subtle electronic BGM under -18dB.
Read the [anatomy](/prompting/anatomy) of that skeleton — route, spec, structure, copy, voice, level — then swap in your own product.
## Variants
<AccordionGroup>
<Accordion title="20-second vertical teaser (9:16)">
> /product-launch-video Make a ~20-second 1080x1920 teaser for https://linear.app. Super minimal, just the hook. Beat 1 (0-4s): the problem in one line, big type. Beat 2 (4-16s): two feature beats, one UI capture each with a three-word caption. Beat 3 (16-20s): logo + "Try it free" end card, then settle into a gentle idle. Use the site's own palette. Female TTS voice, confident; no BGM.
A teaser trades feature coverage for pace — fewer beats, one idea each. Keep the destination (Shorts / TikTok → 9:16) and let the workflow scale the story to the shorter runtime.
</Accordion>
<Accordion title="Pasted script, no capture">
> /product-launch-video Make a ~30-second 1920x1080 launch video from this script — use it verbatim: "Your CRM is three hours of busywork a day. AutoCRM logs every call, email, and meeting for you. 200 teams already switched. Try it free at autocrmhq.com." No site to capture — invent clean product-y visuals from the script. Male TTS voice, calm and confident; subtle BGM under -18dB.
With no URL the workflow takes the no-capture path: no screenshots, no site palette to borrow, so name your brand colors and fonts if you have them. The workflow will ask once whether to keep your wording verbatim or restructure it.
</Accordion>
<Accordion title="Brand name only (agent finds the URL)">
> /product-launch-video Make a ~45-second 1920x1080 launch video for Linear. Find the official site, capture it, and use its own palette and screenshots. Angle: speed as the whole pitch. End card with logo + "Try it free". Confident female TTS voice, subtle electronic BGM under -18dB.
Given a name instead of a link, the workflow searches for the official URL, confirms it in one line, then captures — you get the site-grounded result without pasting the link yourself.
</Accordion>
<Accordion title="Site tour instead (website-to-video)">
> /website-to-video Make a 30-second 1920x1080 tour of https://example.com built from its own screenshots. Calm, editorial pace — show the homepage, two inner pages, and the footer. Full narration, warm male voice. This is a showcase, not a sales pitch.
Reach for this when the goal is to *show the site*, not sell a product. It builds from captured screenshots and the site's brand assets. A launch or promo — even from the same URL — belongs to `/product-launch-video`.
</Accordion>
</AccordionGroup>
## The knobs that matter
Decisions specific to a launch. Set the ones you care about; leave the rest to the workflow's taste.
| Knob | What to say | Why it matters |
| --- | --- | --- |
| **Capture vs no-capture** | Give a URL to capture the real site; give a script or brief for the no-capture path; give just a brand name to have the agent find the URL | Capture borrows the real palette and screenshots; no-capture invents visuals, so it needs your brand colors named |
| **Palette source** | "use the site's own palette" | The workflow remixes the captured brand tokens onto its frame preset — you get the product's real colors, not a generic theme |
| **Structure** | "hook stating the problem, N feature beats with captions, end card with CTA" | The workflow leads value-before-evidence; naming the beats keeps the hook and CTA from getting dropped |
| **Voice & tone** | "female TTS voice, confident" / "calm male voice" | Voice gender and tone are prompt words; the provider itself is a workflow decision — see the [skill](/prompting/overview) for provider mechanics |
| **BGM level** | "subtle electronic BGM under -18dB" (or "no BGM") | A stated ceiling keeps music under the voice; leave it off entirely for a teaser |
| **Length & destination** | "~45 seconds", "9:16 for TikTok" | Sweet spot is 30-90s; destination sets the aspect (16:9 embed · 1:1 feed · 9:16 Shorts) |
<Tip>
Duration and destination are the two cheapest, highest-leverage things to state. Everything else the workflow will choose well if you stay quiet — see [the specification dial](/prompting/specification-dial) for how much to delegate.
</Tip>
## Common failure modes
**Hard-timing a verbatim script.** With supplied narration, the real TTS duration sets the length — a hard number forces the agent to cut or pad your words.
- ❌ `a 45-second launch video from this exact script: ...`
- ✅ `a ~45-second launch video from this script: ...`
**Overriding the designed structure.** The workflow builds hook → value → evidence → CTA for a reason; drop the hook and the promo never answers "why should I care?"
- ❌ `skip the intro, just list all six features back to back`
- ✅ `hook stating the problem, then 3 feature beats, then the CTA end card`
**Fighting the art-directed preset.** Each workflow adopts a frame preset and injects transitions; forcing a foreign theme yields a compromise, not your look (see [rules and anti-patterns](/prompting/rules-and-anti-patterns)).
- ❌ `/product-launch-video ... plain white, no transitions between scenes`
- ✅ pick the angle and tone, and let the preset carry the visual system
**Assuming the agent knows your assets.** On the no-capture path there's no site to read; an unnamed logo or color is invented.
- ❌ `use our brand colors`
- ✅ `brand colors #5E6AD2 on off-black; logo at assets/logo.svg`
docs/prompting/rendering-and-output.mdx
+113
View File
@@ -0,0 +1,113 @@
---
title: Rendering and output
description: "What to say to get the right file out — quality tier, format, resolution, framerate, and cloud rendering — without over-speccing a render that slows to no benefit."
---
## Rendering and output
Everything before this point shapes the composition. This page is about the *export*: the words that pick a quality tier, a container format, a resolution, and where the render runs. The defaults — MP4, 1920×1080, 30fps, `standard` quality — are deliberately good, so most of the skill here is knowing when *not* to ask for more. The mechanics live in the [Rendering guide](/guides/rendering); this page owns what to say.
## Quality tier
Say the tier by name and the agent selects the matching encode preset — you don't specify CRF or encoder speed:
| Say this | Tier | Best for |
| --- | --- | --- |
| "draft" / "quick render" | `draft` | Fast iteration while you're still judging the cut |
| nothing, or "review render" | `standard` (default) | General use — visually lossless at 1080p |
| "final" / "high quality" | `high` | Delivery masters |
The tiers trade encode time for fidelity. `standard` (the default) is already visually lossless at 1080p — most people can't tell it from source — so reserve `high` for the master you'll actually hand off, and use `draft` freely while iterating.
- ❌ `render everything at high quality`
- ✅ `draft renders while we iterate, then one high-quality final` — you spend the slow encode once, on the cut you've already approved
## Format
MP4 is the default and the right answer for almost everything — it plays everywhere. Ask for a different container only when the delivery target needs one:
> Render this as a transparent WebM overlay.
> Export a MOV I can drop into Premiere with the background knocked out.
Transparency has a container hierarchy, and the tradeoffs are real:
| Ask for | You get | Watch out for |
| --- | --- | --- |
| "transparent MOV" | ProRes 4444 with alpha | The editor-grade choice (Premiere, Final Cut, Resolve, After Effects). Files are large — expected for an editing intermediate. |
| "transparent WebM" | VP9 with alpha | Small, but **only browsers decode the alpha** — every video editor renders the transparent areas black. Browser playback only. |
| "PNG sequence" | Lossless RGBA frames | For compositing in After Effects / Nuke / Fusion. Largest of all. |
Transparency also only *means something* on a design that has empty space to see through. A lower third, a subscribe card, or a logo sting is mostly empty canvas — transparency lets it composite over other footage. A full-frame scene (edge-to-edge background, full-bleed video, a title card with its own backdrop) has nothing to be transparent; the request produces a file that looks identical to the opaque one but is larger and plays in fewer places.
- ❌ `render my full-screen product promo as a transparent WebM`
- ✅ `render the promo as MP4; export just the lower-third overlay as transparent WebM` — transparency belongs to the layer meant to sit *over* other footage, not the finished full-frame film
<Note>
A transparent render also depends on the composition leaving `html` / `body` backgrounds unset — the transparency comes through only where nothing is painted. The workflow skills handle this; see the [Rendering guide](/guides/rendering#transparent-video) if you're hand-authoring an overlay.
</Note>
## Resolution and framerate
1920×1080 at 30fps is the default. Both cost real time when you raise them, and both are frequently asked for out of habit rather than need.
**4K** is a render-time flag — the composition stays at its authored size and Chrome supersamples it to 3840×2160. That buys crisp text, SVG, and CSS at any scale, but it does *nothing* for content already locked to a pixel grid: a 1080p `<video>`, a fixed-size `<canvas>`, or a sub-4K image gain no detail from it. And it isn't free — a 4K render is roughly **4× slower per frame** and produces a **3–5× larger file**. Ask for it when the delivery surface genuinely needs it (a 4K display, a client spec), not reflexively.
> Render this at 4K for the trade-show display.
**Framerate** follows the same logic: 60fps doubles the frames the engine captures and encodes. It's worth it for fast motion graphics destined for a high-refresh screen; it's wasted on a talking-head clip or a slow title sequence.
- ❌ `render in 4K 60fps` for a clip headed to Instagram — the platform will transcode it down anyway, and you paid the slow render for nothing
- ✅ say nothing for social; name `4K` (or `60fps`) only when the target actually resolves it
<Warning>
A few 4K constraints will stop a render before it starts (all grounded in the [4K guide](/guides/4k-rendering#constraints)): the target orientation must match the composition's aspect ratio, the scale must be a whole number (1080p → 4K is exactly 2×), and **4K cannot be combined with HDR** in one pass. If you need both, render HDR at composition resolution and upscale separately.
</Warning>
## HDR
HDR output is **HDR10 MP4** (H.265 10-bit, BT.2020) and it is *source-driven* — the render only goes HDR when your composition actually references HDR media (video tagged BT.2020 with PQ or HLG transfer, or a 16-bit PNG). Text, gradients, and GSAP animation are not HDR sources; a composition made entirely of them has nothing to render in HDR.
> This composition has an HDR drone clip — render it as HDR10.
By default HDR is auto-detected, so with a real HDR source in the project you often need to say nothing. Force it explicitly only to override the probe:
- "force HDR" → forces the HDR path even without a detected HDR source
- "force SDR" → forces standard range even when HDR sources are present
HDR is **MP4 only** (a transparent MOV/WebM request falls back to SDR) and it is **not available on Lambda** (distributed rendering is SDR-only). See the [HDR guide](/guides/hdr) for source requirements and verification.
## Where the render runs
Local rendering is the default and the right choice for the whole iteration loop. Reach for cloud rendering only when a single machine is the bottleneck:
> Render this on Lambda.
That routes to HyperFrames' AWS Lambda path, which fans the render across many parallel workers. It's the right call for renders that are **too long or too large for one host** — multi-minute videos, 4K masters, or large parallel batches — and it needs AWS credentials configured first. For dev-loop iteration, stay on local `render`; the round-trip is faster than any cloud dispatch. Lambda is SDR-only (no HDR) and bills by compute time; the [AWS Lambda guide](/deploy/aws-lambda) covers setup, cost shape, and the conservative concurrency default.
- ❌ `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
## 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:
1. Keep `preview` running and scrub the timeline — same runtime as the render, so what you see is what you get.
2. Iterate with `draft` renders when you need a real file to check.
3. Only when the cut is locked, ask for the final tier / resolution / format.
- ❌ `render the final 4K HDR master` on a cut you haven't watched end to end
- ✅ `draft render so I can check timing` → approve → `now the 4K final`
<Tip>
Rendering is user-gated by design — the agent pauses at preview and renders only when you approve. Use that pause to lock the cut before you pay for the expensive export.
</Tip>
## Related
<CardGroup cols={2}>
<Card title="Iterating" href="/prompting/iterating">Small targeted edits between renders, not re-specification</Card>
<Card title="Rules and anti-patterns" href="/prompting/rules-and-anti-patterns">Why over-speccing resolution and framerate backfires</Card>
<Card title="Rendering guide" href="/guides/rendering">Formats, quality presets, workers — the mechanics</Card>
<Card title="AWS Lambda" href="/deploy/aws-lambda">Cloud rendering setup and cost</Card>
</CardGroup>
docs/prompting/runtimes-and-3d.mdx
+77
View File
@@ -0,0 +1,77 @@
---
title: Runtimes and 3D
description: "GSAP is the default and you rarely name it - but real 3D, existing animation files, and scene transitions each have a runtime worth pinning in the prompt."
---
## Runtimes and 3D
HyperFrames animates through the [frame-adapter](/concepts/frame-adapters) pattern: any runtime that can answer "what should the screen look like at frame N?" plugs in and renders deterministically. [GSAP](/guides/gsap-animation) is the default adapter and covers most motion — you rarely need to name it. The cases below are the ones where the default choice can go wrong, so the prompt should pick the runtime for you.
## Real 3D → Three.js via the adapter
This is the one pin to state every time. For anything with genuine **depth, lighting, or a camera** — a rotating product, a scene you move through, surfaces that catch light — ask for Three.js explicitly:
> Build the scene in **Three.js via the adapter**: a product model on a turntable, one key light and a soft fill, slow rotation.
- ❌ `isometric cards floating in CSS 3D with perspective`
- ✅ `build the isometric scene in Three.js via the adapter, with real depth and lighting`
The engine rationale: CSS `perspective` transforms skew flat planes — they read flat the moment lighting or parallax matters, because there is no light source and no camera, only projected rectangles. Three.js is a first-party seek-safe runtime (`hf-seek` events plus `window.__hfThreeTime`), so a real 3D scene renders frame-accurately like everything else. This is a validated default, not a preference — treat "real 3D" as "Three.js" unless you specifically want a flat, stylized fake-3D look.
Camera moves are part of the same rule. A "drone orbit", dolly, or push-in only exists where there's an actual camera:
- ❌ `a drone-orbit camera move around the logo` (with no runtime named — CSS has no camera to orbit)
- ✅ `orbit the camera around the logo — Three.js via the adapter`
## Existing animation files → Lottie
If you already have a designed animation — an After Effects export, a `.json` or `.lottie` file, an icon animation from a designer — don't ask the agent to redraw it. Point at the file and ask for Lottie:
> Play this Lottie file (`assets/loader.lottie`) centered, then fade to the title.
The Lottie adapter seeks the existing animation frame-by-frame, so the designer's work renders exactly as authored. Asking the agent to recreate it in GSAP throws away the source and lands somewhere approximate.
## Simple UI and text motion → the default
Fades, slides, staggers, counters, kinetic type, hover-style reveals — the everyday motion — is what GSAP does natively, and it's already the default. You don't name a runtime here; you describe the motion (see [Premium motion](/prompting/motion)):
> The headline slides up per word, staggered 0.1s apart, easing out as it lands.
CSS keyframes and the Web Animations API are also supported adapters, worth naming only when you're bringing existing CSS `@keyframes` or WAAPI code you want kept as-is. For a fresh ask, let the default handle it.
## Scene-to-scene → shader transitions
Motion *within* a scene is one thing; the handoff *between* scenes is another. For a designed transition — a wipe, a glitch, a liquid dissolve — ask for a shader transition at that specific moment:
> Hard-cut between the first three scenes; use a **shader transition** (glitch) into the final logo scene.
Name the moments — shader transitions are for the two or three beats that deserve them, not every cut. See [Transitions](/prompting/transitions) for the vocabulary.
## Determinism surfaces in the prompt
Every runtime renders under the same [determinism](/concepts/determinism) contract: the frame clock is `t = frame / fps`, and there is **no wall clock, no live network at render time, and no unseeded randomness**. Two asks bump into this, so phrase them accordingly:
- ❌ `fetch the current BTC price and count up to it` — a render-time fetch isn't allowed; the render must be reproducible
- ✅ `count up to $67,400` (a fixed value baked in), or `read the target from a variable I pass at render time`
- ❌ `scatter 200 particles randomly` — unseeded randomness renders differently each frame and breaks reproducibility
- ✅ `scatter 200 particles from a seeded random layout` — say **seeded** and the positions are stable across frames and re-renders
The rule of thumb: anything the video needs to *know* must be present before rendering starts — baked in, or passed as a [variable](/prompting/variables-and-templating). Anything random must be seeded.
## Related
<CardGroup cols={2}>
<Card title="Frame adapters (concept)" icon="plug" href="/concepts/frame-adapters">
The seek-by-frame contract and the full list of supported runtimes.
</Card>
<Card title="Deterministic rendering" icon="lock" href="/concepts/determinism">
Why no live data and no unseeded randomness — the reproducibility guarantee.
</Card>
<Card title="Premium motion" icon="wand-magic-sparkles" href="/prompting/motion">
Describing everyday GSAP motion so it doesn't read as cheap.
</Card>
<Card title="Transitions" icon="film" href="/prompting/transitions">
Naming the scene-to-scene handoffs worth a shader transition.
</Card>
</CardGroup>
docs/prompting/transitions.mdx
+81
View File
@@ -0,0 +1,81 @@
---
title: Transitions
description: "Map energy and mood to named shader and CSS transition blocks, and prompt them per seam."
---
## 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.
Two families, both first-class:
- **[Shader transitions](/catalog/blocks/cross-warp-morph)** composite both scenes per-pixel on a WebGL canvas — they warp, dissolve, and morph in ways CSS cannot. Reach for these when the *handoff itself* is a moment (a hero reveal, a topic pivot with weight).
- **CSS transitions** animate the scene containers with opacity, transforms, clip-path, and filters. Simpler and lighter; reach for these for the 60–70% of ordinary scene changes where the content is just continuing.
Choose by the effect you want, not by which is easier. See also the transitions table in [vocabulary](/prompting/vocabulary).
## Energy → transition
Pick **one primary** transition for most scene changes, plus one or two accents for topic changes and the climax. Never use a different transition on every seam — that reads as chaos, not design.
| Energy | Shader primary | CSS primary | Feels like |
| ------ | -------------- | ----------- | ---------- |
| **Calm** (wellness, brand story, luxury) | [`cross-warp-morph`](/catalog/blocks/cross-warp-morph), [`thermal-distortion`](/catalog/blocks/thermal-distortion) | [`transitions-blur`](/catalog/blocks/transitions-blur), [`transitions-dissolve`](/catalog/blocks/transitions-dissolve) | Soft, slow, drifting |
| **Medium** (corporate, SaaS, explainer) | [`whip-pan`](/catalog/blocks/whip-pan), [`cinematic-zoom`](/catalog/blocks/cinematic-zoom) | [`transitions-push`](/catalog/blocks/transitions-push), [`transitions-cover`](/catalog/blocks/transitions-cover) | Clean, directional, decisive |
| **High** (promos, sports, music, launch) | [`ridged-burn`](/catalog/blocks/ridged-burn), [`glitch`](/catalog/blocks/glitch), [`chromatic-radial-split`](/catalog/blocks/chromatic-radial-split) | [`transitions-scale`](/catalog/blocks/transitions-scale), [`transitions-destruction`](/catalog/blocks/transitions-destruction), [`transitions-light`](/catalog/blocks/transitions-light) | Fast, punchy, aggressive |
## Mood → transition
Energy sets tempo; mood sets meaning. Describe the brand feeling and the agent picks a matching block.
| Mood | Shader | CSS |
| ---- | ------ | --- |
| **Warm / inviting** | [`light-leak`](/catalog/blocks/light-leak), [`thermal-distortion`](/catalog/blocks/thermal-distortion), [`cross-warp-morph`](/catalog/blocks/cross-warp-morph) | [`transitions-light`](/catalog/blocks/transitions-light), [`transitions-blur`](/catalog/blocks/transitions-blur) |
| **Cold / clinical** | [`gravitational-lens`](/catalog/blocks/gravitational-lens) | [`transitions-mechanical`](/catalog/blocks/transitions-mechanical), [`transitions-grid`](/catalog/blocks/transitions-grid) |
| **Editorial / magazine** | [`whip-pan`](/catalog/blocks/whip-pan) | [`transitions-push`](/catalog/blocks/transitions-push) |
| **Tech / futuristic** | [`glitch`](/catalog/blocks/glitch), [`chromatic-radial-split`](/catalog/blocks/chromatic-radial-split) | [`transitions-grid`](/catalog/blocks/transitions-grid) |
| **Tense / edgy** | [`ridged-burn`](/catalog/blocks/ridged-burn), [`glitch`](/catalog/blocks/glitch), [`domain-warp-dissolve`](/catalog/blocks/domain-warp-dissolve) | [`transitions-distortion`](/catalog/blocks/transitions-distortion) |
| **Playful / fun** | [`ripple-waves`](/catalog/blocks/ripple-waves), [`swirl-vortex`](/catalog/blocks/swirl-vortex) | [`transitions-3d`](/catalog/blocks/transitions-3d), [`transitions-radial`](/catalog/blocks/transitions-radial) |
| **Dramatic / cinematic** | [`cinematic-zoom`](/catalog/blocks/cinematic-zoom), [`gravitational-lens`](/catalog/blocks/gravitational-lens), [`domain-warp-dissolve`](/catalog/blocks/domain-warp-dissolve) | [`transitions-scale`](/catalog/blocks/transitions-scale) |
| **Premium / luxury** | [`cross-warp-morph`](/catalog/blocks/cross-warp-morph), [`thermal-distortion`](/catalog/blocks/thermal-distortion) | [`transitions-blur`](/catalog/blocks/transitions-blur), [`transitions-dissolve`](/catalog/blocks/transitions-dissolve) |
| **Retro / analog** | [`light-leak`](/catalog/blocks/light-leak) | [`transitions-light`](/catalog/blocks/transitions-light) |
Special-purpose seams: [`flash-through-white`](/catalog/blocks/flash-through-white) for a bright cut on an impact beat, [`sdf-iris`](/catalog/blocks/sdf-iris) for a clean iris reveal into a hero shot.
## Example prompts
Name the block and the seam — transitions are the one place where per-seam control usually beats letting the agent decide.
> /general-video Six-scene SaaS explainer. Use [`whip-pan`](/catalog/blocks/whip-pan) as the primary transition between related points, and one [`cinematic-zoom`](/catalog/blocks/cinematic-zoom) into the final pricing reveal. Medium energy, ~0.4s each.
> Between beats 2 and 3, transition with [`swirl-vortex`](/catalog/blocks/swirl-vortex); keep every other seam on a plain blur crossfade.
> Warm transitions for this wellness brand — [`light-leak`](/catalog/blocks/light-leak) between scenes, nothing sharp or mechanical. Slow, 0.6–0.8s.
> Music promo, high energy. [`glitch`](/catalog/blocks/glitch) on the phrase changes, [`ridged-burn`](/catalog/blocks/ridged-burn) on the drop. Fast cuts, 0.15–0.25s.
## Knobs
- **Duration** follows energy: calm 0.5–0.8s, medium 0.3–0.5s, high 0.15–0.3s. Say a number to pin it.
- **Primary + accents.** One primary carries most seams; spend your boldest accent on the climax. State the split ("`whip-pan` throughout, one `ridged-burn` on the reveal").
- **Per-seam placement.** "on phrase changes," "between beats 2 and 3," "into the final scene" all bind a transition to a specific cut.
- **Blur intensity** (CSS blur crossfades): heavier (20–30px) for calm, light (3–6px) for high energy.
- **Easing presets:** `snappy`, `smooth`, `gentle`, `dramatic`, `instant`, `luxe` map to tuned duration/ease pairs.
## Failure modes
**Don't fade the outgoing scene out, then fade the next one in.** The renderer holds each scene's final state, so an explicit fade-out followed by an entrance renders as a jump cut with a dip in the middle — not a transition. The transition *is* the exit; both scenes hand off at the same instant.
- ❌ `fade scene 1 out, then fade scene 2 in`
- ✅ `cross-warp-morph from scene 1 to scene 2`
**Don't ask for a different transition on every seam.** A new effect at each cut reads as noise; consistency is what makes the one bold accent land.
- ❌ `use a different transition between each scene`
- ✅ `whip-pan as the primary, one glitch on the hero reveal`
**Don't leave "add transitions" unqualified when tone matters.** Bare requests get a sensible default; if the brand feeling is load-bearing, name the energy or mood (see [the specification dial](/prompting/specification-dial)).
- ❌ `add some transitions`
- ✅ `medium-energy editorial transitions — whip-pan primary`
**Don't invent transition names.** Only the blocks in the [shader](/catalog/blocks/cross-warp-morph) and CSS transition groups exist; a made-up name (`page-curl`, `star-iris`) sends the agent guessing at raw GLSL or an unsupported CSS effect.
- ❌ `add a page-curl transition`
- ✅ pick a real block, e.g. `sdf-iris` for an iris reveal
docs/prompting/variables-and-templating.mdx
+78
View File
@@ -0,0 +1,78 @@
---
title: Variables and templating
description: "Ask for the parts that should change to become named slots, then re-render the same composition with different values - one output per record."
---
## Variables and templating
Most videos have a few things that vary and a lot that doesn't. When you know a composition will be reused — a card per customer, a stat per quarter, a name per recipient — say so in the prompt, and name the parts that change. The agent turns them into declared [variables](/concepts/variables): typed, labeled slots filled at render time instead of hardcoded into the HTML.
The trigger phrase is simple — call out the slots:
> Build a 6-second title card. Make the **name**, the **logo**, and the **accent color** variables; everything else stays fixed.
The agent declares `data-composition-variables` on the composition root with the right type for each slot — `string` for the name, `color` for the accent, and a `string` URL for the logo (the escape hatch for any media asset — image, video, audio, or logo). One composition, many fills.
## Say what type each slot is
The five variable types (`string`, `number`, `color`, `boolean`, `enum`) each render a different input in [Studio](/packages/studio) and validate differently at render time. You don't write the JSON — but naming the type in the prompt removes a guess:
> Variables: `plan` (enum: Free / Pro / Enterprise), `price` (number, shown as `$`), `featured` (boolean — toggles the ribbon), `headline` (text).
- ❌ `make the plan and price editable`
- ✅ `plan is an enum (Free / Pro / Enterprise); price is a number in dollars`
The engine rationale: an `enum` with declared options gets validated against that list at render time (`enum-out-of-range` is caught), and a `number` with a `unit` renders `$` formatting the odometer needs. A vague "editable" leaves the agent to pick a type, and a mistyped value only surfaces later.
## Template, then render one per record
Once the varying parts are variables, the same source renders once per data row. This is a real batch mode, not a copy-paste-per-video loop — the composition is authored once and fed a list of value sets:
> Build this as a template with `name` and `title` variables, then render one video per row of my data — output to `renders/{name}.mp4`.
The agent authors the composition, then runs a [batch render](/concepts/variables#batch-renders): a JSON array where each row is one set of variable values, one output file per row, with `{key}` placeholders in the output path drawn from each row. If your source is a CSV, say so — the agent converts it to the row array the batch expects. Add "fail on any undeclared or mistyped value" and it renders with `--strict-variables`, so a typo in a column name stops the run instead of silently rendering the default.
Everything shares one composition, so a design fix propagates to every output on the next render — you're not editing a hundred near-duplicate files.
## Personalization asks
Personalized-at-scale videos are the same pattern with the value set coming from your data:
> A 10-second welcome clip that greets each new signup by first name and shows their company logo. I'll supply a list of `{ firstName, logoUrl }` records.
The `firstName` is a `string`; the `logoUrl` is a `string` variable your composition assigns to an `<img src>`. Pass assets as **URL references, not inlined data** — URL-shaped values travel cleanly through both the local renderer and distributed [Lambda renders](/deploy/templates-on-lambda). If you're wiring this behind your own product UI or an agent rather than the CLI, the [`@hyperframes/sdk`](/packages/sdk) opens a base template and layers a sparse override set per instance, so the host stores only each record's delta.
## Declare up front — don't bake values in
The most common miss is describing the finished video with the values already fixed, then asking to "make it reusable" afterward:
- ❌ `Make a card that says "Acme — Pro plan — $49". Later I'll want other companies too.`
- ✅ `Make a plan card. Variables: company (text), plan (enum), price (number, $). Show "Acme / Pro / 49" as the default.`
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.
## 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:
- ❌ `make the video length a variable so each render can be a different duration`
- ✅ `author one composition per target length` — or vary a *clip's* duration (that one is re-read from the live DOM)
If total length must differ per output, that's a different root `data-duration` per render, not a variable. See [what can't be a variable](/concepts/variables#what-cant-be-a-variable) for the full list and the compile-time-vs-live-DOM rule behind it.
## Related
<CardGroup cols={2}>
<Card title="Variables (concept)" icon="sliders" href="/concepts/variables">
The mechanics: declaring types, per-instance overrides, batch renders, precedence.
</Card>
<Card title="@hyperframes/sdk" icon="code" href="/packages/sdk">
Template + sparse-override editing behind your own product UI or agent.
</Card>
<Card title="The specification dial" icon="gauge" href="/prompting/specification-dial">
How much to specify — and why naming the type is cheap precision.
</Card>
<Card title="Design systems and brand" icon="palette" href="/prompting/design-systems">
Brand tokens as variables that re-skin every reuse from one value.
</Card>
</CardGroup>
docs/prompting/vfx-and-liquid-glass.mdx
+99
View File
@@ -0,0 +1,99 @@
---
title: VFX and liquid glass
description: "Prompt device mockups, liquid-glass UI, shatter/portal/magnetic moments, and ambient polish — and know which effects need the canvas pipeline."
---
## VFX and liquid glass
This is the showy end of the catalog: 3D device mockups, frosted-glass Apple UI, and cinematic moments where HTML shatters or gets sucked through a portal. Two groups do the work — the [HTML-in-Canvas](/catalog/blocks/vfx-iphone-device) blocks (real WebGL, live HTML rendered as GPU textures) and the [Effects](/catalog/components/vignette) components (lightweight CSS polish). Knowing which is which is the difference between an effect that renders and one that surprises you. All of it slots into the [one-shot skeleton](/prompting/anatomy) at the "technique" step.
### Device mockups
To put your product UI inside a real phone or laptop, name [`vfx-iphone-device`](/catalog/blocks/vfx-iphone-device) — real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, a product-review camera choreography, and a 360° turntable. For a styled iOS/macOS *environment* (home screen, desktop, dock) rather than a bare device, reach for the liquid-glass system blocks below.
> /product-launch-video 15-second 1920x1080 video. Our dashboard UI lives on the screen of a real iPhone 15 Pro Max that turntables slowly under product-review lighting, then a MacBook Pro slides in beside it showing the same UI wider. Use the `vfx-iphone-device` registry block. No narration.
**Ask for the device *and* what's on its screen.** The block renders live HTML into the screen — if you don't say what UI, you get an empty device.
- ❌ `show my app on an iPhone`
- ✅ `our dashboard UI on the screen of the iPhone 15 Pro Max, turntabling`
### Liquid-glass UI treatments
The liquid-glass blocks are frosted-glass Apple-style UI floating over an aurora shader background. Pick by the surface you want:
| You want… | Name this block | Length |
| ------------------------------------------------ | ---------------------------------------------------------------- | ------ |
| A full iOS 26 home screen on a 3D iPhone | [`ios26-liquid-glass`](/catalog/blocks/ios26-liquid-glass) | 15s |
| A macOS Tahoe desktop on a 3D MacBook | [`macos-tahoe-liquid-glass`](/catalog/blocks/macos-tahoe-liquid-glass) | 15s |
| Glass notification cards | [`liquid-glass-notification`](/catalog/blocks/liquid-glass-notification) | 8s |
| A glass context menu | [`liquid-glass-context-menu`](/catalog/blocks/liquid-glass-context-menu) | 8s |
| Glass media / playback controls | [`liquid-glass-media-controls`](/catalog/blocks/liquid-glass-media-controls) | 8s |
| Glass stat cards, panels, pill chips | [`liquid-glass-widgets`](/catalog/blocks/liquid-glass-widgets) | 8s |
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.
**"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`
- ✅ `use the `liquid-glass-widgets` registry block for the stat cards`
### Shatter, portal, magnetic, and cursor moments
The `vfx-*` blocks are single cinematic beats — spend them on a transition or a reveal, not a whole video:
| The moment | Name this block | Length |
| ------------------------------------------------ | --------------------------------------------------- | ------ |
| HTML shatters into glass fragments | [`vfx-shatter`](/catalog/blocks/vfx-shatter) | 12s |
| A dimension breach with volumetric light | [`vfx-portal`](/catalog/blocks/vfx-portal) | 10s |
| A magnetic-field particle visualization | [`vfx-magnetic`](/catalog/blocks/vfx-magnetic) | 15s |
| HTML floating over an organic liquid surface | [`vfx-liquid-background`](/catalog/blocks/vfx-liquid-background) | 12s |
| A dramatic text reveal with chromatic shadow rays | [`vfx-text-cursor`](/catalog/blocks/vfx-text-cursor) | 8s |
> /motion-graphics 8-second 1920x1080 video. Beat 1 (0-4s): a landing-page hero holds under directional light. Beat 2 (4-6s): the whole page shatters into glass fragments that scatter. Beat 3 (6-8s): bold white text slams in on black. Use the `vfx-shatter` registry block. No narration, no image or media files.
**Name the exact effect — "explode," "break," "burst" don't map.** Each block is a specific simulation.
- ❌ `make the UI explode`
- ✅ `the page shatters into glass fragments` → `vfx-shatter`, or `gets pulled through a portal` → `vfx-portal`
### Ambient polish
The [Effects](/catalog/components/vignette) components are lightweight, pure-CSS finishing passes you layer *on top* of a finished scene — grain, vignette, a light sweep, a subtle push:
| Say this | Component |
| ------------------------------ | ------------------------------------------------------ |
| Film grain / texture | [`grain-overlay`](/catalog/components/grain-overlay) |
| Darkened cinematic edges | [`vignette`](/catalog/components/vignette) |
| A light sweep across text | [`shimmer-sweep`](/catalog/components/shimmer-sweep) |
| Slow push-in on a card | [`parallax-zoom`](/catalog/components/parallax-zoom) |
| Card pulls back to reveal siblings | [`parallax-unzoom`](/catalog/components/parallax-unzoom) |
| Screen dissolves into a grid | [`grid-pixelate-wipe`](/catalog/components/grid-pixelate-wipe) |
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.
**Reach for grain over a literal freeze.** The engine holds the final state exactly as written.
- ❌ `logo appears and holds still to the end`
- ✅ `logo settles, then a grain overlay and slow push keep the hold breathing` (see [ambient idle](/prompting/motion))
### When an effect needs the canvas pipeline
The distinction that trips people up: the **HTML-in-Canvas blocks are not CSS**. The device mockups, liquid-glass stages, and `vfx-*` blocks render live DOM into WebGL textures via the experimental `drawElementImage` API — which needs a Chrome flag. The [HTML-in-Canvas guide](/guides/html-in-canvas) documents the real behavior:
- **Rendering enables the flag automatically** (`--enable-features=CanvasDrawElement`), including inside Docker — so a video render of these blocks works with no setup.
- **Live preview in the Studio needs the flag turned on manually** (`chrome://flags/#canvas-draw-element` → *Enabled* → restart). Without it, these blocks fall back rather than showing the effect in preview.
- The blocks **feature-detect and degrade gracefully**, so a browser without the flag won't crash — it just won't show the WebGL treatment.
The Effects components above have none of this — they're plain CSS and animate everywhere, preview included. So if you need something visible in Studio preview today with zero setup, prefer the CSS Effects; the HTML-in-Canvas group is where the flag caveat lives.
<Warning>
Don't promise a stakeholder a live Studio preview of a liquid-glass or device block without confirming the Chrome flag is enabled on that machine — the rendered MP4 is unaffected, but the in-browser preview may fall back. See the [HTML-in-Canvas guide](/guides/html-in-canvas).
</Warning>
### Where to go next
- [Anatomy of a one-shot prompt](/prompting/anatomy) — the skeleton, and quoting on-screen copy.
- [Motion that reads premium](/prompting/motion) — the ambient-idle rule these polish layers serve.
- [Copy-paste examples](/prompting/examples) — a shatter-into-text prompt to adapt.
- [HTML-in-Canvas guide](/guides/html-in-canvas) — how `drawElementImage` works and the flag details.