HyperFrames: HTML Video Rendering Framework for Agents
heygen-com/hyperframes
HyperFrames renders MP4 video directly from plain HTML, CSS, and seekable animations, using headless Chrome and FFmpeg instead of a proprietary timeline editor. Reach for it if your team already writes HTML/CSS and wants agents or CI to generate video without adopting React; skip it if you're already deep in a Remotion codebase or need a finished visual timeline editor rather than markup.
HTML-Native Video Rendering Framework
HyperFrames is an open-source framework, built by HeyGen, that converts HTML markup, CSS, media assets, and animations you can seek through into deterministic MP4 files. You can drive it from a local CLI, from AI coding agent skills, or use it as the rendering core behind hosted authoring workflows. It ships as a set of TypeScript packages — CLI, core, engine, producer, studio, player — under the Apache-2.0 license.
Translating Web Design for Video
Most HTML-to-video pipelines fall into two camps: screen-recorders that capture whatever a browser happens to render, or React-based renderers like Remotion that require learning a component timeline. Neither solves the design-system problem. A company's `design.md` is written for a browser viewport, not a fixed-duration video frame, so someone ends up guessing at scale, pacing, and camera-safe margins by hand. HyperFrames' `frame.md` step inverts that spec into a `DESIGN.md` superset built for the frame, and its `data-*` timing attributes let a render — or an agent — seek to any point in a composition instead of replaying it from time zero.
Core Capabilities for Video Creation
- ✓Seekable animation adapters for GSAP, CSS, Lottie, Three.js, Anime.js, and WAAPI, plus a slot for a custom frame adapter.
- ✓No build step — a composition is an `index.html` file with `data-start`, `data-duration`, and `data-track-index` attributes that plays as-is in a browser.
- ✓Deterministic output: the renderer steps through headless Chrome frame-by-frame using Puppeteer and stitches the result with FFmpeg, so identical HTML always produces an identical MP4.
- ✓19 packaged agent skills, led by a `/hyperframes` router that maps a plain-English request to a creation workflow like `/product-launch-video` or `/pr-to-video`.
- ✓A `frame.md` step that inverts an existing `design.md` into a `DESIGN.md` superset scaled for video framing instead of a browser viewport.
- ✓A block and component catalog installable with `npx hyperframes add <name>` — shader transitions, social overlays, animated charts.
- ✓Local and AWS Lambda rendering paths via `@hyperframes/aws-lambda`, for distributing renders instead of running every job on one machine.
- ✓A `/figma` skill that pulls Figma assets, tokens, and Motion animations into a composition over MCP.
Practical Video Creation Scenarios
- •Launch and feature-announcement clips built from a product's own site or a short brief.
- •PR walkthroughs with animated diffs and narration, sourced straight from a GitHub PR via the `gh` CLI.
- •Chart races, map animations, and other data visualizations for reports or social posts.
- •Docs-to-video and PDF-to-video explainers, plus reusable motion graphics for automated pipelines.
Getting Started with HyperFrames
With an AI coding agent, run `npx skills add heygen-com/hyperframes --full-depth` — keep the `--full-depth` flag, since without it you get whatever cached copy the skills.sh registry has from hours earlier instead of current `main`. Run it non-interactively without picking one skill and you end up with all 19 installed at once; `npx hyperframes skills update` is the alternative that grabs just the core set. For the CLI on its own: `npx hyperframes init my-video`, then `cd my-video` and either `npx hyperframes preview` or `npx hyperframes render`. The README's stated requirements are Node.js 22+ and FFmpeg; a full source clone for development additionally needs Git LFS, since the regression-test video baselines under `packages/producer/tests` live there.
Authoring Videos with HTML and AI Agents
Write a composition as an HTML file, tag elements with `class="clip"` and `data-start`/`data-duration`/`data-track-index` attributes for timing and track order, then drive motion with GSAP, CSS keyframes, or another adapter — the README's example builds a GSAP timeline for a title fade-in next to a video clip and a background-music track. `npx hyperframes preview` reloads it live in a browser; `npx hyperframes render` walks the composition frame-by-frame inside headless Chrome, then FFmpeg assembles the final file. With an agent, the flow is a prompt instead of markup: install the skills, then ask for something like a 10-second product intro, and the `/hyperframes` router picks a workflow — `/product-launch-video`, `/faceless-explainer`, `/motion-graphics`, and others — that plans the brief, writes the HTML, wires the animation, and renders it.
Strengths
- ✓Compositions are plain HTML with no proprietary format and no React requirement, so an agent that already writes HTML can generate one without learning a new authoring model.
- ✓Rendering is repeatable — same HTML in, same frames out — so it holds up in CI and regression tests, not just one-off exports.
- ✓Animation isn't locked to one library: GSAP, CSS, Lottie, Three.js, Anime.js, and WAAPI all plug in as adapters.
- ✓The `/hyperframes` skill router and its 19 packaged skills turn a one-line prompt into a full production loop — plan, write HTML, wire animation, lint, preview, render — instead of you scripting each step by hand.
- ✓Apache-2.0 licensed, and per the README there's no fee charged per render nor a revenue threshold that changes the terms — a contrast with Remotion's source-available license.
Considerations for Distributed Rendering
- △The full source clone pulls in Git LFS for roughly 240 MB of regression-test `.mp4` baselines — worth skipping with `GIT_LFS_SKIP_SMUDGE=1` if you only need source files.
- △Agent-driven installs default to grabbing all 19 skills unless you're using the interactive picker or `hyperframes skills update` — easy to end up with more installed than you need.
- △The README's own stack table lists Studio, the browser editor, as "Available, evolving" rather than finished, so most authoring still happens in HTML/markup rather than a visual timeline.
- △Requires Node.js 22+ and FFmpeg on the machine or container doing the rendering — not a drop-in for environments that can't install those.
HyperFrames vs. Remotion: Key Differences
Frequently Asked Questions
HyperFrames turns HTML, CSS, media, and animation into MP4 videos — launch clips, PR walkthroughs with animated diffs, data visualizations, social videos, and docs-to-video explainers, per the README's examples.
HyperFrames uses the Apache-2.0 license; per the README there's no per-render charge and no revenue threshold that changes the terms, unlike Remotion's source-available license.
HyperFrames requires Node.js 22+ and FFmpeg on the machine doing the rendering; cloning the full source repo for development also needs Git LFS for the regression-test video baselines.
HyperFrames authors compositions as plain HTML with no build step, while Remotion uses React components and needs a bundler; both render through headless Chrome and FFmpeg, and HyperFrames adds an AWS Lambda rendering path alongside local rendering.
HyperFrames ships 19 skills, compatible with various agents (such as Claude Code, Cursor, Gemini CLI, Codex) and other agents that support skills, installed via `npx skills add heygen-com/hyperframes --full-depth`.
HyperFrames supports GSAP, CSS, Lottie, Three.js, Anime.js, and WAAPI as built-in adapters, and the README documents writing your own frame adapter for anything else.
Who should try it — and who should skip
Reach for HyperFrames if your team is already comfortable writing HTML/CSS and wants an AI coding agent — Claude Code, Cursor, Gemini CLI, or Codex, per the README — to turn a plain-English brief into a video without adding a React dependency. It also works for teams that want their design-system tokens carried into video through `frame.md` instead of redesigning motion graphics from scratch each time. Skip it if you've already invested in a Remotion project, need a finished visual timeline editor rather than markup, or can't run Node.js 22+ and FFmpeg in your render environment.