HyperFrames is an open-source video rendering framework developed by HeyGen, designed to enable the creation, preview, and rendering of HTML-based video compositions. Its core innovation is allowing users to define videos using standard HTML files with data attributes, making it accessible to both developers and AI agents. Unlike other frameworks that rely on proprietary DSLs or React components, HyperFrames leverages the familiarity and flexibility of HTML, CSS, and popular animation libraries such as GSAP, Anime.js, Lottie, Three.js, and the Web Animations API.
The framework is AI-first, meaning it is built to integrate seamlessly with coding agents like Claude Code, Cursor, Gemini CLI, and OpenAI Codex. HyperFrames provides specialized skills that teach these agents how to author compositions, manage GSAP timelines, apply Tailwind CSS styles, and utilize various animation adapters. These skills are accessible via slash commands, enabling agents to scaffold, animate, and render videos based on user prompts. This agent-driven workflow streamlines video creation, allowing users to describe their desired video and have the agent generate the HTML composition, animations, and media assets.
HyperFrames offers a robust CLI tool for manual project creation and management. Users can initialize a project, preview compositions in the browser with live reload, and render videos to MP4 using FFmpeg. The CLI is non-interactive by default, supporting automated pipelines and deterministic rendering—ensuring that identical inputs always produce identical outputs. The framework requires Node.js version 22 or higher and FFmpeg for local rendering.
A key architectural feature is the Frame Adapter pattern, which allows users to bring their own animation runtime. This modularity supports a wide range of animation libraries and ensures frame-accurate, deterministic playback. HyperFrames also includes a catalog of over 50 ready-to-use blocks and components, such as social overlays, shader transitions, data visualizations, and cinematic effects, which can be easily added to projects.
HyperFrames distinguishes itself from similar tools like Remotion by its authoring approach. While Remotion uses React components and requires a build step, HyperFrames uses HTML and plays compositions as-is, without bundling. This makes it easier to paste and animate arbitrary HTML/CSS and supports seekable, frame-accurate library-clock animations. HyperFrames is fully open source under the Apache 2.0 license, allowing commercial use without restrictions, unlike Remotion’s source-available model with licensing constraints.
The repository is organized into several packages: the CLI for composition management, core types and parsers, a seekable capture engine using Puppeteer and FFmpeg, a full rendering pipeline, a browser-based editor UI, an embeddable web player component, and shader transitions for advanced effects. Documentation is comprehensive, covering quickstart guides, API references, and detailed guides for animation and agent integration.
HyperFrames is built for both developers and AI agents, offering a flexible, open, and deterministic platform for video composition and rendering. Its HTML-native approach, extensive catalog, and agent-driven workflows make it a powerful tool for automated and scalable video production. The project welcomes contributions and uses Git LFS for managing large regression test assets. Overall, HyperFrames aims to democratize video rendering by making it accessible, extensible, and fully open source.
