HyperFrames: HeyGens Open-Source Framework for Writing Videos as HTML

HyperFrames is an open-source video rendering framework by HeyGen that lets you write videos as standard HTML, CSS, and JavaScript and render them to MP4, WebM, or MOV. Its tagline says it all: “Write HTML. Render video. Built for agents.”

At version v0.4.11 (April 2026) and licensed under Apache 2.0, HyperFrames represents a fundamentally different approach to programmatic video creation — one built from the ground up for AI coding agents rather than human video editors.

Table of Contents

1. What Makes HyperFrames Different?
2. How It Works
3. Quick Start
4. Built for AI Agents
5. Design System Presets
6. Pre-Built Components
7. The Rendering Pipeline
8. Built-In TTS and Captions
9. Website Capture
10. Frame Adapter Pattern
11. Deterministic Rendering
12. Current Limitations
13. Getting Started

What Makes HyperFrames Different?

Before HyperFrames, the standard approach to code-driven video was Remotion, which requires React (TSX) components and a full bundler pipeline. HyperFrames strips that away entirely:

The core insight is that AI coding agents already “speak” HTML and CSS fluently. By removing the React dependency and the bundler, HyperFrames makes it dramatically easier for agents to compose videos autonomously.

How It Works

A HyperFrames composition is an HTML file with special data-* attributes that control timing, layering, and rendering behavior. GSAP (GreenSock Animation Platform) handles the actual animations.

<!-- A basic HyperFrames composition -->
<div data-duration="5" data-track-index="1">
  <h1>Hello, Video World</h1>
  <p class="slide-in">This text animates onto the screen</p>
</div>

Core Attributes

Compositions are plain HTML files that you can preview in a browser just like any web page, then render to video through the CLI.

Quick Start

The CLI workflow is intentionally minimal:

# Initialize a new project
npx hyperframes init my-video

# Preview with live reload in the browser
npx hyperframes preview

# Render to MP4
npx hyperframes render

That is the entire workflow. No bundler configuration, no build step, no framework boilerplate.

Built for AI Agents

This is where HyperFrames truly distinguishes itself. The framework ships with an installer that teaches your AI coding agent how to compose videos:

npx skills add heygen-com/hyperframes

Once installed, agents gain access to three dedicated slash commands:

• /hyperframes — Compose a new video from scratch
• /hyperframes-cli — Help with CLI commands and project setup
• /gsap — GSAP animation assistance and syntax reference

These commands work across Claude Code, Cursor, Gemini CLI, and OpenAI Codex. An AI agent can go from a text prompt like “create a 30-second product demo video” to a rendered MP4 file without human intervention.

HeyGen put this to the test with their own launch video — the entire 49.77-second, 1080p @ 30fps production composition is open sourced on GitHub, containing 17 sub-compositions using CSS animations, GSAP, Lottie, Three.js, and shader transitions. It was created by an AI agent.

Design System Presets

HyperFrames ships with eight visual style presets that provide different aesthetic directions for your videos:

1. Swiss Pulse — Clean, minimalist Swiss design with bold typography
2. Velvet Standard — Warm, premium aesthetic with rich gradients
3. Data Drift — Tech-forward style optimized for data visualization
4. Shadow Cut — Dramatic high-contrast look with heavy drop shadows
5. Neon Grid — Cyberpunk-inspired with glowing elements
6. Paper Grain — Textured analog feel with subtle grain overlay
7. Glassmorphism — Frosted glass effects with blur backdrops
8. Mono Chrome — Single-color palette for brand-consistent outputs

Each preset adjusts colors, typography, spacing, transitions, and overlay styles globally.

Pre-Built Components

HyperFrames includes 50+ ready-to-use components accessible through the component catalog. These cover common video production needs:

• Shader transitions — GPU-accelerated crossfades, wipes, and effects
• Social overlays — Instagram, TikTok, YouTube-format overlays
• Data charts — Animated bar, line, and pie charts
• Lower thirds — Professional caption and name overlays
• Progress bars — Animated timeline indicators
• Countdown timers — Event and launch countdowns
• Tooltips and callouts — Attention-directing annotations

The Rendering Pipeline

The technical pipeline is straightforward but effective:

1. Puppeteer launches a headless Chrome instance
2. Each frame of the composition is captured as a screenshot from the browser
3. FFmpeg encodes the frame sequence into the target video format (MP4, WebM, or MOV)

Because the source material is standard HTML rendered in an actual browser engine, everything that works in a web page — CSS animations, canvas, WebGL, Three.js, Lottie — works in a HyperFrames video.

Built-In TTS and Captions

HyperFrames includes text-to-speech and caption generation as first-class CLI commands:

# Generate voiceover audio from text
npx hyperframes tts --text "Your script here" --output voiceover.wav

# Generate timed captions from audio
npx hyperframes transcribe --input voiceover.wav --output captions.srt

This means a complete video with narration and subtitles can be generated from a single text input.

Website Capture

An unexpected but powerful feature: you can turn any live website into a video by capturing it as a HyperFrames composition.

npx hyperframes capture https://example.com

This opens creative possibilities — product pages as video ads, documentation walkthroughs, dynamic dashboards recorded as screencasts — all without writing a single line of HTML by hand.

Frame Adapter Pattern

HyperFrames supports multiple animation frameworks through its Frame Adapter architecture. You choose the animation engine that fits your use case:

You can mix adapters within a single composition — for example, a Three.js 3D intro, a GSAP-animated main segment, and Lottie icons throughout.

Deterministic Rendering

HyperFrames is designed to be deterministic: the same input always produces identical output. There is no Math.random(), no clock drift, no frame timing jitter. This property is critical for:

• CI/CD pipelines — Render videos in automated builds with predictable results
• AI agent workflows — Agents can iteratively refine a composition knowing each render is reproducible
• Regression testing — Compare frame-by-frame against previous renders

Current Limitations

As an early-stage project (v0.4.x), HyperFrames has important limitations to be aware of:

• No distributed rendering — Unlike Remotion’s Lambda integration, HyperFrames renders on a single machine. Long or complex videos will take wall-clock time proportional to their duration.
• 4K/60fps not recommended — The capture-then-encode pipeline is designed for 1080p @ 30fps. Higher resolutions and frame rates will be slow.
• Node.js >= 22 required — Older Node.js runtimes are not supported.
• FFmpeg must be installed — It is not bundled with the npm package.
• Small ecosystem — 50+ built-in components is a solid start, but the community template library is minimal compared to established tools.

Getting Started

System requirements: Node.js 22 or higher, FFmpeg installed on your PATH.

# Create a new project
npx hyperframes init my-first-video
cd my-first-video

# Preview in browser
npx hyperframes preview

# Edit the composition (it's just HTML)
# open src/composition.html

# Render to video
npx hyperframes render

Add the AI agent skill to let Claude, Cursor, or Gemini compose for you:

npx skills add heygen-com/hyperframes

Then simply ask your agent: “Create a 20-second product launch video using Swiss Pulse preset with a countdown timer and shader transitions.”

Summary

HyperFrames redefines video creation as a programming activity rather than a design activity. By using HTML as the authoring format and keeping the toolchain minimal (no bundler, no framework, no proprietary DSL), it makes programmatic video accessible to anyone who can write a web page — and especially to the AI agents that are increasingly writing those pages for us.

It is not yet a replacement for Remotion in production-scale distributed rendering workflows, but for individual creators, startups, and AI agent pipelines, HyperFrames offers something genuinely new: the ability to describe a video in the same language we use to describe the web, and have it rendered without friction.

The source code is available on GitHub, the documentation lives at hyperframes.heygen.com, and the launch video that was itself created with the tool is open sourced in the hyperframes-launch-video repository.