Skip to main content

​
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.

​
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

1

Install and scaffold

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.
2

Describe what you want to your AI agent

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.
3

Preview and iterate

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”
4

Render to MP4

npx hyperframes render
Captures every frame via headless Chrome, encodes with FFmpeg. Output lands in renders/.
FlagWhat it doesDefault
--fps 24|30|60Frame rate30
--quality draft|standard|highRender qualitystandard
--format mp4|webmOutput formatmp4
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:
ApproachResult
”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 feedbackBest 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)
  2. Add music as an <audio> element with data-start and data-volume
  3. Synthesize sounds programmatically (sorting visualizers, game SFX)
<audio id="voiceover" data-start="0" data-track-index="5"
       data-volume="0.9" src="voiceover.wav"></audio>
<audio id="music" data-start="0" data-track-index="6"
       data-volume="0.3" src="background.mp3"></audio>

​
Next Steps

Data Visualization Videos

Turn data into animated video — charts, dashboards, algorithmic visualizations.

Automated Pipeline

CI/CD integration for continuous video generation from data.

Hyperframes Docs

Full framework reference — data attributes, templates, rendering options.