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

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

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:
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

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

Captures every frame via headless Chrome, encodes with FFmpeg. Output lands in renders/.
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: 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)

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