Tools

HyperFrames: Turn HTML Into MP4 Video — Open Source & Built for AI Agents

Published on June 22, 2026 by Wasim

What Is HyperFrames?

HyperFrames is an open-source video rendering framework by HeyGen that converts plain HTML, CSS, and web animations into frame-accurate MP4 videos. Its pitch is direct: "Write HTML. Render video. Built for agents."

Instead of a timeline editor, keyframe scrubber, or proprietary format, HyperFrames lets you define an entire video composition as a standard HTML document — the same thing you'd drop in a browser. You add data-start and data-duration attributes to control timing, wire up your preferred animation library, and let the renderer take it from there.

The output is always identical for the same input. That determinism is what makes it useful far beyond manual workflows: it slots cleanly into CI/CD pipelines, batch rendering jobs, and — as the tagline promises — AI coding agents generating video content automatically.

The Problem It Solves

Video production has historically sat behind a hard wall. Even lightweight tools require designers, specialized software, and non-scriptable GUIs. Web developers who can build complex animated UIs in hours hit a dead end the moment a stakeholder asks for a rendered video.

HyperFrames tears down that wall with three ideas:

HTML is the script — if you can build it in a browser, you can render it as a video.
No wall-clock timing — the renderer uses frame-by-frame seeks through headless Chrome, so output is bit-for-bit consistent regardless of machine load or network speed.
Agents are first-class citizens — the CLI is flag-driven with plain-text output, making it straightforward for any LLM to generate, iterate, and render compositions without human intervention.

Key Features

HTML-native compositions — video definitions are standard HTML files with data-* timing attributes. They open and preview in any browser, no build step needed.
Deterministic rendering — Puppeteer drives headless Chrome frame-by-frame, and FFmpeg encodes the captured frames. Identical input, identical output, every time.
Broad animation support — adapters for GSAP, Lottie, Three.js, Anime.js, CSS animations, and the Web Animations API (WAAPI).
90+ catalog templates — a ready-to-use library of composition blocks covering code animations, UI cards, device mockups, social media overlays, maps, data visualizations, and transition effects.
frame.md design system — an inverted web-design-spec format that lets agents and designers describe camera-first layouts without writing raw HTML from scratch.
Agent skills — integrates with AI agent tool systems via npx skills add heygen-com/hyperframes, so agents can render videos as a native capability.
Multiple deployment targets — runs locally, in Docker, or serverless on AWS Lambda.

Tech Stack

Layer	Technology
Language	TypeScript (80%), JavaScript (18%)
Rendering engine	Puppeteer + headless Chrome
Video encoding	FFmpeg
Animation adapters	GSAP, Lottie, Three.js, Anime.js, WAAPI
Runtime	Node.js 22+
License	Apache 2.0

Quick Start

Bootstrap a new project in two commands:

npx hyperframes init my-video
cd my-video

Then iterate in the browser with live reload:

npx hyperframes preview

When the composition looks right, render it to MP4:

npx hyperframes render --output demo.mp4

That is the entire loop — no install of proprietary software, no GUI.

A Minimal Composition

A HyperFrames composition is just HTML. Here is a bare-bones example that fades in a headline and renders it as a five-second clip:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; background: #0f0f0f; display: flex; align-items: center; justify-content: center; height: 100vh; }
    h1 { color: #fff; font-size: 72px; opacity: 0; animation: fadein 1s forwards; }
    @keyframes fadein { to { opacity: 1; } }
  </style>
</head>
<body data-duration="5">
  <h1 data-start="0.5">Hello, HyperFrames</h1>
</body>
</html>

Because it is a valid HTML file, npx hyperframes preview opens it in a browser immediately. npx hyperframes render captures it frame-by-frame and hands the frames to FFmpeg. The .mp4 is waiting in your output folder seconds later.

Working With AI Agents

HyperFrames was designed with LLM generation in mind. A few properties make this practical:

Plain text input — HTML is already a format every major LLM understands deeply.
Lint feedback in plain text — the CLI emits human-readable errors that an agent can parse and correct without any JSON processing.
Skill integration — npx skills add heygen-com/hyperframes adds HyperFrames as a tool available to AI agent frameworks, so an agent can call render as a native action.
frame.md — instead of asking a model to write raw HTML for a 1920×1080 layout, you give it a design spec in the frame.md format and let HyperFrames handle the translation to composition HTML.

The practical upshot: an agent can generate a product demo video, a PR walkthrough, or an animated data chart by writing HTML and invoking the CLI — end to end, no human in the loop.

The Catalog: 90+ Ready-Made Blocks

HyperFrames ships with a large library of composition templates at hyperframes.heygen.com/catalog. Highlights include:

Code animations — typing effects, morphing diffs, 3D extruded code slabs with WebGL lighting, particle assembly, shader dissolves.
Social cards — Instagram, TikTok, and Spotify-style overlays ready to drop into a composition.
Device mockups — iPhone and MacBook frames with your content inside.
Transitions — 20+ types: 3D flips, blur dissolves, grid wipes, radial reveals.
Caption effects — glitch, neon, parallax, karaoke-style gradient highlights.
Data visuals — choropleth maps, bubble charts, hex grids.

Every block is a composable HTML snippet, so you mix and match without fighting a proprietary plugin ecosystem. If you need to inspect or modify the HTML structure of a catalog block, a browser-based HTML to Markdown converter is handy for pulling the markup into a readable format quickly.

Deployment Options

Target	How
Local dev	`npx hyperframes render`
Docker	Official image, runs anywhere containers run
AWS Lambda	Serverless rendering for large batch jobs

For automated pipelines — say, rendering a video for every merged PR — Lambda is the natural fit: no server to maintain, and you only pay per render.

Who Should Use It?

HyperFrames is a strong fit for:

Developer-led content teams that already build in HTML/CSS and want to automate video production without buying into a SaaS tool.
AI agent builders adding video output to their pipelines — HyperFrames is probably the most agent-ready video renderer available today.
CI/CD-integrated workflows that need reproducible, version-controlled video output.
Open-source and indie projects that need polished product demos without a video budget.

It is a narrower fit for teams that need non-linear editing, audio mixing, or formats beyond MP4 — those use cases still call for a traditional video editor.

Final Thoughts

HyperFrames fills a real gap: the space between "animated website" and "rendered video" that required expensive tools or bespoke pipelines. The bet it makes — that HTML is the right authoring format for programmatic video — is a sound one. Web developers already know the primitives, LLMs already generate HTML reliably, and the animation ecosystem (GSAP, Lottie, Three.js) is mature and well-documented.

The Apache 2.0 license and the active catalog make it genuinely usable for production work today. If you are building AI agents that need to output video, or if you run any kind of automated content pipeline, HyperFrames is worth the fifteen minutes it takes to run npx hyperframes init and see your first rendered clip.

The project lives on GitHub and the full docs are at hyperframes.heygen.com.

HTML to Markdown Converter — quickly convert HTML composition snippets into readable markdown.
5120×1080 Instagram Video Template — a concrete example of a social video composition you could re-create with HyperFrames.
Browse all Tools — more write-ups on developer tools and open-source utilities.