HyperFrames

HyperFrames is an open-source video rendering framework created by HeyGen that converts plain HTML compositions into deterministic MP4 videos. It is licensed under Apache 2.0 and available on GitHub, with the core engine using headless Chrome (via Puppeteer) and FFmpeg to seek each frame and encode the result. The project reached v0.7.1 as of June 2026 and the repository reports nearly 30,000 stars.

What It Is

HyperFrames sits in the category of programmatic video creation tools, but its distinguishing bet is the authoring model: compositions are plain HTML files with data attributes for timing and tracks, not React components or proprietary timeline formats. This makes them immediately previewable in any browser and straightforward for both humans and AI coding agents to write. The renderer seeks each frame in headless Chrome and encodes with FFmpeg, so the same input always produces the same output — a property the project describes as deterministic rendering suited for CI pipelines and regression testing.

How the Authoring Model Works

A HyperFrames composition is an index.html file. Elements become clips by adding data-start, data-duration, and data-track-index attributes. Video, audio, and animated elements are layered on tracks. Seekable animation is handled through adapters for GSAP, CSS animations, Lottie, Three.js, Anime.js, and WAAPI — or a custom runtime. Because no build step is required, the same file that renders to MP4 can be opened directly in a browser for instant preview with live reload via the CLI.

Agent-First Design

HyperFrames ships a skills system specifically for AI coding agents. Running npx skills add heygen-com/hyperframes installs skills that teach agents the full video-production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. The README states compatibility with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills. The CLI is non-interactive by default, which the project notes as a deliberate choice for agent handoff.

The HyperFrames Stack

The project ships as a monorepo of coordinated packages:

• CLI (hyperframes) — scaffold, preview, lint, inspect, and render local projects
• Core / Engine / Producer — parse compositions, drive headless Chrome, encode video, mix audio
• Catalog — reusable blocks for transitions, overlays, captions, charts, maps, and effects installable via npx hyperframes add
• Studio — browser surface for previewing and editing compositions (described as available and evolving)
• AWS Lambda rendering — distributed render stack for CI or cloud pipelines
• @hyperframes/player — embeddable <hyperframes-player> web component
• @hyperframes/shader-transitions — WebGL shader transitions
• frame.md — a design-system translation layer that inverts a brand's design.md for video composition by AI agents

The community playground at hyperframes.dev lets users preview, iterate, share, and render HTML-native video projects in the browser.

Tradeoffs vs. Remotion

The README includes an explicit comparison with Remotion, another headless-Chrome-plus-FFmpeg video tool. The key differences as stated by the project: HyperFrames uses plain HTML + CSS + seekable animation adapters with no build step required, while Remotion uses React components and requires a bundler. HyperFrames offers both local and AWS Lambda render paths; Remotion has a more mature cloud renderer (Remotion Lambda). HyperFrames is Apache 2.0; Remotion uses a source-available license.

Update: v0.7.1

The latest release is v0.7.1, published on June 22, 2026. The repository was created in March 2026 and has seen active development, with the last push on the same day as the latest release. The project lists production use at HeyGen and community adoption examples from teams including tldraw and TanStack, as noted in the project's ADOPTERS.md file.