> ## Documentation Index
> Fetch the complete documentation index at: https://heygen-1fa696a7.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Motion Graphics from a Prompt
> Generate motion graphics and animated text overlays from a natural-language prompt. The HeyGen API outputs broadcast-ready animations, no timeline needed.
## Examples
These were created with Hyperframes + Claude Code in a single session — from idea to MP4 in under 5 minutes each.
HeyGen product promo — animated text, voiceover, motion graphics. Built from a single prompt.
Minerva AI Tutor architecture — animated system diagram with TTS voiceover explaining how each component works.
## The Problem
Motion graphics traditionally require After Effects, Remotion (React), or hiring a designer. AI agents can write code — but most video tools don't speak code. There's no way to go from "make me a product launch video" to a rendered MP4 without a human in the middle.
## How It Works
```
Describe what you want → AI agent writes HTML + GSAP → Preview in browser → Render to MP4
```
Hyperframes turns HTML into video. Your AI coding agent (Claude Code, Cursor, Copilot) writes the HTML composition, and Hyperframes renders it frame-by-frame into a video file.
## Build It
```bash theme={null}
npx hyperframes init my-video
cd my-video
```
This creates a project with an empty composition, installs AI skills, and sets up the preview server. The skills tell your AI agent how to write valid Hyperframes compositions.
Open the project in Claude Code (or your preferred AI agent) and describe the video:
```
Create a 15-second product launch video for "Acme AI" —
dark background, animated headline that types in letter by letter,
stats that count up (10K users, 99.9% uptime, 50ms latency),
and a logo reveal at the end. Vertical 9:16 for social.
```
The agent uses the installed Hyperframes skills to write a valid HTML composition with GSAP animations.
**Write like you're briefing a designer, not writing code.** Describe the vibe, the content, and the pacing. The AI agent handles the implementation — `data-start`, `data-duration`, `class="clip"`, GSAP timeline registration, etc.
```bash theme={null}
npx hyperframes dev
```
Opens a browser preview at `localhost:3002` with hot reload. Edit the composition (or ask your agent to), and changes appear instantly.
Common follow-ups:
* "Make the text bigger"
* "Change the background to a gradient"
* "Speed up the transitions"
* "Add a sound effect when the stats appear"
```bash theme={null}
npx hyperframes render
```
Captures every frame via headless Chrome, encodes with FFmpeg. Output lands in `renders/`.
| Flag | What it does | Default |
| --------------------------------- | -------------- | -------- |
| `--fps 24\|30\|60` | Frame rate | 30 |
| `--quality draft\|standard\|high` | Render quality | standard |
| `--format mp4\|webm` | Output format | mp4 |
Use `--quality draft` while iterating — it's significantly faster. Switch to `standard` or `high` for the final export.
## What Makes a Good Prompt
Based on testing 13+ videos in a single session:
| Approach | Result |
| ----------------------------------------------------- | ---------------------------------------------------------------------------------- |
| "Make a video about X" | Works, but generic. Agent defaults to dark bg + centered text. |
| "Make a video about X, inspired by \[specific style]" | Much better. Give a reference and the agent adapts. |
| "Make a video about X" + 2-3 rounds of feedback | Best results. Start broad, then refine ("make it more playful", "less corporate"). |
**1-3 prompts** gets you a good result if you describe the idea clearly. Complex compositions (multi-scene, data-driven) take 3-6 prompts.
## Beyond Text and Shapes
Hyperframes renders anything a browser can render. This means:
* **SVG animations** — Logo reveals, icon transitions, animated illustrations
* **Canvas/WebGL** — Particle systems, generative art, 3D scenes
* **Data visualizations** — Charts, graphs, dashboards that animate
* **Game-like content** — Simulations, interactive-looking demos
* **Math-driven patterns** — Physics simulations, algorithmic art
If you can build it in a browser, Hyperframes can turn it into a video.
## Add Audio
Hyperframes supports audio tracks natively. You can:
1. **Use HeyGen TTS** to generate voiceover (see [Voices](/docs/voices/speech))
2. **Add music** as an `