HeyGen Hyperframes Prompts for Editing Videos: 40+ Working Examples
40+ HeyGen Hyperframes editing prompts — captions, music, transitions, layout, audio-reactive motion, and the full slash-command workflow for AI-rendered videos.
40+ HeyGen Hyperframes editing prompts — captions, music, transitions, layout, audio-reactive motion, and the full slash-command workflow for AI-rendered videos.
HeyGen Hyperframes is the most interesting thing HeyGen has shipped this year, and almost nobody is talking about it correctly. It is not a feature inside the HeyGen avatar product — it is a developer-facing skill that turns natural-language prompts into rendered video, using HTML compositions and GSAP timelines, driven through Claude Code, Cursor, Codex, or GitHub Copilot CLI.
In practice that means you can write /hyperframes make the title 2x bigger in your IDE, and an actual MP4 comes out at the other end. No timeline software, no manual keyframing, no After Effects. Just prompts.
This post is the working library of editing prompts we use. 40+ examples across eight categories, every one tested against the official Hyperframes prompting guide, every one a real edit you would make in a real video. No BlogPrompt copy buttons here — just clean, copyable text. Lift any line into your terminal.
Quick correction for anyone who has read about Hyperframes as a "scene-based avatar feature." That is not what it is.
Hyperframes is a HeyGen-published skill that registers slash commands inside AI coding tools. You install it once with npx skills add heygen-com/hyperframes, and from then on, every prompt prefixed with /hyperframes routes to the Hyperframes pipeline. The pipeline:
It runs in Claude Code, Cursor, Codex, GitHub Copilot CLI, and Claude Design. The CLI itself exposes init, lint, inspect, preview, render, and doctor. There is a companion skill, /website-to-hyperframes, that turns a URL into a finished video in one pass.
Pro tip: Always prefix your prompt with /hyperframes. The official guide is explicit: skip the slash command and the agent guesses at conventions, and you lose the skill context that makes the rest of the prompt actually work.
Every Hyperframes session opens with one of two patterns. Pick the one that matches what you are starting from.
Cold start. Describe the video from scratch. Use this when there is no source material — you are generating something new.
/hyperframes Using a clean dark background, create a 10-second product intro with a fade-in title over subtle background music. 16:9, snappy motion, corporate tone.
Warm start. Hand the agent a source — a URL, a GitHub repo, a transcript — and ask it to produce a video from that material. Use this when the video has to be grounded in something specific.
/hyperframes Take a look at this GitHub repo https://github.com/example/project and explain its uses in a 60-second walkthrough video. Storytelling caption tone, medium-energy transitions, 9:16 vertical for social.
After the first render, you stop describing the whole video from scratch. You talk to the agent the way you would talk to a human editor — short, iterative, targeted at the thing you want to change.
Hyperframes maps natural-language adjectives to framework settings. Knowing the vocabulary is half the prompt skill. From the official guide:
| Axis | Vocabulary | What it controls |
|---|---|---|
| Motion / easing | smooth, snappy, bouncy, springy, dramatic, dreamy | GSAP eases on every animation |
| Caption tone | hype, corporate, tutorial, storytelling, social | Typography + animation pairings |
| Transitions | calm (blur crossfade), medium (push slide), high (zoom through) | Scene-to-scene cuts |
| Mood-based transitions | warm, cold, playful, dramatic | Color and motion treatment |
| Audio-reactive | bass → scale, treble → glow, amplitude → opacity, mids → shape | Animation tied to audio frequency bands |
| Marker highlights | highlight sweep, hand-drawn circle, burst lines, scribble, rectangle outline | Drawn-on emphasis effects |
When in doubt, use a vocabulary word from the table above instead of a custom description. "Bouncy" is a known mapping; "kind of springy but not too much" is interpreter-dependent.
The first prompt of any new video. Aim to specify duration, aspect ratio, mood, and the key elements upfront. The rest you can refine after the first render.
/hyperframes Create a 10-second product intro with a fade-in title "Acme Pro 3", a thin underline that draws in, and corporate caption tone. Dark background, smooth motion, 1920×1080./hyperframes Make a 15-second vertical 9:16 hook for a new launch. Hype caption tone with scale-pop on emotional keywords, high-energy transitions, audio-reactive bass → scale on the logo. Use assets/track.mp3 as background music./hyperframes Build a 6-second intro card for a tutorial titled "Set up Postgres in 5 minutes." Tutorial caption tone, calm transitions, snappy easing on the title slide-in. Add a lower third at 0:02 with my name "Alex Rivera" and role "Developer Advocate."/hyperframes Open with a black frame. At 0:01, fade in a single sentence in white: "Two engineers walk into a kitchen at 2am." Storytelling caption tone, dreamy easing. Hold for 4 seconds. Total duration 6 seconds, 16:9./hyperframes Create a 12-second scene that counts up from 0 to 1,247 over 4 seconds, then holds with the label "support tickets closed this month." Snappy motion on the counter, smooth easing on the label fade-in. Cool mood transition into the next scene./hyperframes Generate a 5-second bumper to insert before my talking-head video. Brand color accent, the words "Episode 12" in large type, episode title "Why Latency Wins" in smaller type below. Springy entrance animation, calm exit transition.Captions are the most-edited element of any Hyperframes video. The official guide explicitly recommends iterative caption edits over re-prompting from scratch.
/hyperframes Make the title 2x bigger./hyperframes The captions are too small and they overlap the lower third. Move them up and shrink them./hyperframes Switch all captions to hype-style with scale-pop on emotional keywords. Keep the timing identical./hyperframes Make brand names larger and apply the accent color. Bounce on the first appearance of each brand./hyperframes Add bounce easing to emotional keywords across the captions — words like "shocked", "love", "wait what"./hyperframes The third caption shows up half a second too early. Push it to 0:08.4 and shorten it to 1.2 seconds so it does not collide with the next scene./hyperframes At 0:05, add a hand-drawn circle marker highlight around the word "free" in the caption. Hold for 0.8 seconds, then fade out./hyperframes Convert the captions to TikTok-style — two words per line, large bold typography, current word highlighted in the accent color. Keep the existing timing.Hyperframes uses Kokoro for local TTS (no API key required) and treats audio as a first-class composition input. Audio-reactive animation is one of the strongest features — and one of the most underused.
/hyperframes Replace the background music with assets/track.mp3. Match the existing volume curve./hyperframes Duck the background music to -18 dB whenever narration is playing, and ramp back up over 0.6 seconds when narration ends./hyperframes Generate narration using Kokoro for the script in assets/script.txt. Use a marketing voice tone. Place the audio file at assets/narration.mp3 and reference it in the composition./hyperframes Make the logo pulse on the bass of the background track. Bass → scale, range 1.0 to 1.08. Smooth easing between beats./hyperframes The track has a clear drop at 0:12. Cut the music sharply at 0:11.7 for a 0.3-second silence, then resume on the drop. Snap the next scene transition to land on that drop./hyperframes Switch the narration voice to the tutorial-style Kokoro voice. The current voice is too marketing-flavoured for an educational explainer.The energy curve of a video is largely the transition vocabulary. Use the named levels — calm / medium / high — and the mood words for finer control.
/hyperframes Switch all transitions to calm — blur crossfade between scenes. Soften easing on entrance animations to smooth./hyperframes Make the first transition high-energy zoom-through. Keep the rest of the transitions medium so the opener pops without being exhausting./hyperframes The transition into scene 4 should feel cold. Use a desaturated push slide with a slight blue tint. Hold the color shift for 0.5 seconds before the next caption appears./hyperframes Snappy entrance animation on every title element across all scenes. Use spring easing with a slight overshoot./hyperframes Add a fade-out at the end, 1.2 seconds, with the music ducking to silence over the same curve./hyperframes The callout box at 0:07 should bounce into frame from the right with springy motion. Hold for 2 seconds, then exit with a calm fade. Add a hand-drawn underline beneath the text while it is visible./hyperframes Swap to dark mode. Adjust caption colors so contrast stays above 4.5:1. Keep the accent color unchanged./hyperframes Reframe the entire composition to 9:16 vertical. Center subjects vertically. Move the lower third to the top-third area so it does not collide with platform UI overlays./hyperframes Add a lower third at 0:03 with my name "Alex Rivera" and title "Developer Advocate". Hold for 4 seconds, exit with a calm slide-out to the left./hyperframes Update the accent color from #FF6B6B to #6366F1 across all scenes — title underlines, caption highlights, marker effects. Keep all other colors identical./hyperframes Audit all text elements for safe margins. Nothing should sit within 64px of any edge at 1080p. Move offenders inward and report the changes you made./hyperframes Trim the video to exactly 30 seconds. Compress scene 3 (currently 7 seconds) and scene 5 (currently 5 seconds) — both have dead air mid-scene. Keep the opening and closing 5 seconds untouched./hyperframes Move the title bounce to land on the 0:04 downbeat of the background track. Shift the rest of the timeline by the resulting offset./hyperframes Scene 2 feels rushed at 3 seconds. Stretch it to 4.5 seconds. Slow the caption typewriter to match the new duration. Push every subsequent scene by the delta./hyperframes Lock the average scene length to 2.5 seconds across the whole video. Split any scene longer than 4 seconds. Merge any two adjacent scenes that are each under 1.5 seconds./hyperframes Add a 0.5-second hold between scene 4 and scene 5. Quiet the music slightly through the hold so the next caption lands with impact.Warm-start patterns are where Hyperframes is genuinely faster than any other workflow. You hand it source material and get a finished cut.
/website-to-hyperframes https://example.com/product-launch. Produce a 60-second explainer in storytelling tone. Pull the top three benefits from the page. 16:9, smooth motion, neutral mood./hyperframes Take a look at this GitHub repo https://github.com/example/cli-tool and explain what it does in a 45-second tutorial-style video. Show three code snippets from the README as on-screen text. Calm transitions./hyperframes Read the transcript at assets/podcast-transcript.txt. Pull the four strongest soundbites under 12 seconds each. Produce a 60-second highlight reel with hype-style captions, audio-reactive treble → glow on the speaker overlay./hyperframes Convert the blog post at assets/post.md into a 45-second 9:16 vertical Short. Hook in the first 3 seconds. Three key points with snappy transitions. End on a one-line CTA. Social caption tone./hyperframes Read the thread export at assets/launch-thread.json. Build a 30-second internal recap video — names of contributors as on-screen text, the outcome as the closing card. Corporate caption tone, calm motion, dark mode.These are the small, surgical prompts you write after the first render to take the video from "rough" to "shippable." Iterate one element at a time — Hyperframes responds better to surgical edits than to full re-specifications.
/hyperframes The exit on scene 3 feels abrupt. Add a 0.4-second fade and hold the final frame for 0.6 seconds before the cut./hyperframes Run a final pass — check caption safe areas, music ducking under narration, accent-color consistency, and no scene under 1.5 seconds. Report what you changed and what you left alone./hyperframes Re-render at high quality preset. Keep 1920×1080 and 30fps — do not jump to 4K or 60fps. Output to /out/final.mp4./hyperframes I updated assets/logo.png. Re-render only the scenes that reference it. Keep the other scene caches intact./hyperframes Run hyperframes doctor first, fix any issues it surfaces, then render to /out/final.mp4. Report the doctor output before re-rendering if it finds anything I should know about.From two weeks of running Hyperframes in production plus the official guide, the patterns that consistently produce good edits:
/hyperframes (or /website-to-hyperframes). The slash command loads skill context. Skip it and the agent guesses at conventions.assets/track.mp3 beats "the music file." The agent does not know your filesystem.hyperframes lint and hyperframes doctor before render. Most broken renders come from a technical-rule violation that lint catches immediately.The official guide is explicit about anti-patterns. These are the ones that bite hardest.
/hyperframes, the model has no skill context.hyperframes lint first and paste its output, not the raw stack trace.And the technical rules — these are enforced by the skill automatically, but understanding them tells you why some prompts fail:
window.__timelines — the renderer must know about every animation.muted — audio belongs in separate <audio> elements.Math.random() — breaks deterministic rendering across frames.await during GSAP setup.class="clip" plus data-start, data-duration, and data-track-index.The guide warns plainly: "Breaking [these technical rules] produces incorrect renders." Best-practice rules like "add entrance animations to every scene" can be overridden — technical rules cannot.
One-time setup, from a fresh project:
npx skills add heygen-com/hyperframes.npx hyperframes init. This creates the composition scaffold, the asset folder, and the registry file.npx hyperframes doctor. Resolve anything it flags before your first prompt./hyperframes slash command registers automatically./hyperframes Create a 5-second intro with the title "Hello world" on a dark background. 16:9, smooth motion. Render it. If you get a clean MP4, the setup is good.Companion skill: npx skills add heygen-com/website-to-hyperframes registers /website-to-hyperframes, which handles the URL-to-video pipeline end to end.
Hyperframes is not a replacement for every video tool. It is a sharp specific lane. Where it wins:
Where Hyperframes is the wrong tool:
For the avatar lane, our full HeyGen review covers the platform that pairs with Hyperframes. For broader video model comparisons, see Gemini Omni vs Seedance 2.0 vs Kling 3.0 vs Wan 2.7.
To make the prompt patterns concrete, here is one real session — the prompts in the order we ran them last week to ship a 45-second product update video.
/website-to-hyperframes https://example.com/changelog. 45-second product update video. Storytelling tone. Pull the top three updates. 16:9. Smooth motion./hyperframes The opening title is too small. Make it 1.5x bigger and move it down 80px so it does not collide with the top safe margin./hyperframes Switch caption tone from storytelling to hype-style with scale-pop on emotional keywords./hyperframes Add a hand-drawn circle marker around the word "rebuilt" in scene 2. Hold 0.6 seconds, fade out./hyperframes Replace the background music with assets/upbeat-corp.mp3. Duck to -18 dB under narration./hyperframes Audio-reactive: bass → scale on the brand mark in the closing card. Range 1.0 to 1.06./hyperframes Trim to exactly 45 seconds. Compress scene 3 — there is half a second of dead air at the end of it./hyperframes Run hyperframes lint, fix anything it surfaces, then render at high quality to /out/changelog-final.mp4.End-to-end time: 22 minutes including renders. Equivalent work in After Effects: a half-day, conservatively.
Hyperframes is the closest thing to "video as a programmable artifact" that anyone has shipped. It is not for every video — but in its lane (templated, caption-heavy, source-grounded, fast-turnaround), it is genuinely faster than the manual-editing workflow it replaces. And because the entire video is code, every prompt above composes into the next: the edit you make today is reusable as a template tomorrow.
The 40+ prompts above cover the everyday editing surface — captions, music, transitions, layout, timing, source ingestion, and polish. Run them on your first project for a week, save the variants that worked, and you will have your own internal editing library that beats anything any prompt-pack site can give you.
10 questions answered
npx skills add heygen-com/hyperframes and prefix prompts with /hyperframes. Compositions are plain HTML driven by GSAP timelines, rendered at 1920×1080 / 30fps by default.Math.random() introduces non-determinism, which means frames stop matching between passes and the video gets visual artifacts. Use seeded random helpers if you need pseudo-randomness.npx hyperframes init flow.Free AI Image Generation in the Terminal: ChatGPT Plus + Gemini Guide
Jun 12 · 12 min
How to Use Claude Code for FREE: The Complete 2026 Guide
Jun 12 · 14 min
How to Create a UI Design Skill Using design.md
Jun 12 · 19 min
AI Skills vs Prompts: What's the Difference?
Jun 11 · 18 min
Claude Fable 5 Prompts for Web Developers: UI, Code Review, Debugging
Jun 11 · 18 min