Open-source HTML-native video rendering framework by HeyGen. Defines timelines via pure HTML data attributes, outputs deterministic MP4 through headless Chrome frame capture + FFmpeg encoding, with built-in AI Agent Skills system.
HyperFrames is an open-source HTML-native video rendering framework from HeyGen, built around the principle "Write HTML. Render video. Built for agents." Video compositions are pure HTML files that declare timelines and multi-track layouts via data attributes like data-start, data-duration, and data-track-index — no React or proprietary DSL required. The rendering pipeline captures frames pixel-by-pixel using headless Chrome's beginFrame API and encodes deterministic MP4 output through FFmpeg's image2pipe.
The framework employs a Frame Adapter pattern for pluggable animation runtimes — GSAP, Anime.js, Lottie, Three.js, CSS Animations, and WAAPI — achieving seekable playback at arbitrary frames via window.__hf* global hooks. A catalog of 50+ reusable components covers social overlays, shader transitions, data visualizations, and cinematic effects.
AI Agent support is a first-class design: the CLI defaults to non-interactive text output, and the built-in Skills system integrates into Claude Code, Cursor, Gemini CLI, and Codex via npx skills add heygen-com/hyperframes, registering slash commands like /hyperframes, /gsap, and /tailwind. Dedicated skills include website-to-hyperframes (URL-to-video) and remotion-to-hyperframes (Remotion migration).
The project is a TypeScript monorepo (96.5% TS) with 7 packages: CLI entry, core parser/validator, frame capture engine, render pipeline, visual editor (Studio), Web Component player, and shader transitions. Developer experience includes browser live-reload preview, Tailwind v4 browser runtime, and built-in lint/TTS/transcription tools.
Use Cases: AI agent-driven video generation, product/marketing video production, data visualization animations (e.g., bar chart race), short-form video (9:16 portrait), PDF summary videos, website recording-to-video, CI/CD automated render pipelines, Remotion project migration.
Monorepo Package Structure:
hyperframes— CLI entry point@hyperframes/core— Type definitions, HTML parser, generator, linter, runtime, Frame Adapters@hyperframes/engine— Seekable frame capture engine (Puppeteer + headless ChromebeginFrame)@hyperframes/producer— Full render pipeline (capture → FFmpeg encode → audio mixing)@hyperframes/studio— Browser-based visual composition editor UI@hyperframes/player— Embeddable<hyperframes-player>Web Component@hyperframes/shader-transitions— WebGL shader transition effects
Unconfirmed: Distributed rendering (multi-machine/Lambda) timeline; @hyperframes/player Web Component API documentation completeness; integration with HeyGen commercial products; full Windows platform support.