HyperFrames by HeyGen turns your HTML, CSS & JavaScript into deterministic, frame-accurate video files. No new DSL. No React. Just the web stack LLMs already know.
npm install -g hyperframes
hyperframes init my-video
cd my-video && hyperframes preview
hyperframes render
Everything you need to create professional videos with code
Write video compositions in standard HTML with a few data-* attributes. No proprietary DSL or framework-specific syntax to learn.
Built for AI coding agents. Includes slash commands for Claude Code, Cursor, and Gemini CLI. Non-interactive CLI for CI/CD pipelines.
Seek-driven frame capture via headless Chrome + FFmpeg encoding. Same HTML always produces the identical MP4. Reproducible builds.
Browser-based editor with hot reload. See changes instantly as you code. Separate @hyperframes/studio package for visual editing.
Pre-built components: transitions, charts, social overlays, lower thirds, app showcases. Install with npx hyperframes add <block>.
GSAP timelines, Lottie vectors, CSS animations, Three.js 3D, WebGL shader transitions, and audio-reactive effects.
No cloud services, no API keys, no subscriptions. Everything renders on your machine. Your data stays private.
Render to MP4, MOV, or WebM. Customizable resolution, FPS (24/30/60), and quality presets (draft, standard, high).
See how HyperFrames compares to other programmatic video tools
| Feature | HyperFrames | Remotion | Raw FFmpeg |
|---|---|---|---|
| Language | HTML/CSS/JS | React/TypeScript | CLI flags |
| AI Agent Friendly | ✓ Built-in skills | ✗ Complex API | ✗ Hard to generate |
| Learning Curve | Minimal (HTML) | Medium (React) | Steep |
| Deterministic Output | ✓ Seek-driven | ✓ | ✓ |
| Live Preview | ✓ Hot reload | ✓ | ✗ |
| Component Library | 50+ blocks | Community packages | ✗ None |
| GSAP Animation | ✓ First-class | Via wrapper | ✗ |
| 3D / WebGL | ✓ Three.js + shaders | ✓ | ✗ |
| Audio Mixing | ✓ Automatic | ✓ | ✓ Manual |
| CI/CD Integration | ✓ Non-interactive CLI | ✓ | ✓ |
| License | Apache 2.0 | Custom (paid for companies) | LGPL/GPL |
| Setup Complexity | npm install | npm install + config | System deps |
See how easy it is to create videos with HTML
<!-- composition.html -->
<div data-composition-id="hello-world"
data-width="1920" data-height="1080"
data-fps="30">
<div class="clip" data-start="0" data-end="5">
<h1 style="
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 72px;
color: white;
font-family: sans-serif;
">Hello, HyperFrames!</h1;
</div>
</div>
<style>
body { margin: 0; background: #1e1b4b; }
</style><!-- gsap-animation.html -->
<div data-composition-id="animated-intro"
data-width="1920" data-height="1080"
data-fps="30">
<div class="clip" data-start="0" data-end="4">
<div id="title" style="opacity:0; font-size:80px;
color:white; text-align:center; margin-top:40vh">
Your Brand
</div>
<div id="subtitle" style="opacity:0; font-size:36px;
color:#a5b4fc; text-align:center; margin-top:20px">
Made with HyperFrames
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline();
tl.to("#title", { opacity: 1, y: -30, duration: 1, ease: "power3.out" })
.to("#subtitle", { opacity: 1, y: -20, duration: 0.8 }, "-=0.3")
.to("#title, #subtitle", { opacity: 0, duration: 0.5 }, "+=1.5");
</script><!-- multi-clip.html -->
<div data-composition-id="product-demo"
data-width="1920" data-height="1080"
data-fps="30">
<!-- Scene 1: Title Card -->
<div class="clip" data-start="0" data-end="3">
<h1>Product Launch</h1>
</div>
<!-- Scene 2: Feature Demo -->
<div class="clip" data-start="3" data-end="8">
<video src="demo.mp4" autoplay muted></video>
<div class="lower-third">Key Feature #1</div>
</div>
<!-- Scene 3: Call to Action -->
<div class="clip" data-start="8" data-end="12">
<h2>Try It Free</h2>
<p>hyperframes.dev</p>
</div>
<!-- Background audio -->
<audio src="bgm.mp3" data-start="0" data-volume="0.3"></audio>
</div>Essential commands for the HyperFrames CLI
hyperframes init <name>
Create a new HyperFrames project with template files, package.json, and default composition.
hyperframes preview
Start the live preview server with hot reload. Opens your composition in the browser for real-time editing.
hyperframes render [file]
Render your composition to video. Defaults to MP4. Add --quality high for production output.
hyperframes render --format webm
Render to WebM format. Also supports --format mov. Set FPS with --fps 60.
hyperframes lint
Check your composition for common errors: missing data attributes, overlapping clips, invalid timing.
npx hyperframes add <block>
Install a block from the catalog. Example: npx hyperframes add social-overlay.
hyperframes render --quality draft
Fast draft render for iteration. Lower resolution and faster encoding. Perfect for previewing changes.
hyperframes render --resolution 720p
Render at 720p (1280x720). Also supports 1080p, 4k, or custom WxH.
50+ reusable components ready to install
Install any block: npx hyperframes add <block-name>
HyperFrames is built agent-first. Your AI creates videos from natural language.
"Make a 30s product demo with animated charts"
Claude Code / Cursor generates composition
Live browser preview with hot reload
Deterministic video output
/hyperframes skill
.cursor/rules integration
GEMINI.md instructions
Estimate how long your video will take to render
HyperFrames is organized as a well-structured monorepo
hyperframesMain CLI package. Commands: init, preview, render, lint, add. Your primary interface.
@hyperframes/coreTypes, parser, linter, and runtime. The shared foundation for all packages.
@hyperframes/engineHeadless browser frame capture. Puppeteer-based seek-driven rendering engine.
@hyperframes/producerFFmpeg encoding pipeline. Combines captured frames + audio into final video.
@hyperframes/studioBrowser-based visual editor with timeline UI, hot reload, and component inspector.
@hyperframes/playerEmbeddable <hyperframes-player> web component for previewing compositions.
Everything you need to know about HyperFrames
data-* attributes — no framework needed. This makes it far more accessible to AI agents that already excel at writing HTML. It's also Apache 2.0 licensed (Remotion has a paid company license).npm install -g hyperframes. Works on macOS, Linux, and Windows.hyperframes render --output video.mp4 in your pipeline. Deterministic rendering means the same input always produces identical output.<audio> elements with data-start and data-volume attributes. It also supports TTS/captions integration and audio-reactive visual effects.