diff --git a/docs/custom.css b/docs/custom.css
index baa38450b8c..92e7f7904ce 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -153,19 +153,20 @@ h3 {
/* ── Workflow routing ── */
.hf-workflow-routes {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1.75rem 1.25rem;
margin: 1.5rem 0;
- border-top: 1px solid var(--hf-border-color);
}
.hf-workflow-route {
- display: grid;
- grid-template-columns: 11rem minmax(0, 1fr);
- gap: 1rem;
- align-items: center;
- padding: 1rem 0;
- border-bottom: 1px solid var(--hf-border-color);
+ display: flex;
+ flex-direction: column;
+ gap: 0.6rem;
color: inherit;
text-decoration: none;
+ border-bottom: 0 !important;
+ box-shadow: none !important;
}
.hf-workflow-route:hover .hf-workflow-route-title {
@@ -210,9 +211,8 @@ h3 {
}
@media (max-width: 639px) {
- .hf-workflow-route {
- grid-template-columns: 7rem minmax(0, 1fr);
- gap: 0.8rem;
+ .hf-workflow-routes {
+ grid-template-columns: 1fr;
}
}
@@ -1359,6 +1359,11 @@ header.is-frame ~ #body-content #content-area {
.hf-shelf p { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.45; }
@media (max-width: 640px) { .hf-shelf { grid-template-columns: minmax(0, 1fr); } }
+/* Two results side by side (comparisons) */
+.hf-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
+.hf-versus p { margin: 0 0 0.4rem; font-size: 0.9375rem; }
+@media (max-width: 640px) { .hf-versus { grid-template-columns: minmax(0, 1fr); } }
+
/* Short looping clips that show where a control is, floated beside the text that names it */
.hf-spot { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.6rem; background: rgb(0 0 0 / 0.06);
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); margin: 0.25rem 0 1rem 1.25rem; }
diff --git a/docs/docs.json b/docs/docs.json
index 841ecdf7662..b0a82584133 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -90,17 +90,6 @@
"group": "Prompt Guide",
"pages": [
"prompting/overview",
- {
- "group": "Level 1 — Your first video",
- "pages": [
- "prompting/product-launch",
- "prompting/explainers",
- "prompting/code-and-prs",
- "prompting/captions-and-talking-heads",
- "prompting/music-and-slideshows",
- "prompting/motion-graphics"
- ]
- },
{
"group": "Level 2 — Control",
"pages": [
@@ -1290,6 +1279,36 @@
"source": "/sdk/overview",
"destination": "/sdk/quickstart",
"permanent": true
+ },
+ {
+ "source": "/prompting/product-launch",
+ "destination": "/guides/product-launch-video#prompts-that-work",
+ "permanent": true
+ },
+ {
+ "source": "/prompting/explainers",
+ "destination": "/guides/faceless-explainer#prompts-that-work",
+ "permanent": true
+ },
+ {
+ "source": "/prompting/code-and-prs",
+ "destination": "/guides/pr-to-video#prompts-that-work",
+ "permanent": true
+ },
+ {
+ "source": "/prompting/captions-and-talking-heads",
+ "destination": "/guides/captions-and-recuts#prompts-that-work",
+ "permanent": true
+ },
+ {
+ "source": "/prompting/music-and-slideshows",
+ "destination": "/guides/music-to-video#prompts-that-work",
+ "permanent": true
+ },
+ {
+ "source": "/prompting/motion-graphics",
+ "destination": "/guides/motion-graphics#prompts-that-work",
+ "permanent": true
}
],
"integrations": {
diff --git a/docs/guides/avatar-presenter.mdx b/docs/guides/avatar-presenter.mdx
index 41ff85e1b23..6fb8270e71f 100644
--- a/docs/guides/avatar-presenter.mdx
+++ b/docs/guides/avatar-presenter.mdx
@@ -1,96 +1,58 @@
---
-title: "Add an avatar presenter"
+title: "Add an AI avatar presenter to a video"
sidebarTitle: "Avatar presenter"
-description: "Create or reuse a presenter clip, keep it as project media, and combine it with editable HyperFrames scenes."
+description: "Put a HeyGen avatar on screen to present your video, with HyperFrames building the scenes, graphics and captions around them."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
-Use an avatar when a person should speak on screen. Use HyperFrames for the
-parts around that person: layouts, product scenes, captions, graphics, timing,
-music, and the final composition.
+An avatar is a HeyGen presenter who reads your script on camera. HyperFrames builds everything around them: the
+scenes, charts, captions and music, all still editable.
-
-
-
+
-## Choose the right path
+*A presenter explains benchmark results while the charts and numbers are built around them.*
-**The presenter is the whole video.** Use HeyGen Video Agent or an avatar-video
-workflow. The result is a rendered HeyGen video, not an editable HyperFrames
-composition.
+## Make it
-**The presenter is one part of a designed video.** Generate the presenter clip,
-keep it as a local project asset, then compose the rest in HyperFrames. This is
-the path below.
-
-**You already recorded a person.** Skip avatar generation. Bring the footage
-into the project and choose [captions, designed overlays, or a real recut](/guides/captions-and-recuts).
-
-## Ask for the complete result
-
-Tell the agent what the presenter contributes and what remains editable:
+In the Studio app or with your own agent, say where the presenter appears and what they say:
```text
-Using /hyperframes, make a 20-second product update.
-Use a generated presenter only for the opening sentence.
-Build the product scenes, captions, and ending in HyperFrames.
-Keep the presenter clip as a local project asset.
-```
-
-The agent may ask you to sign in to HeyGen before it generates the clip. Check
-the active account first:
-
-```bash
-npx hyperframes auth status
+A 30-second product update. A presenter opens with: "This week we shipped three things."
+Then show each feature full screen with captions, and bring the presenter back to close.
```
-Run `npx hyperframes auth login` if no account is active. Avatar generation can
-use the allowance or credits attached to that account; confirm the account and
-usage before starting a long or repeated run.
+Name the avatar and voice if you have them (your own digital twin, or one from HeyGen's library), or describe who
+you want and let the agent pick. Avatars are made by HeyGen, so they need your HeyGen account: in the Studio app add a
+HeyGen API key; with your own agent, install the [HeyGen CLI](https://developers.heygen.com/cli) and sign in with
+`heygen auth login --oauth`. Avatars use HeyGen credits: your plan's credits with that sign-in, API credits with an
+API key.
-## Build around the clip
-
-Once the presenter video exists:
-
-1. Keep the original file inside the project.
-2. Place and trim it like any other video clip.
-3. Transcribe the real speech before styling captions.
-4. Add product scenes or graphics only where they support what is being said.
-5. Render and watch the complete file with sound.
-
-Use **Assets → Import media** in Studio, or ask the agent to add the generated
-file. If the presenter must sit over a designed background, create a transparent
-version locally:
-
-```bash
-npx hyperframes remove-background assets/presenter.mp4 \
- -o assets/presenter-transparent.webm
-```
+**Already recorded yourself?** Skip the avatar: add your clip and see
+[captions and recuts](/guides/captions-and-recuts). **Want only the presenter, nothing designed around them?** Make it
+in HeyGen directly; it won't be an editable HyperFrames project.
-Background removal is optional. Keep the original background when it already
-belongs in the shot or when difficult hair, hands, or motion produce a weak
-matte.
+## What it can do around the presenter
-## Check the result
+- Put them beside, in front of or behind your scenes. With the background removed
+ ([how](/guides/remove-background)), titles can pass behind them.
+- Cut away to full-screen product shots or charts and back.
+- Caption what they actually said, word by word.
+- Keep the clip as a file in the project, so the render never depends on a download.
-- The presenter says the approved words with the intended voice.
-- Captions match the actual audio, including names and numbers.
-- The person does not cover the product or another important visual.
-- Music stays below speech.
-- Generated and source media are stored locally rather than fetched during render.
-- The final file has been watched once from beginning to end.
+## Check before you share
-For manual avatar, voice, and image-to-video controls, use the current
-[HeyGen CLI guide](https://developers.heygen.com/cli) and
-[Create Video reference](https://developers.heygen.com/reference/create-video).
+- The presenter says the approved words, with names and numbers right.
+- They never cover the product or the point of the shot.
+- Music stays under the voice.
+- You watched the whole thing once, with sound.
## Related topics
-- [Work with captions and talking-head footage](/guides/captions-and-recuts)
-- [Work with all project media](/guides/media)
-- [Remove the presenter's background](/guides/remove-background)
+- [Remove a video background](/guides/remove-background)
+- [Add captions to a video](/guides/captions-and-recuts)
+- [HeyGen CLI and avatar options](https://developers.heygen.com/cli)
diff --git a/docs/guides/captions-and-recuts.mdx b/docs/guides/captions-and-recuts.mdx
index c379d4546bd..ce684eaf6d2 100644
--- a/docs/guides/captions-and-recuts.mdx
+++ b/docs/guides/captions-and-recuts.mdx
@@ -1,11 +1,13 @@
---
-title: "Add captions or repackage talking-head footage"
-sidebarTitle: "Captions and talking head"
-description: "Add captions, add designed overlays, or change the spoken edit."
+title: "Add captions to a video with AI"
+sidebarTitle: "Captions"
+description: "Give it your talking-head clip and get captions, designed cards, or a tighter cut with the long pauses removed."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
+Give it your talking-head, interview or podcast clip. You get captions timed to the words, designed cards (titles,
+quotes, numbers, lower thirds), or a tighter cut with the long pauses removed.
Add captions to ./interview.mp4. Clean verbatim rail carrying the spoken words, readable lower-third. Promote the single hardest-hitting word to an embed behind the speaker; highlight one key word in each rail line. Keep the source aspect ratio. Footage stays untouched.
+
+
+*Made from the prompt above on generated presenter footage: one embed behind the speaker, everything else on the rail.*
+
+
+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.
+
+### Designed cards
-Both leave the clip and its audio untouched: the first adds words, the second adds
-graphics, and the footage plays the same underneath either way.
+> 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.
-Captions and designed overlays work best on a clear, single-subject clip with audible speech. Both keep the original footage and audio intact.
+You describe the *cards* — their content, timing, and how the speaker shares the canvas with them (full-bleed, split, PiP, or glass overlay). The agent designs and writes each card; there's no fixed archetype list, so the overlays follow what the transcript actually says.
-If you need to remove pauses, choose different moments, or reorder the speech, make a [custom video](/guides/general-video).
+### Say these when they matter
-## Before it builds
+**Look and tone (captions).** Describe the look by content: explainer / interview / must-read words → a clean readable rail; poetic / social / cinematic → hero typography behind the speaker; hype → bolder, punchier type. Unsure → a clean rail: the words read and the scene stays safe. Ready-made caption styles are in the [captions catalog](/prompting/captions-catalog).
-Settle these in the request, or ask the agent to propose them first:
+**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 agent *which* lines earn the embed; leave the rest on the rail.
-- **Captions:** the intended format and any names or terms the transcript may miss. HyperFrames can recommend a visual treatment after it sees the clip.
-- **Designed overlays:** the format, layout, visual style, and how often a title, quote, statistic, or side panel should appear.
-- **Either path:** where the speaker, existing text, and important action leave safe room for graphics.
+**Style, layout, and canvas (overlay cards).** Name a style (warm paper, clinical, …), a layout (split / stack / PiP / overlay), and a canvas ratio. Matching the source ratio is the safe default, 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.
+
+### Variants
+
+
+
+ > Cinematic captions on ./poem.mp4 — no rail, lowercase-italic hero typography composited behind the speaker, words accumulating as a column. One apex word per thought, air between them. 4:5. Never grade the footage.
+
+ Dropping the rail and setting everything behind the speaker suits poetic / social / "cinematic" asks where mood beats strict readability, never on an explainer where the words must read.
+
+
+ > Add verbatim captions to ./outdoor-vlog.mp4. It's a bright daylight scene, so use near-black type printed onto the surface — not a light-on-bright look that washes out. Keep it a readable rail. 16:9.
+
+ Light, screen-blended type washes out over bright backdrops (brightness above ~180); dark, opaque type holds. Match the look to the scene.
+
+
+ > Bring the energy on ./hype-clip.mp4 — I want the captions to hit hard: a stamped verbatim rail with a detonation apex. Rail carries the verbatim; the payoff line is the setpiece. 9:16.
+
+ Name the treatment — stamped type, a detonation on the payoff line — instead of "make it explode". The a-roll is still never graded.
+
+
+ > 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; left unstated, card density follows the clip's length — roughly one card every 12–20 seconds on a 5-minute clip.
+
+
+
+### Common mistakes
+
+**Captioning before cutting.** Captions are timed to the clip as it is. Cut first, then caption, or the captions
+drift off the words.
+- **Avoid:** `add captions, then remove the pauses`
+- **Instead:** `remove the pauses, then add captions to the cut`
+
+**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.
+- **Avoid:** `composite every caption behind the speaker for a cinematic look` (on an explainer)
+- **Instead:** `verbatim rail; promote only the two payoff lines to an embed`
+
+**Multi-subject clips.** Text behind the speaker is matted against one person; two speakers or hard cuts make it flicker.
+- **Avoid:** `caption this two-person podcast in one pass`
+- **Instead:** `split the clip per shot / per speaker first, then caption each` — or use a single-subject cut.
## Review what matters
@@ -64,17 +130,11 @@ Settle these in the request, or ask the agent to propose them first:
- The video works with sound and muted.
- The final caption or graphic clears before the video ends.
-For direct placement changes, use [Captions in Studio](/studio/captions) to
-inspect synchronization and save position, scale, or rotation corrections. Ask
-the agent or edit the caption source for corrected words and durable timing or
-style changes.
-
-To import replacement words, run `hyperframes transcribe transcript.json --dir ./my-video`.
-This replaces the full transcript in existing caption HTML and keeps the surrounding caption code.
+Then [change it](/studio-app/edit-with-the-agent): ask the agent for corrected words or timing, or move a caption by hand
+in the editor.
-
- Review the chosen caption, overlay, or recut path, then render and watch the final file.
-
+To import corrected words from a transcript file, run `hyperframes transcribe transcript.json --dir ./my-video`.
+It replaces the full transcript in the existing captions and keeps the caption code around it.
## Related topics
diff --git a/docs/guides/faceless-explainer.mdx b/docs/guides/faceless-explainer.mdx
index 98a248071a1..f437ba3bfa9 100644
--- a/docs/guides/faceless-explainer.mdx
+++ b/docs/guides/faceless-explainer.mdx
@@ -1,6 +1,6 @@
---
-title: "Create a faceless explainer"
-sidebarTitle: "Faceless explainer"
+title: "Make an explainer video with AI"
+sidebarTitle: "Explainer"
description: "Turn notes, an article, or a difficult idea into a visual explanation without product footage."
---
@@ -18,18 +18,40 @@ Start from a topic, article, or notes. HyperFrames invents the typography, diagr
Kinetic type, an abstract graphic, a diagram, and a data-visualisation — all
invented from the text. There is no source video anywhere in this.
-## Make the request
+## Explainers made with HyperFrames
-Attach or paste the source material:
+Any style works. The same request comes back as a woodblock print, a 3D tutorial or a hand-drawn diagram depending on
+what you show it.
+
+
+
+
+
The journey of "k": how one letter crosses the ocean. Woodblock prints, made with the skills.
+
+
+
+
How phone GPS works: made in the Studio app from a reference video, in its style.
+
+
+
+
Axe chop: a 3D how-to, step by step.
+
+
+
+## Make it
+
+**Start from an explainer you like.** In the Studio app, open **Reference** on Home and paste its link (YouTube,
+TikTok, Instagram or X), upload the file, or choose one under **Pick a reference**. Then say what yours is about: you
+get that pacing and drawing style, about your topic. You don't have to love all of it; one thing you like is
+enough to start from. Reference uses your HeyGen API key, and the app asks for it the first time.
+
+**Or describe it** in **Make something**, with your notes attached or pasted:
```text
-Using /hyperframes, turn these notes into a short visual explainer for a
-general audience: [paste notes]
+Turn these notes into a 60-second explainer for people new to the topic: [paste notes]
```
-Say which facts or wording must stay exact, and ask the agent to propose the
-teaching angle first if you want to choose it. A topic alone is enough to begin;
-a script is useful only when its words are already approved.
+Say which facts or wording must stay exact. With your own agent instead of the app, start the message with `/hyperframes`.
## How should the idea land?
@@ -49,6 +71,115 @@ HyperFrames does not turn each paragraph into a scene. It finds the teaching spi
The visuals share one coherent language and develop with the explanation. A diagram should reveal a mechanism; a chart should prove a claim; motion should show what changes.
+## Prompts that work
+
+Paste your text into one message.
+That is enough for a finished explainer. No site, no footage, no design
+decisions yet.
+
+Verified, from the [examples](/prompting/examples) page — a ~60-second vertical
+explainer from pasted text:
+
+> 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.
+
+
+*Made from the prompt above.*
+
+
+Note the `~`. When you supply a 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.
+
+### Say these when they matter
+
+You can steer all of these from the prompt, before you have learned any
+technique.
+
+| Knob | What to say | Why it matters |
+| --- | --- | --- |
+| **Verbatim vs summarized** | "use my wording verbatim" or "restructure it freely" | 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 leave nothing to build the motion around. It reads as a text dump. |
+| **Angle** | "concept" / "how-to" / "listicle" / "story" | The angle decides the story shape. The agent reshapes your text into it instead of reading your paragraphs in order. |
+| **Caption style** | "embedded captions, keywords highlighted in the accent color" | Captions are burned in. Naming the highlight color ties them to your palette instead of a default pill. |
+| **Palette** | "brand color #FF5533 on off-black" | There is no site to borrow from, so the agent picks a palette. A named accent and ground personalize it. |
+| **Voice** | "male TTS voice, calm" / "warm female voice" | Gender and tone are prompt words. The provider is the agent's decision. |
+
+
+ Scene density is the single biggest quality lever here. "One idea per scene"
+ turns a dense paragraph into a paced sequence. The agent reorders and
+ compresses your text to hit it. That is what makes an explainer teach instead
+ of recite.
+
+
+### Variants
+
+
+
+ > Make a ~30-second 1920x1080 explainer on how HTTPS keeps a request private, for a non-technical audience — the takeaway: your data is sealed before it leaves the browser. Concept angle: one idea per scene, big geometric type, a simple lock-and-key diagram as the centerpiece (swap the metaphor with the topic). Near-black ink on off-white with a deep-blue accent. Female TTS voice, warm and clear. Embedded captions, key terms highlighted in the accent color.
+
+ Shorter runtime, landscape for YouTube or an embed. Fewer scenes means the
+ topic has to compress. Naming the takeaway tells the agent what to keep.
+
+
+*Rendered from this prompt with the topic swapped to HTTP caching (cache diagram as the metaphor), unedited — 26s, because the narration sets the length.*
+
+
+
+ > 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. Every scene reuses the same
+ number-and-label shape. The result reads as a countdown, not a wall of
+ points.
+
+
+ > 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", or "a pipeline that fills left to
+ right". Let the agent invent the specifics.
+
+
+
+### Common mistakes
+
+**"60 seconds" instead of "~60 seconds".** Same rule as on the
+[product launch page](/guides/product-launch-video#prompts-that-work). It bites
+harder here, because the script is the whole video. You cannot know a supplied
+script's spoken duration until the TTS renders.
+
+- **Avoid:** `a 60-second explainer from this text: ...`
+- **Instead:** `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 is no clear thing to animate.
+
+- **Avoid:** `explain all five caching layers in one scene`
+- **Instead:** `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.
+
+- **Avoid:** `pull screenshots from the site and explain the feature`
+- **Instead:** that's a site or product video — give it the URL
+ ([product launch](/guides/product-launch-video#prompts-that-work))
+
+**Leaving the look unspecified when you care.** There is no brand to read, so
+the agent picks the palette. If you have colors, name them.
+
+- **Avoid:** `make it look on-brand`
+- **Instead:** `brand color #FF5533 on off-black`
+
+
## Review whether it teaches
- The opening creates a question, tension, or surprise.
@@ -66,5 +197,4 @@ Studio for a precise visual, timing, or animation correction.
## Related topics
-- [Prompt for explainers](/prompting/explainers)
- [Create a product video from real screens](/guides/product-launch-video)
diff --git a/docs/guides/general-video.mdx b/docs/guides/general-video.mdx
index 64d5d0efeb3..78c7553c76d 100644
--- a/docs/guides/general-video.mdx
+++ b/docs/guides/general-video.mdx
@@ -1,6 +1,6 @@
---
-title: "Create a custom video"
-sidebarTitle: "Custom video"
+title: "Make any other video"
+sidebarTitle: "Any other video"
description: "Combine sources, change existing footage, or co-direct a video when no single source decides the job."
---
@@ -16,19 +16,20 @@ Use this path when the work is genuinely custom: several source types, editable
/>
-## Make the request
+## Make it
-Describe the outcome and give the agent whatever source material already
-exists:
+**Show it a video that feels right.** Paste a link into **Make something**, or use **Reference** on Home, and say
+what to keep (the pacing, the look, the way it opens) and what yours is about. **Remix from inspiration** on Home
+has short moments from real videos to start from. Reference uses your HeyGen API key, and the app asks for it the first time.
+
+**Or describe the outcome** and attach what you have:
```text
-Using /hyperframes, make a one-minute recruiting film from the interview clips
-and office footage in assets. Keep the employees' own words central.
+Make a one-minute recruiting film from the interview clips and office footage I added.
+Keep the employees' own words central.
```
-Ask the agent to propose a treatment first when you want to agree on it before
-the build. Use this path when choosing the story together matters more than
-starting from one source.
+Ask for a treatment first when you want to agree on the story before the build. With your own agent instead of the app, start the message with `/hyperframes`.
## How should the agent work with you?
@@ -68,5 +69,5 @@ Before export, confirm:
## Related topics
-- [Choose what to make](/workflows)
+- [What do you want to make?](/workflows)
- [Edit the built project in Studio](/studio)
diff --git a/docs/guides/hyperframes-vs-remotion.mdx b/docs/guides/hyperframes-vs-remotion.mdx
index f0894e67422..b1b24f7d64e 100644
--- a/docs/guides/hyperframes-vs-remotion.mdx
+++ b/docs/guides/hyperframes-vs-remotion.mdx
@@ -1,17 +1,52 @@
---
-title: "HyperFrames or Remotion?"
-description: "The same three-second title card written in Remotion React and in HyperFrames HTML, plus an honest read on which tool fits your project."
+title: "HyperFrames vs Remotion"
+sidebarTitle: "vs Remotion"
+description: "The same launch video made by an agent with Remotion and with HyperFrames, side by side; the same title card in both codes; and an honest read on which fits your project."
---
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
Both tools make video out of web pages. Both open a real browser, draw each
frame, and encode the result. The difference is what you write.
Remotion asks for a React component. HyperFrames asks for an HTML file.
+## Same request, two agents
+
+We gave Claude Code (Opus 5.5) the same one-paragraph request twice: once with only Remotion's official agent skills
+installed, once with only HyperFrames'. One run each, no retries, nothing edited afterwards.
+
+> Make a 15-second 1920x1080 launch video for a fictional note-taking app called Inkwell (tagline: "Write it down. Find
+> it later."). Logo reveal, three short feature lines, then an end card with the tagline. No voice. Render the final MP4
+> to out.mp4 in this folder. Don't ask me questions; make the choices yourself.
+
+
+
+
Remotion
+
+
+
+
HyperFrames
+
+
+
+
+| | Remotion | HyperFrames |
+| --- | --- | --- |
+| Time to a rendered MP4 | 12 min 30 s | 11 min 50 s |
+| What it wrote | 10 TypeScript files, 1,037 lines | 4 HTML files, 822 lines |
+| Installed into the project | about 950 MB of `node_modules` | nothing |
+| Sound | none | a music bed and five sound effects it chose |
+
+Both are good videos; a single run decides nothing about quality. The difference that lasts is what you are left
+holding: a React project to keep building in code, or HTML files you can open in a browser, edit with an agent, or
+keep changing in the [Studio app](/studio-app/index).
+
+## The same title card, written both ways
+
Here is the same three seconds — a title that fades in, holds, and fades out —
written both ways. Neither version is padded or crippled to make a point.
-## The same title card, twice
**Remotion.** The component is a function of the current frame number. You do
the timing math yourself, in frames.
@@ -78,7 +113,6 @@ it is registered on `window.__timelines` under the same id as the root element.
Miss the last one and you get a still frame with no motion. The
[HTML schema](/reference/html-schema) lists every attribute.
-{/* VISUAL: side-by-side stills of both renders of this title card. No approved asset exists yet — do not add a URL until one does. */}
Neither file is obviously better. The Remotion one is a pure function you can
reason about in your head. The HyperFrames one is a page you can open in a
@@ -147,9 +181,9 @@ npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes
Then ask your agent to port the composition. It maps `useCurrentFrame` and
`interpolate` onto timeline tweens, `Sequence` onto clips, and converts frames
-to seconds. Roughly 80% of a typical composition translates mechanically.
+to seconds.
-The other 20% is the point of the skill. It refuses to translate what does not
+The harder cases are the point of the skill. It refuses to translate what does not
fit: React state machines built on `useState` or `useEffect`, async metadata,
third-party React UI libraries. Those get flagged instead of silently
mistranslated. It also grades its own output — it renders both versions and
diff --git a/docs/guides/motion-graphics.mdx b/docs/guides/motion-graphics.mdx
index 0017b10ed84..7bbda3cb338 100644
--- a/docs/guides/motion-graphics.mdx
+++ b/docs/guides/motion-graphics.mdx
@@ -1,6 +1,6 @@
---
-title: "Create a motion graphic"
-sidebarTitle: "Motion graphic"
+title: "Make motion graphics with AI"
+sidebarTitle: "Motion graphics"
description: "Make a short, motion-led title, statistic, chart, logo sting, or overlay."
---
@@ -18,18 +18,19 @@ Make a motion graphic for one short, design-led idea—usually under ten seconds
Short beats back to back, because that is what a motion graphic is — units of
motion small enough to drop into something else.
-## Make the request
+## Make it
-State the message and the short result:
+**Point at a motion you like.** Under **Remix from inspiration** on Home, **Motion graphics** holds short moments
+from real videos: choose **Add as inspiration** on one and say what yours should say. A link to any clip works
+too, in **Make something** or under **Reference**.
+
+**Or describe it** in a sentence:
```text
-Using /hyperframes, make a six-second motion graphic that counts from zero to
-10,000 and lands on “Thank you.” No narration.
+A six-second motion graphic that counts from zero to 10,000 and lands on "Thank you." No narration.
```
-Say whether you want a finished video or a transparent overlay when it could
-be either. Exact beat timings are optional unless a specific moment must land
-precisely.
+Say whether you want a finished video or a transparent overlay when it could be either. With your own agent instead of the app, start the message with `/hyperframes`.
## What are you animating?
@@ -51,6 +52,67 @@ If the result needs narration, several scenes, or a longer story, make a [custom
For an overlay, name where it should sit and how long it should hold. The first and final frames must clear cleanly.
+## Prompts that work
+
+The canonical shape: routed, spec'd, beat-timestamped, copy quoted, technique pinned, gaps closed.
+
+> 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." Adapt the `code-typing` and `vfx-shatter` registry blocks; hand-author the kinetic text. No narration, no image or media files.
+
+
+*Made from the prompt above.*
+
+### Say these when they 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 multi-scene 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).
+
+### Variants
+
+Each reuses a registry block, so the agent composes rather than hand-building from scratch.
+
+
+
+ > 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.
+
+
+ > 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, then holds with a subtle ambient idle (slow breathing scale). Use `code-particle-assemble` for the assembly.
+
+
+ > 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. Settle into a gentle ambient idle on the card at the end. Use the `x-post` and `vfx-liquid-background` registry blocks. No narration, no image or media files.
+
+
+ > 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.
+
+
+
+### Common mistakes
+
+**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.
+- **Avoid:** `an 8s full-screen stat count-up on dark navy — export as a transparent WebM`
+- **Instead:** `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 makes it a narrated video.
+- **Avoid:** `a 10s logo sting with a voice-over reading the tagline`
+- **Instead:** `a 10s logo sting, no narration` — for a spoken track, ask for a narrated explainer instead.
+
+**Stretching a short idea long.** Runtime is a knob, and past ~30s a single motion beat runs out of things to do.
+- **Avoid:** `a 45-second kinetic-type piece of one headline`
+- **Instead:** `an 8-second kinetic-type piece of one headline` — or promote it to a multi-scene video.
+
+
+ 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).
+
+
+
## Review the motion
- The words, data, source, and logo are exact.
@@ -79,6 +141,5 @@ music and sound, no narration, the motion carrying all of it.
## Related topics
-- [Prompt for motion graphics](/prompting/motion-graphics)
- [Edit animation and keyframes in Studio](/studio/animation)
- [Create a longer narrated video](/guides/general-video)
diff --git a/docs/guides/music-to-video.mdx b/docs/guides/music-to-video.mdx
index 94b1c00a99f..dd754d0fa06 100644
--- a/docs/guides/music-to-video.mdx
+++ b/docs/guides/music-to-video.mdx
@@ -1,6 +1,6 @@
---
-title: "Create a music-driven video"
-sidebarTitle: "Music video"
+title: "Make a music video or lyric video"
+sidebarTitle: "Music or lyric video"
description: "Cut footage, images, lyrics, and motion to a track’s beat grid."
---
@@ -16,17 +16,16 @@ Start with a music file—or a video whose audio should control the edit. Narrat
/>
-## Make the request
+## Make it
-Attach the track and any media that must appear:
+Add the track (and any photos or clips that must appear) in **Make something**:
```text
-Using /hyperframes, turn assets/song.wav and the photos in assets/tour into a
-30-second music-driven video.
+Turn this song and the tour photos into a 30-second video cut to the beat.
```
-The agent analyzes the real track before planning the cut. Mention a required
-section, lyric, image order, or delivery format when it cannot be chosen freely.
+**Have an edit you like?** Paste its link too and say "cut it like this": the agent matches its rhythm and
+transitions to your track. Mention a section, lyric or image order only when it can't be chosen freely. With your own agent instead of the app, start the message with `/hyperframes`.
## What should the track drive?
@@ -45,6 +44,73 @@ A rhythmic track can support cuts on its real beat grid. Calm or loose music sho
The visual treatments change at meaningful musical moments. More beats do not automatically mean more scenes.
+## Prompts that work
+
+The verified starting point: photos cut to a track, exported to a square MP4.
+
+> 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.
+
+
+*Made from the prompt above.*
+
+
+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*.
+
+### Say these when they matter
+
+**The beat grid.** The agent analyzes the track (`hyperframes beats`, `hyperframes audio`) for beats, onsets, and sections, 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 agent 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 carries 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.
+
+### Variants
+
+
+
+ > 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.
+
+
+ > 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.
+
+
+
+### Common mistakes
+
+**Hard track timestamps.** The whole point of a music video is that the track's structure sets the cuts. A literal time window ignores the analyzed beat grid and lands cuts mid-phrase.
+- **Avoid:** `use the section from 0:32 to 0:52`
+- **Instead:** `pick the best 20 seconds of the track`
+
+**Expecting an MP4 from a presentation.** A presentation is a live deck you click through; it doesn't export as one video file.
+- **Avoid:** `a slideshow deck, then render it to MP4`
+- **Instead:** `a music video from these photos` for a file to post, or `a presentation` to click through live
+
+**Wrong deliverable for the output.** Photos set to music that you'll export and post is a video; a thing you click through live is a presentation. Picking by the word "slideshow" alone builds the wrong deliverable.
+
+
+ The music prompts here are unnarrated; ask for a voice-over if you want one. For the six-part skeleton these prompts share, see [Prompt anatomy](/prompting/anatomy); for adjectives that map to eases and transitions, [Vocabulary](/prompting/vocabulary).
+
+
+A clause from a longer film prompt that makes the cuts follow the real beats, ready to lift:
+
+> **Rhythm (45–52s).** The wire becomes a waveform: **resolve the BGM first, run `hyperframes beats` on it, and drive this region on the detected grid** — the waveform pulses and compact media cards (a lyric line, a photo card, a chart flash) snap onto the wire on real analyzed beats while the camera keeps traveling; each snap gets a tick SFX. At least six beat-hits. SANCTIONED SEAM #2: the beat-hits may hard-cut card content ON the beat — the sanctioned exception, because the camera itself never stops moving through them.
+
+
+*Cuts landing on the detected beats of a real track (`npx hyperframes beats`).*
+
+
## Review the rhythm
- The correct section of the track is used.
@@ -65,4 +131,3 @@ section, media plan, or overall treatment must change.
- [Edit cuts and holds on the Studio timeline](/studio/timeline)
- [Work with voice, music, sound, and captions](/guides/voice-and-audio)
-- [Prompt for music videos and slideshows](/prompting/music-and-slideshows)
diff --git a/docs/guides/pr-to-video.mdx b/docs/guides/pr-to-video.mdx
index 60d2231dd34..33cca34c5db 100644
--- a/docs/guides/pr-to-video.mdx
+++ b/docs/guides/pr-to-video.mdx
@@ -1,52 +1,108 @@
---
-title: "Turn a pull request into a video"
-sidebarTitle: "Pull request"
-description: "Show what changed, why it matters, and what happens next."
+title: "Turn a GitHub PR into a video"
+sidebarTitle: "PR to video"
+description: "Paste a pull request link and get a short video of what changed and why it matters, for users, reviewers or social."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
-Give HyperFrames a pull request. It reads the diff, commits, files, and contributors—there is no website capture.
+Give it a pull request link. The agent reads the diff, the commits and who worked on it, then explains the change.
-
-
-
-## Make the request
+*A real pull request as a 32-second explanation: code, before and after, and sound.*
-Send the pull request and name the audience:
+## Make it
+
+Paste the pull request link into **Make something** and say who will watch:
```text
-Using /hyperframes, explain https://github.com/owner/repo/pull/123 to product
-and engineering teammates.
+Explain https://github.com/owner/repo/pull/123 to product and engineering teammates.
```
-The agent reads the actual pull request and checks its release state, so a
-proposed change is not presented as shipped behavior.
+The agent reads the actual pull request and checks whether it has shipped, so a proposed change is never shown as
+released. If your team already has a release video you like, add its link and ask for the same style. With your own agent instead of the app, start the message with `/hyperframes`.
+
+## Pick the story for the audience
+
+- **Users:** lead with the visible change, show before and after, name any action they must take.
+- **Contributors:** the architecture change, the tradeoff, the code path a reviewer needs.
+- **Social:** one feature reveal with visible proof and only the code that explains it.
+
+Say whether it's a changelog, a feature reveal, a fix or a refactor, and mention any breaking change. The video
+explains the change; it doesn't read the description aloud.
+
+## Prompts that work
+
+Verified, from the [examples](/prompting/examples) page — a 30-second feature reveal:
+
+> 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.
+
+
+*Made from the prompt above.*
-## Who needs to understand it?
+### Say these when they matter
-- **Users** — lead with the visible change, show the before and after, and name any action they must take.
-- **Contributors** — explain the architecture change, important tradeoff, and code path reviewers need to understand.
-- **Social audience** — make one clear feature reveal with visible proof and only the implementation detail that explains it.
+| 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 agent 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 agent sizes the video from the change — a huge PR is a ceiling on story, not a floor to fill |
-The same pull request needs a different story for users, contributors, or a social audience.
+### Variants
-## Before it builds
+
+
+ > 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, no captions.
-Settle these in the request, or ask the agent to propose them first:
+
+ *Rendered from this prompt with [PR URL] = heygen-com/hyperframes#2092, unedited.*
-- the intended pull request and audience;
-- whether the angle is a changelog, feature reveal, fix, or refactor;
-- whether the change is proposed, merged, or released;
-- the visible before and after;
-- any breaking change or migration step.
+ 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. A PR doesn't carry its shipping version — the agent finds it from the release tag or the package manifest on main.
+
+
+ > 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.
+
+
+ > 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.
+
+
+
+### Common mistakes
+
+**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.
+- **Avoid:** `walk through the entire diff, file by file`
+- **Instead:** `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.
+- **Avoid:** `start with the diff, then explain what it does`
+- **Instead:** `lead with what users get, then show the key hunk`
+
+**Hard-timing a narrated cut.** The spoken length sets the runtime, so give a range.
+- **Avoid:** `a 40-second narrated walkthrough`
+- **Instead:** `a ~40-second narrated walkthrough`
-The video should explain the change, not read the pull request description aloud.
## Verify the proof
@@ -57,15 +113,9 @@ The video should explain the change, not read the pull request description aloud
- Tests and refactoring are not presented as product features.
- Contributor names and release details are accurate.
-Ask the agent when the explanation or evidence must change. Use
-Studio for a precise timing, code-framing, or
-caption correction.
-
-
- Check the final project, render through your preferred surface, and review the file.
-
+Ask the agent when the explanation or the evidence must change; fix a timing, a code crop or a caption by hand in
+the editor.
## Related topics
-- [Prompt for code changes and pull requests](/prompting/code-and-prs)
- [Create a custom video from several sources](/guides/general-video)
diff --git a/docs/guides/product-launch-video.mdx b/docs/guides/product-launch-video.mdx
index d9f2fbd5867..4d2ab64c5f9 100644
--- a/docs/guides/product-launch-video.mdx
+++ b/docs/guides/product-launch-video.mdx
@@ -1,12 +1,13 @@
---
-title: "Create a product or website video"
-sidebarTitle: "Product or website"
-description: "Turn a product URL or launch brief into a promo, product tour, or social video."
+title: "Make a product launch video with AI"
+sidebarTitle: "Product launch"
+description: "Paste your product's URL and get a launch video built from its real screens, colors and words. Then change anything."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
-Give HyperFrames the real URL when the product, website, or brand should appear in the result.
+Paste your product's URL and you get a launch video built from what's really there: its screens, colors, fonts and
+words. HyperFrames is free, and a launch video takes the agent about 10 to 15 minutes to build.
-Built from a real site. The screens are captured from
-huly.io, not mocked — which is the point: you give it a URL and it works from
-what is actually there.
+Built from huly.io. The screens are captured from the real site, not mocked.
-## Make the request
+## Make it
-Give the agent the real product URL and the result you want:
+**In the Studio app**, paste the URL into **Make something** with one line about the video, and choose **Let's go**.
+Turn on **Start with a storyboard** to approve the shots as stills before anything moves.
```text
-Using /hyperframes, make a 30-second launch video for https://example.com.
+A 30-second launch video for https://example.com.
```
-The agent captures the product and builds from what is actually there. Add an
-audience, required claim, or final action when one must be exact; you do not
-need to specify every scene. Ask for a storyboard first when you want to approve
-the shots before it animates.
+**Seen a launch you'd love to copy?** Open **Reference** on Home, paste its link (or pick one under **Pick a
+reference**), and add your URL: you get that structure and energy with your product in it. Reference uses your
+HeyGen API key, and the app asks for it the first time.
-## What should the video do?
+Add only what must be exact: the audience, a claim, the final action. Say **don't capture the website** when the
+video should use only your brief. With your own agent instead of the app, start the message with `/hyperframes`.
-- **Launch video** — turn real product evidence into a persuasive story with one clear action at the end.
-- **Product tour** — show one complete task through the product's real screens, from the first action to the result.
-- **Short social video** — prove one useful point quickly, show the evidence, and stop after the payoff.
+## Pick the kind
-A tour features the product as it exists. A launch video rearranges the same evidence into a persuasive story. A social video proves one point and ends.
+- **Launch video**: the product's real evidence arranged into a story with one clear action at the end.
+- **Product tour**: one complete task through the real screens, from the first click to the result.
+- **Short social video**: one useful point, its proof, then stop.
-If you already have approved wording, paste the script and say whether it must remain verbatim. Say **do not capture the website** when the video should use only the supplied brief.
+No product to show? Make a [faceless explainer](/guides/faceless-explainer) instead.
-Use a [faceless explainer](/guides/faceless-explainer) instead when there is no product to show and the visuals should be invented.
+## Prompts that work
-## What HyperFrames builds from
+When you want to set the structure, voice and music yourself:
-
-
-
Real screens
-
- The interface and product states worth showing.
-
-
-
-
Product language
-
Claims, features, proof, and the final action.
-
-
-
Brand system
-
Color, type, imagery, motion, and sound.
-
-
+> 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.
-HyperFrames can animate captured product material or rebuild only the part that needs to move. A raw screen recording is not the default.
+
+*A launch film made from this prompt.*
-## Review the result
+### Say these when they matter
-- Every product claim is current.
-- The shown states are realistic and use no private material.
-- The important interface remains readable while the video plays.
-- The opening proves the product quickly and the ending asks for one clear action.
+Set the ones you care about and leave the rest to the agent.
+
+| Knob | What to say | Why it matters |
+| --- | --- | --- |
+| **Capture vs no capture** | Give a URL to capture the real site; give a script or brief when there is no site to capture | Capture borrows the real palette and screenshots; without it the visuals are invented, so name your brand colors |
+| **Palette source** | "use the site's own palette" | The agent builds from the captured brand tokens — 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" | 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 the agent's decision — see [media and audio](/prompting/media-and-audio) 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) |
+
+
+ Duration and destination are the two cheapest, highest-leverage things to state. Everything else the agent will choose well if you stay quiet — see [the specification dial](/prompting/specification-dial) for how much to delegate.
+
+
+### Variants
+
+
+
+ > 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, held still to the end. 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 agent scale the story to the shorter runtime.
+
+
+ > Make a ~20-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.
-Ask the agent for a broader story revision. Use Studio for a direct visual or
-timing change. Render from the agent, Studio, or the CLI when the result is ready.
+ With no URL there is nothing to capture: no screenshots, no site palette to borrow, so name your brand colors and fonts if you have them (or the agent invents a palette). Verbatim scripts set the duration — figure roughly 130 spoken words per minute, so a 30-second video wants a 65–70 word script. Saying "use it verbatim" settles whether the agent may restructure your words.
-
- Check the final project, render it from your preferred surface, and review the file.
-
-## Related topics
+
+
+ > 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 from the same URL is a different brief — ask to sell it.
+
+
+
+### Common mistakes
+
+**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.
+- **Avoid:** `a 45-second launch video from this exact script: ...`
+- **Instead:** `a ~45-second launch video from this script: ...`
+
+**Dropping the structure.** Hook → value → evidence → CTA is there for a reason; drop the hook and the promo never answers "why should I care?"
+- **Avoid:** `skip the intro, just list all six features back to back`
+- **Instead:** `hook stating the problem, then 3 feature beats, then the CTA end card`
+
+**Assuming the agent knows your assets.** Without a URL to capture there's no site to read; an unnamed logo or color is invented.
+- **Avoid:** `use our brand colors`
+- **Instead:** `brand colors #5E6AD2 on off-black; logo at assets/logo.svg`
+
+## Review the result
+
+- Every product claim is current.
+- The screens shown are realistic and use no private material.
+- The interface stays readable while the video plays.
+- The opening proves the product quickly, and the ending asks for one clear action.
-- [Create a faceless explainer when there is no product to show](/guides/faceless-explainer)
-- [Edit the finished project in Studio](/studio)
-- [Prompt for product-launch videos](/prompting/product-launch)
+Then [change it](/studio-app/edit-with-the-agent): ask the agent, point at the picture in the Studio app, or edit by hand.
diff --git a/docs/guides/slideshow.mdx b/docs/guides/slideshow.mdx
index 70675b933a3..ef2f8e5fe77 100644
--- a/docs/guides/slideshow.mdx
+++ b/docs/guides/slideshow.mdx
@@ -1,13 +1,13 @@
---
-title: "Create an interactive presentation"
+title: "Make an interactive presentation with AI"
sidebarTitle: "Presentation"
-description: "Build a navigable deck with reveals, notes, optional branches, hotspots, and presenter mode."
+description: "Build a deck you present live: reveals on each click, optional branches, hotspots, and presenter mode with notes and a timer."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
-A HyperFrames slideshow stays interactive. The result is a live, navigable deck—not a linear MP4.
-
+A HyperFrames presentation stays live: you click through it like a deck, with reveals, branches and speaker notes,
+instead of playing a video.
-This is a live capture of a running deck, not a video of slides. Watch the
-fragments arrive one key-press at a time, a hotspot jump to a branch slide, the
-back control return to the exact fragment it left, and presenter mode open with
-real speaker notes and a running timer.
+*A running deck: points arrive one click at a time, a hotspot jumps to a branch, Back returns to the exact point it
+left, and presenter mode shows the notes and a timer.*
-## Make the request
+## Make it
Give the agent the material and the decision the presentation should support:
```text
-Using /hyperframes, turn this product strategy outline into a presentation for
-our leadership review: [paste outline]
+Turn this product strategy outline into a presentation for our leadership review: [paste outline]
```
-The agent confirms the audience, main outcome, and whether the deck needs
-reveals, optional branches, or presenter notes. You do not need to prescribe
-every slide before seeing the proposed structure.
-
-If the result should play from beginning to end without a presenter, make a normal [video](/workflows). A slideshow cannot be exported as one linear MP4 yet.
-
-
- Do not run `hyperframes render` on a deck. It does not fail — a deck has no
- master root composition, so the render resolves only the **first** slide and
- writes a silently truncated MP4. You can get six seconds of a forty-second
- deck and no warning that anything is missing.
-
- Use `hyperframes present` for the live deck, or `hyperframes snapshot` for
- per-slide stills.
-
-
-## What control does the presenter need?
-
-- **Present a clear story** — give every slide one claim, one useful visual, and concise speaker notes.
-- **Reveal points as you speak** — use progressive reveals where the presenter should control the explanation.
-- **Offer optional detail** — keep the main story direct and place deeper material behind clear branches and hotspots.
-- **Convert an interactive page** — preserve its visual language and translate its motion into deliberate slide and reveal states.
+The agent confirms the audience, the main outcome, and
+whether the deck needs reveals, branches or presenter notes; you don't need to plan every slide. With your own agent instead of the app, start the message with `/hyperframes`.
-Attach the source notes, document, page, or existing deck. Name the audience and what should change after the presentation.
+Name the audience and what should change after the presentation. If it should play start to finish with nobody
+presenting, make a [video](/workflows) instead: a deck can't be exported as one MP4 yet.
-## Keep the main story clear
+## How a good deck is built
-- **Slides** carry one complete claim and one useful visual.
-- **Reveals** let the presenter add part of an idea at a time.
-- **Branches** hold optional detail without interrupting the story everyone sees.
-- **Speaker notes** help the presenter; they should not repeat the slide.
+- **One claim per slide**, with one visual that proves it.
+- **Reveals** when the presenter should add an idea a piece at a time.
+- **Branches and hotspots** for optional detail, so the main story still works if nobody opens them.
+- **Speaker notes** that help the presenter instead of repeating the slide.
-The main story should still make sense when no optional branch is opened.
+To change order, notes, reveals or branches by hand, use the [Slideshow panel](/studio/slideshows) in the browser
+editor.
-Use **Next** to step through fragment reveals, including those on the final slide.
-The Next button disappears once the final slide's last reveal is shown.
+## Prompts that work
-## Review it as a presenter
+Ask for the deck's moving parts by name: "reveal the bullets one at a time", "branch to a detail slide from a hotspot", "add speaker notes". A full pitch deck in one prompt:
-- Each slide makes one clear point.
-- Reveals help the explanation.
-- Hotspots are obvious without distracting.
-- Embedded media stops when its slide is left.
-- Presenter notes and the audience view stay separate.
-- The complete deck works with keyboard, touch, and its visible controls.
+> 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`.
-Use [Studio’s Slideshow panel](/studio/slideshows) to adjust order, notes, reveals, and branches.
+This makes a deck you click through, not a video. Each reveal is a stop inside the slide; the hotspot opens a detail slide, and Back returns to the slide that held it.
-## Present the deck
+## Present it
```bash
npx hyperframes present
```
-Open the local URL, then click **Present** or press **P**. The audience gets a clean full-screen view while the presenter keeps the current slide, next slide, notes, and timer.
+Open the local link and press **P** (or click **Present**). The audience gets a clean full-screen view; you see the
+live slide, your notes, what comes next and a timer. In Google Meet, share the audience **tab**; in Zoom, move that tab
+into its own window and share the window.
+
+Use **Next** to step through reveals, including those on the final slide. The Next button disappears once the
+final slide's last reveal is shown.
+
+
+ Do not run `hyperframes render` on a deck. It does not fail — a deck has no
+ master root composition, so the render resolves only the **first** slide and
+ writes a silently truncated MP4. You can get six seconds of a forty-second
+ deck and no warning that anything is missing.
-In Google Meet, share the audience **tab**. In Zoom, move the audience tab into its own window and share that window.
+ Use `hyperframes present` for the live deck, or `hyperframes snapshot` for
+ per-slide stills.
+
## Related topics
-- [Build and revise a slideshow in Studio](/studio/slideshows)
+- [Build and revise a slideshow in the browser editor](/studio/slideshows)
- [Use variables and templates](/studio/variables)
-- [Create a linear video instead](/workflows)
+- [Make a video instead](/workflows)
diff --git a/docs/prompting/capstone.mdx b/docs/prompting/capstone.mdx
index 17b8a74ab8a..652bc05b509 100644
--- a/docs/prompting/capstone.mdx
+++ b/docs/prompting/capstone.mdx
@@ -115,7 +115,7 @@ That is the same catch-and-tighten loop [Iterating](/prompting/iterating) teache
| Everywhere (0:21–0:28) | The `world-map` block. Real Lambda and Cloud Run regions. | [Data and maps](/prompting/data-and-maps), [Rendering and output](/prompting/rendering-and-output) |
| Material (0:28–0:39) | The footage pipeline, in order. Generated clip, HEVC proxy, background removed *before* the speech, the speaker's own keywords slamming in behind the cutout, lower third behind the subject. | [Media and audio](/prompting/media-and-audio), [Caption styles](/prompting/captions-catalog), [Overlays and lower thirds](/prompting/overlays-and-lower-thirds) |
| Surface (0:39–0:45) | The `sdf-iris` shader lens, frosted glass, a palette-neutral generated mural. | [Transitions](/prompting/transitions), [VFX and liquid glass](/prompting/vfx-and-liquid-glass), [When to generate artwork](/prompting/generated-artwork) |
-| Rhythm (0:45–0:52) | Cuts on a real analyzed beat grid from `hyperframes beats`. | [Music videos and slideshows](/prompting/music-and-slideshows) |
+| Rhythm (0:45–0:52) | Cuts on a real analyzed beat grid from `hyperframes beats`. | [Music videos and slideshows](/guides/music-to-video#prompts-that-work) |
| Depth (0:52–0:56) | Real Three.js via the frame adapter. The wire as a 3D coil, with the chip threading the loops and passing behind the form. | [Runtimes and 3D](/prompting/runtimes-and-3d) |
| Render (0:56–1:02) | Seeded confetti, two-frame holds. Determinism as the punchline. | [Motion that reads premium](/prompting/motion) (rule 8) |
diff --git a/docs/prompting/captions-and-talking-heads.mdx b/docs/prompting/captions-and-talking-heads.mdx
deleted file mode 100644
index 9c90bc1c239..00000000000
--- a/docs/prompting/captions-and-talking-heads.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
----
-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."
----
-
-import { DocsVideo } from "/snippets/docs-video.jsx";
-
-The first two rides built a video from nothing and the third built one from a diff. This one starts from footage you already have — a talking-head clip — and adds a layer on top without touching the shot itself.
-
-## Your first win
-
-One `/hyperframes` prompt, pointed at an existing clip, is enough for a finished captioned video — no technique required yet.
-
-> /hyperframes Add captions to ./interview.mp4. Clean verbatim rail carrying the spoken words, readable lower-third. Promote the single hardest-hitting word to an embed behind the speaker; highlight one key word in each rail line. Keep the source aspect ratio. Footage stays untouched.
-
-
-*Rendered from the prompt above on generated avatar footage, unedited — one earned embed behind the speaker, everything else on the rail.*
-
-
-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.
-
-## Two things you can add to a talking head
-
-Both 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 | Ask for | What it adds |
-| --- | --- | --- |
-| The spoken words as readable text | Captions | Captions / subtitles — a rail, with earned climax embeds |
-| Designed on-screen graphics synced to the talk | 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.
-
-## Base prompt — overlay cards
-
-> /hyperframes 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 agent designs and writes each card; there's no fixed archetype list, so the overlays follow what the transcript actually says.
-
-## The knobs that matter
-
-What you can already steer from the prompt, before you've learned any technique.
-
-**Look and tone (captions).** Describe the look by content: explainer / interview / must-read words → a clean readable rail; poetic / social / cinematic → hero typography behind the speaker; hype → bolder, punchier type. Unsure → a clean rail: the words read and the scene stays safe. Ready-made caption styles are in the [captions catalog](/prompting/captions-catalog).
-
-**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 agent *which* lines earn the embed; leave the rest on the rail.
-
-**Style, layout, and canvas (overlay cards).** Name a style (warm paper, clinical, …), a layout (split / stack / PiP / overlay), and a canvas ratio. Matching the source ratio is the safe default, 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.
-
-## Variants
-
-
-
- > /hyperframes Cinematic captions on ./poem.mp4 — no rail, lowercase-italic hero typography composited behind the speaker, words accumulating as a column. One apex word per thought, air between them. 4:5. Never grade the footage.
-
- Dropping the rail and setting everything behind the speaker suits poetic / social / "cinematic" asks where mood beats strict readability, never on an explainer where the words must read.
-
-
- > /hyperframes Add verbatim captions to ./outdoor-vlog.mp4. It's a bright daylight scene, so use near-black type printed onto the surface — not a light-on-bright look that washes out. Keep it a readable rail. 16:9.
-
- Light, screen-blended type washes out over bright backdrops (brightness above ~180); dark, opaque type holds. Match the look to the scene.
-
-
- > /hyperframes Bring the energy on ./hype-clip.mp4 — I want the captions to hit hard: a stamped verbatim rail with a detonation apex. Rail carries the verbatim; the payoff line is the setpiece. 9:16.
-
- Name the treatment — stamped type, a detonation on the payoff line — instead of "make it explode". The a-roll is still never graded.
-
-
- > /hyperframes 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; left unstated, card density follows the clip's length — roughly one card every 12–20 seconds on a 5-minute clip.
-
-
-
-## Failure modes
-
-**Mixing footage edits into a caption pass.** Captions and cards add a layer and leave the a-roll exactly as shot. Trimming, speeding up, recoloring, reframing, or reordering is a different job — ask for it separately.
-- ❌ `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.** Text behind the speaker is matted against one person; two speakers or hard cuts make it flicker.
-- ❌ `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.
-
-
- 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, ask `/hyperframes` for it directly.
-
-
-The matching guide is [Captions and talking head](/guides/captions-and-recuts) — what to give the agent, what it confirms before building, and what it returns.
-
-*Next: [Music videos and slideshows](/prompting/music-and-slideshows) — swap footage for a soundtrack, or slides, and let the beat or the deck set the pace.*
diff --git a/docs/prompting/captions-catalog.mdx b/docs/prompting/captions-catalog.mdx
index 288f698e6c6..54c85022a7d 100644
--- a/docs/prompting/captions-catalog.mdx
+++ b/docs/prompting/captions-catalog.mdx
@@ -12,7 +12,7 @@ Your faceless explainer from Level 1 already asked for "embedded captions, keywo
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.
- These components are for **composed videos** — captions you author into a HyperFrames composition. To add captions to an existing **talking-head MP4**, see [captions and talking heads](/prompting/captions-and-talking-heads) instead: captions set *behind* the speaker need a cutout of the subject layered over them, which the composition snippets below don't do.
+ These components are for **composed videos** — captions you author into a HyperFrames composition. To add captions to an existing **talking-head MP4**, see [captions and talking heads](/guides/captions-and-recuts#prompts-that-work) instead: captions set *behind* the speaker need a cutout of the subject layered over them, which the composition snippets below don't do.
## Tone → caption component
@@ -97,7 +97,7 @@ Three [Text Effects](/catalog/components/morph-text) components do one focused j
**Don't reach for these on talking-head footage.** These are composition snippets, not the matting/occlusion pipeline — dropped onto an untouched MP4, a caption sits in front of the speaker, never behind. (The capstone thread below shows `caption-kinetic-slam` reading *behind* a subject, which is not a contradiction: that composition mattes the footage itself first, so the cutout is a separate layer the type can pass under. The limitation is about the snippet alone, not the technique.)
- ❌ `/hyperframes add caption-highlight to my interview.mp4`
-- ✅ `/hyperframes caption interview.mp4 with the words set behind the speaker` (see [captions and talking heads](/prompting/captions-and-talking-heads))
+- ✅ `/hyperframes caption interview.mp4 with the words set behind the speaker` (see [captions and talking heads](/guides/captions-and-recuts#prompts-that-work))
**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)
diff --git a/docs/prompting/code-and-prs.mdx b/docs/prompting/code-and-prs.mdx
deleted file mode 100644
index 522fbae5d46..00000000000
--- a/docs/prompting/code-and-prs.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-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."
----
-
-import { DocsVideo } from "/snippets/docs-video.jsx";
-
-Two rides in, both built from nothing yet on the page. This one starts from something that already exists and is already true — a merged PR — and turns the diff itself into the story.
-
-## Your first win
-
-One `/hyperframes` prompt, pointed at a PR link, is enough for a finished code-change explainer — no technique required yet.
-
-Verified, from the [examples](/prompting/examples) page — a 30-second feature reveal:
-
-> /hyperframes 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.
-
-
-*Rendered from the prompt above, unedited.*
-
-
-## What this makes
-
-A code-change explainer built from a GitHub pull request. Given a PR, the agent reads it through `gh` — the diff, commits, files, and contributors — reshapes it into a story, and builds it scene by scene, rendering code beats with the registry's `code-*` blocks.
-
-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](/prompting/product-launch); a topic with no PR → [explainers](/prompting/explainers).
-
-## The knobs that matter
-
-What you can already steer from the prompt, before you've learned any technique.
-
-| 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 agent 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 agent sizes the video from the change — a huge PR is a ceiling on story, not a floor to fill |
-
-## Variants
-
-
-
- > /hyperframes 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, no captions.
-
-
- *Rendered from this prompt with [PR URL] = heygen-com/hyperframes#2092, unedited.*
-
- 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. A PR doesn't carry its shipping version — the agent finds it from the release tag or the package manifest on main.
-
-
- > /hyperframes 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.
-
-
- > /hyperframes 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.
-
-
-
-## Common failure modes
-
-**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.** As in [ride 1](/prompting/product-launch#common-failure-modes) — the spoken length sets the runtime, so state a range.
-- ❌ `a 40-second narrated walkthrough`
-- ✅ `a ~40-second narrated walkthrough`
-
-The matching guide is [PR to video](/guides/pr-to-video) — what to give the agent, what it confirms before building, and what it returns.
-
-*Next: [Captions and talking-head footage](/prompting/captions-and-talking-heads) — same one-prompt move, now dressing footage you already shot.*
diff --git a/docs/prompting/code-blocks.mdx b/docs/prompting/code-blocks.mdx
index d903927446d..6428d520023 100644
--- a/docs/prompting/code-blocks.mdx
+++ b/docs/prompting/code-blocks.mdx
@@ -7,7 +7,7 @@ import { DocsVideo } from "/snippets/docs-video.jsx";
Your PR video from Level 1 named `code-diff` for a single beat and moved on. This chapter is the rest of that catalog: typing, diffing, highlighting, scrolling, and picking a terminal or editor theme by name — for the moments a walkthrough needs to slow down and let the code itself carry the scene.
-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).
+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](/guides/pr-to-video#prompts-that-work).
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.
@@ -140,13 +140,13 @@ For "here's what changed," hand `code-diff` the before and after and let it colo
### Pairing with a pull request
-When the code you're animating comes from a real PR, don't hand-write the beats — [point the agent at the PR](/prompting/code-and-prs) and it 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; hand over the PR when you're narrating a specific change set.
+When the code you're animating comes from a real PR, don't hand-write the beats — [point the agent at the PR](/guides/pr-to-video#prompts-that-work) and it 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; hand over the PR 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.
+- [Code and PRs](/guides/pr-to-video#prompts-that-work) — 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.
diff --git a/docs/prompting/explainers.mdx b/docs/prompting/explainers.mdx
deleted file mode 100644
index 6cdba71694a..00000000000
--- a/docs/prompting/explainers.mdx
+++ /dev/null
@@ -1,140 +0,0 @@
----
-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."
----
-
-import { DocsVideo } from "/snippets/docs-video.jsx";
-
-The last page pointed the agent at a website. This one drops the site. Your
-text is the whole input. Every visual is invented, not captured.
-
-## Your first win
-
-Paste your text into one `/hyperframes` prompt.
-That is enough for a finished explainer. No site, no footage, no design
-decisions yet.
-
-Verified, from the [examples](/prompting/examples) page — a ~60-second vertical
-explainer from pasted text:
-
-> /hyperframes 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.
-
-
-*Rendered from the prompt above, unedited.*
-
-
-Note the `~`. When you supply a 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.
-
-## What this makes
-
-A faceless explainer. Your text becomes a narrated video — an article, notes, a
-topic, a brief. Every visual is invented per scene: typography, abstract
-graphics, diagrams, data-viz.
-
-Asked for an explainer, the agent settles a look, shapes your text into a
-teaching story, generates TTS narration, and builds the video scene by scene.
-
-**Faceless means there is nothing to capture.** No site, no footage, no asset
-inventory. The visuals are designed downstream.
-
-Give it the source instead when you do have something to show:
-
-- A product to sell → its URL ([product launch](/prompting/product-launch))
-- A real site to show → its URL with a tour brief
- ([product launch](/prompting/product-launch))
-- A GitHub PR → the PR link ([code and PRs](/prompting/code-and-prs))
-
-## The knobs that matter
-
-You can steer all of these from the prompt, before you have learned any
-technique.
-
-| Knob | What to say | Why it matters |
-| --- | --- | --- |
-| **Verbatim vs summarized** | "use my wording verbatim" or "restructure it freely" | 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 leave nothing to build the motion around. It reads as a text dump. |
-| **Angle** | "concept" / "how-to" / "listicle" / "story" | The angle decides the story shape. The agent reshapes your text into it instead of reading your paragraphs in order. |
-| **Caption style** | "embedded captions, keywords highlighted in the accent color" | Captions are burned in. Naming the highlight color ties them to your palette instead of a default pill. |
-| **Palette** | "brand color #FF5533 on off-black" | There is no site to borrow from, so the agent picks a palette. A named accent and ground personalize it. |
-| **Voice** | "male TTS voice, calm" / "warm female voice" | Gender and tone are prompt words. The provider is the agent's decision. |
-
-
- Scene density is the single biggest quality lever here. "One idea per scene"
- turns a dense paragraph into a paced sequence. The agent reorders and
- compresses your text to hit it. That is what makes an explainer teach instead
- of recite.
-
-
-## Variants
-
-
-
- > /hyperframes Make a ~30-second 1920x1080 explainer on how HTTPS keeps a request private, for a non-technical audience — the takeaway: your data is sealed before it leaves the browser. Concept angle: one idea per scene, big geometric type, a simple lock-and-key diagram as the centerpiece (swap the metaphor with the topic). Near-black ink on off-white with a deep-blue accent. Female TTS voice, warm and clear. Embedded captions, key terms highlighted in the accent color.
-
- Shorter runtime, landscape for YouTube or an embed. Fewer scenes means the
- topic has to compress. Naming the takeaway tells the agent what to keep.
-
-
-*Rendered from this prompt with the topic swapped to HTTP caching (cache diagram as the metaphor), unedited — 26s, because the narration sets the length.*
-
-
-
- > /hyperframes 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. Every scene reuses the same
- number-and-label shape. The result reads as a countdown, not a wall of
- points.
-
-
- > /hyperframes 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", or "a pipeline that fills left to
- right". Let the agent invent the specifics.
-
-
-
-## Common failure modes
-
-**"60 seconds" instead of "~60 seconds".** Same rule as on the
-[product launch page](/prompting/product-launch#common-failure-modes). It bites
-harder here, because the script is the whole video. You cannot know a supplied
-script's spoken duration until the TTS renders.
-
-- ❌ `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 is 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 — give it the URL
- ([product launch](/prompting/product-launch))
-
-**Leaving the look unspecified when you care.** There is no brand to read, so
-the agent picks the palette. If you have colors, name them.
-
-- ❌ `make it look on-brand`
-- ✅ `brand color #FF5533 on off-black`
-
-The matching guide is [Faceless explainer](/guides/faceless-explainer) — what to give the agent, what it confirms before building, and what it returns.
-
-*Next: [Code changes and PRs](/prompting/code-and-prs) — point the agent at a merged GitHub PR instead of a blank page.*
diff --git a/docs/prompting/motion-graphics.mdx b/docs/prompting/motion-graphics.mdx
deleted file mode 100644
index 9f60130903b..00000000000
--- a/docs/prompting/motion-graphics.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
----
-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."
----
-
-import { DocsVideo } from "/snippets/docs-video.jsx";
-
-Five rides in, five different inputs — a site, plain text, a PR, footage, a track. This last one drops narration and asset input altogether: a short, design-led motion graphic where motion alone carries the message.
-
-## Your first win
-
-One `/hyperframes` prompt, with the beats spelled out, is enough for a finished motion graphic — no technique required yet.
-
-The canonical shape: routed, spec'd, beat-timestamped, copy quoted, technique pinned, gaps closed.
-
-> /hyperframes 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." Adapt the `code-typing` and `vfx-shatter` registry blocks; hand-author the kinetic text. No narration, no image or media files.
-
-
-*Rendered from the prompt above, unedited.*
-
-
-## 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.
-
-When the piece grows past what "motion is the message" covers — longer, multi-scene, or narrated; a video of a website or product; a topic explainer with a voice-over; captions on existing footage — it's a different brief. Say so, and see [product launch](/prompting/product-launch), [explainers](/prompting/explainers), or [captions](/prompting/captions-and-talking-heads) for what to ask.
-
-## The knobs that matter
-
-What you can already steer from the prompt, before you've learned any technique.
-
-**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 multi-scene 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).
-
-## Variants
-
-Each reuses a registry block, so the agent composes rather than hand-building from scratch.
-
-
-
- > /hyperframes 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.
-
-
- > /hyperframes 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, then holds with a subtle ambient idle (slow breathing scale). Use `code-particle-assemble` for the assembly.
-
-
- > /hyperframes 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. Settle into a gentle ambient idle on the card at the end. Use the `x-post` and `vfx-liquid-background` registry blocks. No narration, no image or media files.
-
-
- > /hyperframes 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.
-
-
-
-## 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 makes it a narrated video.
-- ❌ `/hyperframes a 10s logo sting with a voice-over reading the tagline`
-- ✅ `/hyperframes a 10s logo sting, no narration` — for a spoken track, ask for a narrated explainer instead.
-
-**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 video.
-
-
- 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).
-
-
-The matching guide is [Motion graphics](/guides/motion-graphics) — what to give the agent, what it confirms before building, and what it returns.
-
-*Next: [Prompt anatomy](/prompting/anatomy) — you've ridden six one-prompt inputs; Level 2 opens the prompt itself.*
diff --git a/docs/prompting/motion.mdx b/docs/prompting/motion.mdx
index be72cf99c95..370dd90d42e 100644
--- a/docs/prompting/motion.mdx
+++ b/docs/prompting/motion.mdx
@@ -267,7 +267,7 @@ Each of these supplies both properties by different means. They also compose —
| **A hero prop** ([Storyboards](/prompting/storyboards)) | Cut the environment, keep one object continuously on screen — the product, a chart, a character | Push in on the prop and still everything else around it |
| **A persistent frame** | Scenes change *inside* a frame that never does — a HUD, a ruler, a browser shell, a border | Let the chrome fall away for one beat. Its absence is the accent |
| **Audio as the spine** ([Media and audio](/prompting/media-and-audio)) | One unbroken sentence or musical phrase crosses the cut, so the ear ties what the eye did not | A rest in the audio — a held note, or a beat of silence before the number lands |
-| **Beat-locked cutting** | Cuts land on an analyzed grid, so the rhythm itself is the connective tissue ([Music](/prompting/music-and-slideshows)) | Hold through a downbeat, or drop a hit, so one card gets twice the space |
+| **Beat-locked cutting** | Cuts land on an analyzed grid, so the rhythm itself is the connective tissue ([Music](/guides/music-to-video#prompts-that-work)) | Hold through a downbeat, or drop a hit, so one card gets twice the space |
| **Accumulation** ([Storyboards](/prompting/storyboards)) | Nothing ever exits. Each scene adds to one canvas and the frame reflows to the new material | Everything but the newest element quiets to a low idle |
Whichever you choose, put the two properties in the prompt in your own words, and name the tell you are forbidding. The device is negotiable. The properties are not.
diff --git a/docs/prompting/music-and-slideshows.mdx b/docs/prompting/music-and-slideshows.mdx
deleted file mode 100644
index 23917dea21b..00000000000
--- a/docs/prompting/music-and-slideshows.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
----
-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 ask for the right one."
----
-
-import { DocsVideo } from "/snippets/docs-video.jsx";
-
-You've dressed footage and turned a PR into a story — now the driving input changes again: a track's own beat, or a deck of slides, sets the pace instead of a script.
-
-## Your first win
-
-One `/hyperframes` prompt, pointed at a track and some photos, is enough for a finished beat-synced video — no technique required yet.
-
-The verified starting point: photos cut to a track, exported to a square MP4.
-
-> /hyperframes 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.
-
-
-*Rendered from the prompt above, unedited.*
-
-
-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*.
-
-## 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. Name the output you want up front.
-
-| You want | Skill | Output |
-| --- | --- | --- |
-| Photos / clips cut to a music track, exported as a video | `/hyperframes` | A beat-synced **MP4** with audio |
-| A presentation you click through — slides, reveals, speaker notes | `/slideshow` | A **navigable deck**, not an MP4 |
-
-A music video starts from a **music track** — an audio file, a video to pull audio from, or a track generated from a mood brief. 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).
-
-`/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. One authoring detail worth knowing: fragment reveal times are absolute positions on the deck's master timeline, not per-slide offsets.
-
-## The knobs that matter
-
-What you can already steer from the prompt, before you've learned any technique.
-
-**The beat grid.** The agent analyzes the track (`hyperframes beats`, `hyperframes audio`) for beats, onsets, and sections, 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 agent 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 carries 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.
-
-## Variants
-
-
-
- > /hyperframes 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.
-
-
- > /hyperframes 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.
-
-
- > /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.
-
-
-
-## Failure modes
-
-**Hard track timestamps.** The whole point of a music 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, ask `/hyperframes` for one.
-
-**Wrong deliverable for the output.** Photos set to music that you'll export and post is a video; a thing you click through live is a `/slideshow` deck. Picking by the word "slideshow" alone builds the wrong deliverable.
-
-
- The music prompts here are unnarrated; ask for a voice-over if you want one. For the six-part skeleton these prompts share, see [Prompt anatomy](/prompting/anatomy); for adjectives that map to eases and transitions, [Vocabulary](/prompting/vocabulary).
-
-
-
-**Capstone thread** — the [Level 7 film](/prompting/capstone)'s Rhythm region cuts media cards onto a real analyzed beat grid from `hyperframes beats` — the film's only sanctioned hard cuts, every one on a detected beat while the camera keeps traveling (cut from the film, below).
-
-
-This is the clause in the [full capstone prompt](/prompting/capstone#the-prompt-word-for-word) that buys the piece — prompt language you can lift for your own video:
-
-> **Rhythm (45–52s).** The wire becomes a waveform: **resolve the BGM first, run `hyperframes beats` on it, and drive this region on the detected grid** — the waveform pulses and compact media cards (a lyric line, a photo card, a chart flash) snap onto the wire on real analyzed beats while the camera keeps traveling; each snap gets a tick SFX. At least six beat-hits. SANCTIONED SEAM #2: the beat-hits may hard-cut card content ON the beat — the sanctioned exception, because the camera itself never stops moving through them.
-
-
-*That clause, rendered — the region cut from the finished film.*
-
-The matching guide is [Music to video](/guides/music-to-video) — what to give the agent, what it confirms before building, and what it returns.
-
-*Next: [Motion graphics](/prompting/motion-graphics) — the shortest one yet, a single motion graphic where motion alone is the message.*
diff --git a/docs/prompting/overview.mdx b/docs/prompting/overview.mdx
index 8c3ebbcdb4f..710d988f3e7 100644
--- a/docs/prompting/overview.mdx
+++ b/docs/prompting/overview.mdx
@@ -24,7 +24,7 @@ The guide is one arc, novice to advanced. Each level is what you can do once you
| Level | What you can do after it |
| --- | --- |
-| **1 — [Your first video](/prompting/product-launch)** | Get a finished video from one prompt — the agent fills the gaps (palette, pacing, structure) for you. |
+| **1 — [Your first video](/guides/product-launch-video#prompts-that-work)** | Get a finished video from one prompt — the agent fills the gaps (palette, pacing, structure) for you. |
| **2 — [Control](/prompting/anatomy)** | Name the parts yourself: route, spec, beats, copy, technique, negatives — the skeleton that removes the decisions agents get wrong. |
| **3 — [Life](/prompting/motion)** | Motion and transitions that read premium instead of like a slideshow. |
| **4 — [Substance](/prompting/code-blocks)** | Add real capabilities: code animation, data-viz, overlays, captions, generated artwork, VFX, 3D. |
@@ -167,4 +167,4 @@ And at the far end of the [specification dial](/prompting/specification-dial), a
The film above, dissected frame by frame
-*Next: [Your first video](/prompting/product-launch) — one URL, one prompt, a finished launch video.*
+*Next: [Your first video](/guides/product-launch-video#prompts-that-work) — one URL, one prompt, a finished launch video.*
diff --git a/docs/prompting/product-launch.mdx b/docs/prompting/product-launch.mdx
deleted file mode 100644
index b584b70cb24..00000000000
--- a/docs/prompting/product-launch.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
----
-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."
----
-
-import { DocsVideo } from "/snippets/docs-video.jsx";
-
-This is Level 1 of the Prompt Guide: a run of one-prompt rides, each handing the agent a single ask and getting a finished video back. You don't need any technique yet — one sentence describing your product is already enough for a first draft.
-
-## Your first win
-
-One `/hyperframes` prompt, aimed at a live URL, is enough for a finished launch video — no technique required yet.
-
-Verified, from the [examples](/prompting/examples) page — a 45-second launch from a live URL:
-
-> /hyperframes 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.
-
-
-*Rendered from the prompt above, unedited.*
-
-
-Read the [anatomy](/prompting/anatomy) of that skeleton — route, spec, structure, copy, voice, level — then swap in your own product.
-
-## What this makes
-
-A launch or promo that *sells*: SaaS promos, feature reveals, product demos, app and company launches. Given a URL, the agent captures the product's site (or takes a pasted script), reads its brand, writes a story, and builds it scene by scene.
-
-**Say what the video is for — the distinction is intent, not input.** "Promo for our site" is a launch — sell it. A video *of* a general site — a portfolio, blog, docs, or landing-page tour or showcase — is a tour: say *tour* or *showcase* in the brief, and the agent shows the site's own captured screens instead of pitching (see the [website video guide](/guides/product-launch-video)).
-
-## The knobs that matter
-
-What you can already steer from the prompt, before you've learned any technique. Set the ones you care about; leave the rest to the agent'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 when there is no site to capture | Capture borrows the real palette and screenshots; without it the visuals are invented, so name your brand colors |
-| **Palette source** | "use the site's own palette" | The agent builds from the captured brand tokens — 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" | 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 the agent's decision — see [media and audio](/prompting/media-and-audio) 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) |
-
-
- Duration and destination are the two cheapest, highest-leverage things to state. Everything else the agent will choose well if you stay quiet — see [the specification dial](/prompting/specification-dial) for how much to delegate.
-
-
-## Variants
-
-
-
- > /hyperframes 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 agent scale the story to the shorter runtime.
-
-
- > /hyperframes Make a ~20-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 there is nothing to capture: no screenshots, no site palette to borrow, so name your brand colors and fonts if you have them (or the agent invents a palette). Verbatim scripts set the duration — figure roughly 130 spoken words per minute, so a 30-second video wants a 65–70 word script. Saying "use it verbatim" settles whether the agent may restructure your words.
-
-
-*Rendered from this prompt shape with a different, longer script (78 words, fictional dev-tool "Relay"), unedited — it ran 35.5s because the words set the length.*
-
-
-
- > /hyperframes 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 from the same URL is a different brief — ask to sell it.
-
-
-
-## 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: ...`
-
-**Dropping the structure.** Hook → value → evidence → CTA is there 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`
-
-**Assuming the agent knows your assets.** Without a URL to capture 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`
-
-*Next: [Explainers](/prompting/explainers) — no product, no site, just text turned into a faceless explainer.*
diff --git a/docs/public/images/films/gps-explainer-v1.jpg b/docs/public/images/films/gps-explainer-v1.jpg
new file mode 100644
index 00000000000..95b1ed700de
Binary files /dev/null and b/docs/public/images/films/gps-explainer-v1.jpg differ
diff --git a/docs/public/images/films/vs-hyperframes-v1.jpg b/docs/public/images/films/vs-hyperframes-v1.jpg
new file mode 100644
index 00000000000..5eca12abef2
Binary files /dev/null and b/docs/public/images/films/vs-hyperframes-v1.jpg differ
diff --git a/docs/public/images/films/vs-remotion-v1.jpg b/docs/public/images/films/vs-remotion-v1.jpg
new file mode 100644
index 00000000000..49723f92996
Binary files /dev/null and b/docs/public/images/films/vs-remotion-v1.jpg differ
diff --git a/docs/public/images/workflows/data-video.jpg b/docs/public/images/workflows/data-video.jpg
new file mode 100644
index 00000000000..1e5feed45e6
Binary files /dev/null and b/docs/public/images/workflows/data-video.jpg differ
diff --git a/docs/snippets/workflow-chooser.jsx b/docs/snippets/workflow-chooser.jsx
index 14c981dcf23..5944b0357ff 100644
--- a/docs/snippets/workflow-chooser.jsx
+++ b/docs/snippets/workflow-chooser.jsx
@@ -45,6 +45,27 @@ export const WorkflowChooser = () => {
video: `${CDN}/wfv2-motion.mp4`,
poster: `${CDN}/wfv2-motion.jpg`,
},
+ {
+ title: "Make a 3D or animated piece",
+ bring: "Bring an idea; it can be a character, an object, or a whole world.",
+ href: "/guides/general-video",
+ video: "https://static.heygen.ai/hyperframes-oss/homepage/showcase/card/axe-v1.mp4",
+ poster: "https://static.heygen.ai/hyperframes-oss/homepage/showcase/poster/axe-v1.jpg",
+ },
+ {
+ title: "Add VFX to footage",
+ bring: "Bring a clip; cut the person out, put them in a billboard, change the world behind.",
+ href: "/guides/remove-background",
+ video: "https://static.heygen.ai/hyperframes-oss/homepage/showcase/card/vfx-background-removal-launch-v1.mp4",
+ poster: "https://static.heygen.ai/hyperframes-oss/homepage/showcase/poster/vfx-background-removal-launch-v1.jpg",
+ },
+ {
+ title: "Make something funny",
+ bring: "Bring a joke: a parody, a skit, a meme.",
+ href: "/guides/general-video",
+ video: "https://static.heygen.ai/hyperframes-oss/homepage/showcase/card/cow-v1.mp4",
+ poster: "https://static.heygen.ai/hyperframes-oss/homepage/showcase/poster/cow-v1.jpg",
+ },
{
title: "Cut to music",
bring: "Bring a track and any photos or video you want to use.",
@@ -60,17 +81,26 @@ export const WorkflowChooser = () => {
poster: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-slideshow.jpg",
},
{
- title: "Direct a custom video",
+ title: "Turn data into a video",
+ bring: "Bring numbers, a spreadsheet, or places on a map.",
+ href: "/prompting/data-and-maps",
+ video: "https://static.heygen.ai/hyperframes-oss/docs/images/prompting/barrace-handdrawn.mp4",
+ poster: "/public/images/workflows/data-video.jpg",
+ },
+ {
+ title: "Add an AI presenter",
+ bring: "Bring a script; a HeyGen avatar says it on screen.",
+ href: "/guides/avatar-presenter",
+ video: "https://static.heygen.ai/hyperframes-oss/docs/images/prompting/captions-anchor-rail-v2.mp4",
+ poster: "https://static.heygen.ai/hyperframes-oss/docs/images/showcase/avatar-presenter-caption-rail-v1.jpg",
+ },
+ {
+ title: "Make any other video",
bring: "Bring the outcome you want and whatever source material you have.",
href: "/guides/general-video",
video: `${CDN}/wfv2-general.mp4`,
poster: `${CDN}/wfv2-general.jpg`,
},
- {
- title: "Port a Remotion composition",
- bring: "Bring an existing Remotion project. One-way migration, not a new build.",
- href: "/guides/hyperframes-vs-remotion",
- },
];
// Lazy initializer, not a post-mount effect: with useState(false) the first
@@ -110,7 +140,7 @@ export const WorkflowChooser = () => {
{routes.map((route) => (
-When several source types matter equally, use **Direct a custom video**.
-You can also make a plain `/hyperframes` request; the agent works out the kind
-of video from what you ask for.
+
+
+**Have a video you like?** Start from it instead of choosing. In the Studio app, open **Reference** on Home and paste
+its link (YouTube, TikTok, Instagram or X), upload it, or pick one from the feed. The app copies its cuts, captions and
+effects (or only its motion graphics), asks who's on camera (you, or an AI avatar), and lets you swap the parts that
+should be yours. A video you only half like is still a better start than a blank page.
-## Related topics
+**Not sure which?** Describe the whole video in your own words. The agent works out the kind of video from what you ask
+for. With your own agent, start the message with `/hyperframes`.
-- [Make your first video](/quickstart)
-- [Create a product or website video](/guides/product-launch-video)
-- [Direct a custom video](/guides/general-video)
+Coming from Remotion? [Port a Remotion composition](/guides/hyperframes-vs-remotion).
diff --git a/scripts/check-no-main-deletions.mjs b/scripts/check-no-main-deletions.mjs
index 7275ff8ea86..de70c82c1ca 100644
--- a/scripts/check-no-main-deletions.mjs
+++ b/scripts/check-no-main-deletions.mjs
@@ -749,6 +749,30 @@ export const ALLOWED_DELETIONS = new Map([
"docs/public/images/studio-app/project.jpg",
"the project screen page is built from recorded clips and posters; nothing links this still any more",
],
+ [
+ "docs/prompting/captions-and-talking-heads.mdx",
+ "each Make guide now holds these prompts as its 'Prompts that work' section; the old URL 301s there (docs.json)",
+ ],
+ [
+ "docs/prompting/code-and-prs.mdx",
+ "each Make guide now holds these prompts as its 'Prompts that work' section; the old URL 301s there (docs.json)",
+ ],
+ [
+ "docs/prompting/explainers.mdx",
+ "each Make guide now holds these prompts as its 'Prompts that work' section; the old URL 301s there (docs.json)",
+ ],
+ [
+ "docs/prompting/motion-graphics.mdx",
+ "each Make guide now holds these prompts as its 'Prompts that work' section; the old URL 301s there (docs.json)",
+ ],
+ [
+ "docs/prompting/music-and-slideshows.mdx",
+ "each Make guide now holds these prompts as its 'Prompts that work' section; the old URL 301s there (docs.json)",
+ ],
+ [
+ "docs/prompting/product-launch.mdx",
+ "each Make guide now holds these prompts as its 'Prompts that work' section; the old URL 301s there (docs.json)",
+ ],
[
"packages/studio/src/components/renders/useRenderQueueMotionBlur.test.tsx",
"Studio no longer sends previewMotionBlur with renders: blur picks its tier from the page, so the test of that field goes with it",