Source: Prompt Guide — HeyGen HyperFrames docs
The canonical reference for prompting Claude Code, Cursor, Codex, Google Antigravity, GitHub Copilot CLI, and other AI agents to author HyperFrames compositions. Because HyperFrames is built for agents — compositions are plain HTML, the CLI is non-interactive, and the framework ships installable skills — the prompt vocabulary is the steering wheel: the right adjective maps to a specific framework setting without you specifying technical details. This page reproduces the full vocabulary cribs (easing, captions, transitions, audio-reactive, marker highlights, TTS, render quality) plus the two prompt shapes and copy-pasteable examples. For the framework overview, packages, and rendering model, see the hub HeyGen Hyperframes.
Key Takeaways
- Two prompt shapes. Cold start = describe the video from scratch (duration, aspect ratio, mood, elements). Warm start = feed a URL / PDF / CSV / transcript and have the agent synthesize it — richer, because the agent does research and production in one flow.
- Always lead with
/hyperframes. It loads the routing + composition context explicitly so the agent picks the right workflow and gets the rules right the first time. - One install command, eight core skills.
npx skills add heygen-com/hyperframesregisters the core skills as slash commands;--alladds every optional workflow too. - Vocabulary maps to settings. Natural-language adjectives (smooth / snappy / hype / calm) resolve to exact GSAP eases, typography, transitions. The tables below are the highest-value cribs.
- Iterate conversationally. After the first render, talk to the agent like a video editor — small targeted edits beat re-specifying from scratch.
- Defaults: 1920x1080, 30fps if you don’t say otherwise. TTS runs locally via Kokoro, no API key.
- Claude Design uses a different setup — attach the skill file to the chat (don’t paste the URL).
Install and route with /hyperframes
Install the skills once per project (or globally for your agent):
npx skills add heygen-com/hyperframesThe installer shows a picker. In Claude Code, restart the session after installing — the skills register as slash commands. Start every request at /hyperframes: it orients the agent to the whole surface and routes “make me a video” intent to the right workflow.
Core skills (install all):
| Slash command | What it loads |
|---|---|
/hyperframes | Read first. Entry skill — capability map + video router |
/hyperframes-core | Composition contract — HTML structure, data-* attributes, clips, tracks |
/hyperframes-animation | All animation — motion rules, scene blueprints, transitions, runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) |
/hyperframes-creative | Creative direction — design spec, palettes, typography, narration, beats |
/hyperframes-cli | Dev-loop CLI — init, lint, inspect, preview, render, doctor |
/hyperframes-media | Asset preprocessing — tts, transcribe, remove-background |
/hyperframes-registry | Block and component installation via hyperframes add |
/general-video | General authoring workflow — fallback for any video that doesn’t match a specific workflow |
Optional workflows (add the ones matching your inputs; /hyperframes routes to whichever you’ve installed):
| Slash command | Input → output |
|---|---|
/product-launch-video | Product URL / brief / script → launch or promo video |
/website-to-video | A general website / URL → a video of the site (tour / showcase / social clip) |
/faceless-explainer | Arbitrary text (no URL) → faceless explainer with its own TTS narration |
/pr-to-video | A GitHub PR → code-change explainer |
/embedded-captions | Existing talking-head video → same footage with captions / subtitles |
/talking-head-recut | Existing talking-head video → footage packaged with designed graphic cards |
/motion-graphics | A short, unnarrated, design-led motion graphic (logo sting, kinetic type, stat / chart) |
/remotion-to-hyperframes | Port an existing Remotion (React) composition to HyperFrames HTML |
To skip the picker and install everything (core + every workflow) in one shot:
npx skills add heygen-com/hyperframes --allCold start vs warm start
Most successful HyperFrames prompts fall into one of two shapes.
Cold start — describe the video
You tell the agent what you want from scratch. Best for greenfield work where you already hold the creative direction. Specify:
- Duration — “10 seconds”, ”30s”, “5 scenes of 3s each”
- Aspect ratio — “16:9”, “9:16 vertical”, “1:1 square” (defaults to 1920x1080 otherwise)
- Mood / style — “minimal Swiss grid”, “warm grain analog”, “high-energy social”
- Key elements — title, lower third, captions, background video, music
Using /hyperframes, create a 10-second product intro with a fade-in
title over a dark background and subtle background music.Make a 9:16 TikTok-style hook video about [topic] using /hyperframes,
with bouncy captions synced to a TTS narration.Warm start — turn context into a video
You hand the agent something to work with — a URL, a doc, a CSV, a transcript — and ask it to synthesize that into a video. This is where HyperFrames shines: the agent does the research/summarization step and the production step in one flow, so the output is grounded in something specific instead of invented copy.
Take a look at this GitHub repo https://github.com/heygen-com/hyperframes
and explain its uses and architecture to me using /hyperframes.Summarize the attached PDF into a 45-second pitch video using /hyperframes.Read this changelog and turn the top three changes into a 30-second
release announcement video using /hyperframes.Turn this CSV into an animated bar chart race using /hyperframes.Vocabulary tables
The skills map natural-language adjectives to specific framework settings. Using the right word gets the right result without specifying technical details. These tables are the load-bearing cribs — reproduced verbatim from the guide.
Motion and easing
Describe how motion should feel and the agent picks the matching GSAP ease:
| Say this | Agent uses | Feels like |
|---|---|---|
| smooth | power2.out | Natural deceleration |
| snappy | power4.out | Quick and decisive |
| bouncy | back.out | Overshoots then settles |
| springy | elastic.out | Oscillates into place |
| dramatic | expo.out | Fast start, long glide |
| dreamy | sine.inOut | Slow, symmetrical |
Timing shorthand: fast (0.2s) = energy, medium (0.4s) = professional, slow (0.6s) = luxury, very slow (1–2s) = cinematic.
Caption tones
Describe the energy of your captions and the agent picks matching typography, size, and animation:
| Tone | Typography | Animation | Size range |
|---|---|---|---|
| Hype | Heavy weight fonts | Scale-pop | 72–96px |
| Corporate | Clean sans-serif | Fade + slide | 56–72px |
| Tutorial | Monospace | Typewriter | 48–64px |
| Storytelling | Serif | Slow fade | 44–56px |
| Social | Rounded, playful | Bounce | 56–80px |
"Hype-style captions with scale-pop"
"Calm, elegant subtitles with slow fades"
"Karaoke-style word highlighting"Per-word styling also works:
"Make brand names larger with accent color"
"Add bounce to emotional keywords"
"Highlight numbers differently"Transitions
Every multi-scene composition benefits from transitions. Describe the energy level:
| Energy | CSS option | Shader option |
|---|---|---|
| Calm | Blur crossfade | Cross-warp morph |
| Medium | Push slide | Whip pan |
| High | Zoom through | Glitch, ridged burn |
Or describe by mood:
"Warm transitions for this wellness brand"
"Cold, clinical transitions for tech"
"Playful bouncy transitions"
"Dramatic zoom for the reveal"Audio-reactive animation
Map audio frequency bands to visual properties. The agent uses these defaults:
| Audio band | Maps to | Visual effect |
|---|---|---|
| Bass | scale | Pulse on the beat |
| Treble | glow | Shimmer intensity |
| Amplitude | opacity | Breathing |
| Mids | shape | Morphing |
"Make the text pulse with the beat"
"Add bass-driven scale to the logo"
"Create glow that responds to treble"Keep audio-reactive effects subtle for text (3–6% intensity). Go bigger for backgrounds (10–30%).
Marker highlights
Hand-drawn emphasis effects for text:
| Mode | Effect | Best for |
|---|---|---|
highlight | Marker sweep | Key phrases |
circle | Hand-drawn ellipse | Single words |
burst | Radiating lines | Hype moments |
scribble | Chaotic scratch | Crossing out |
sketchout | Rectangle outline | Callouts |
"Add a marker highlight sweep on 'revolutionary'"
"Circle this keyword with hand-drawn effect"
"Add burst lines around 'AMAZING'"Text-to-speech voices
TTS runs locally via Kokoro (no API key needed). Describe the content and the agent picks a voice, or request one directly:
| Content type | Recommended voices |
|---|---|
| Product demo | af_heart, af_nova |
| Tutorial | am_adam, bf_emma |
| Marketing | af_sky, am_michael |
"Generate narration for this script"
"Create voiceover with a professional female voice"
"Add TTS with British male voice at 1.1x speed"Rendering quality
| Quality | Use for |
|---|---|
draft | Fast iteration |
standard | Review and feedback |
high | Final delivery |
"Quick draft render"
"Render at high quality"
"Export as transparent WebM"Copy-pasteable example prompts
The cold-start, warm-start, and iteration blocks above are all copy-pasteable as-is. Two more grab-and-go references from the guide:
Claude Design brief (attach the skill file, don’t paste the URL). Download claude-design-hyperframes.md from GitHub and attach it to the chat — file attachments produce better output than a pasted URL. Then a structured brief like this produces a valid first draft (brand identity, scene content, animations, transitions):
Use the attached skill. 25-second LinkedIn video for my startup.
Problem: Sales teams waste 3 hours/day on manual CRM updates.
Solution: AutoCRM — AI that logs every call, email, and meeting.
Traction: 200+ teams, $1.2M ARR, 18% MoM growth.
CTA: autocrmhq.comDownload the ZIP and refine in any AI coding agent with npx hyperframes preview running. See HyperFrames in Claude Design for the full workflow.
Recommended end-to-end loop (the CLI sequence the guide ships):
npx hyperframes init my-video # scaffold (skills install automatically)
# open the project in Claude Code (or Cursor / Codex), then prompt with /hyperframes
npx hyperframes preview # watch in the browser as the agent edits
# iterate with small targeted prompts
npx hyperframes render --output final.mp4Per-agent notes
- Invocation. Start prompts with
/hyperframes(or invoke the skill another way for non-Claude agents). It loads routing + composition context explicitly so the agent gets the rules right the first time. - Claude Code. Skills register as slash commands after
npx skills add ...; restart the session after installing so the commands appear. This is the path the guide’s examples assume. - Cursor, Codex, Google Antigravity, GitHub Copilot CLI, “and other AI agents.” The guide names these as supported. Non-Claude agents “invoke the skill another way” rather than via a slash command. (The guide details only Claude Code’s slash-command registration; it does not document each agent’s exact invocation syntax.)
- Claude Design is a separate surface with its own setup: attach
claude-design-hyperframes.mdto the chat (see the Copy-pasteable section above), then refine the downloaded ZIP in any coding agent. - Cross-runtime breadth. For the broader runtime list (including Gemini CLI and Hermes Agent) and the cross-runtime SKILL.md design, see the hub HeyGen Hyperframes and Claude Code Skills Ecosystem.
Iteration prompts
HyperFrames is a conversation. After the first render, talk to the agent the way you’d talk to a video editor — don’t re-prompt from scratch. The agent already has the composition open and the skills loaded, so small targeted edits produce better results than long re-specifications.
Make the title 2x bigger.
Swap to dark mode.
Add a fade-out at the end and a lower third at 0:03 with my name and title.
The captions are too small and they overlap the lower third. Move them up and shrink them.
Replace the background music with assets/track.mp3.Targeted-edit > re-specify is the core discipline: change one thing per turn, watch the live preview, repeat.
Anti-patterns to avoid
These cause friction or wrong output (the skills enforce the rules automatically, but your prompt can still fight them):
- Don’t ask for React / Vue components. Compositions are plain HTML with
data-*attributes and a GSAP timeline; asking for “a React component for the intro” forces the agent to translate later. - Don’t ask for 4K or 60fps unless you need it. Defaults (1920x1080, 30fps) render fast and look great; higher specs slow rendering meaningfully.
- Don’t skip the slash command. Without
/hyperframes, the agent may guess at HTML video conventions instead of the framework’s actual rules (class="clip"on timed elements,window.__timelinesregistration, etc.). - Don’t paste long error logs without context. Run
npx hyperframes lintandnpx hyperframes validatefirst — lint catches structural issues, validate catches runtime errors (JS exceptions, missing assets, contrast problems). - Don’t assume the agent knows your assets. Mention file paths explicitly (
assets/intro.mp4,assets/logo.png) — a hint speeds it up. See Common Mistakes for pitfalls the linter can’t catch.
Try It
- Install the skills (
npx skills add heygen-com/hyperframes), restart Claude Code, then run one cold-start prompt and one warm-start prompt (feed a blog post, ask for a 45s pitch video). Compare how much richer the warm-start output is. - Keep the vocabulary tables open while you prompt — say “snappy”, “hype captions”, “calm transitions”, “draft render” and watch how each adjective changes the result. These cribs are reusable for any motion tool, not just HyperFrames.
- Practice the iteration discipline: after the first render, make exactly one targeted edit per turn (“title 2x bigger”, “swap to dark mode”) with
npx hyperframes previewrunning.