# HyperFrames (HeyGen) > HyperFrames, HeyGen's Apache-2.0 framework that renders HTML, CSS and GSAP animation to MP4, built for AI agents: how it works and how it compares. Source: https://metavert.io/hyperframes Published: 2026-10-24 Updated: 2026-10-24 **HyperFrames** is an open-source framework from [HeyGen](https://metavert.io/heygen) that turns HTML, CSS, media and seekable animations into MP4 video. Its tagline is "Write HTML. Render video. Built for agents." A composition is an ordinary web page with data attributes for timing and tracks; the renderer seeks each frame in headless Chrome and encodes the result with [FFmpeg](https://metavert.io/ffmpeg), so the same input always produces the same video. It is licensed under Apache-2.0. The repository was created on March 10, 2026 and published its first release later that month; by October 24, 2026 it had 71,178 GitHub stars, 6,426 forks and 106 contributors, slightly more stars than [Remotion](https://metavert.io/remotion). Its latest release, v0.8.192, came out the same day: HyperFrames published 92 releases in the first 24 days of October. ### How It Works A HyperFrames video is a root element with a composition ID, width and height, containing clips (video, audio, images or text) that carry `data-start`, `data-duration` and `data-track-index` attributes. Motion comes from adapters for animation libraries, including GSAP timelines, CSS animations, Lottie, Three.js, Anime.js and the Web Animations API, or a custom runtime. Every animation must be seekable, so the renderer can jump to any frame. There is no build step: an `index.html` composition plays as-is in a browser. The toolkit around that model includes: - **A command-line tool** (`npx hyperframes init`, `preview` and `render`, plus linting and inspection), which needs Node.js 22+ and FFmpeg. - **Rendering** locally, in Docker or on AWS Lambda for distributed renders. - **A catalog** of about 450 ready-made blocks and components (transitions, overlays, captions, charts, maps and 3D) installed as editable source with `npx hyperframes add`. - **Studio**, a browser-based composition editor the project describes as "available, evolving", and the hyperframes.dev community playground. - **An embeddable player**, the `` web component, plus WebGL shader transitions. ### Built for Agents HyperFrames' case is that language models already write HTML well. It ships seven agent skills: a core set that covers the render contract and work loop, the command-line tool, the component catalog and media sourcing, plus on-demand skills for Figma, slide decks and migrating Remotion projects. They install with `npx skills add heygen-com/hyperframes` or as a Claude Code plugin, and work with Claude Code, Codex, Cursor, Gemini CLI and other agents that support skills (see [SKILL.md](https://metavert.io/SKILL.md)). The media skill can draw on HeyGen's services or free local tools for music, voiceover, avatars and generated video. HeyGen also lists a "HyperFrames by HeyGen" connector in Claude's directory, added in June 2026, with `compose` and `render_video` tools that return shareable MP4s. ### Who Uses It HyperFrames is used in production at HeyGen, and the project lists community examples from teams such as tldraw and TanStack. The open-source agent pipeline [OpenMontage](https://metavert.io/openmontage) uses it as its second renderer, the default for motion-graphics-heavy briefs and for its character-animation pipeline, which animates rigged SVG characters with GSAP. ### How It Compares HyperFrames says it was inspired by Remotion, and the two work the same way underneath: a headless browser captures frames and FFmpeg encodes them. The difference is the authoring model. Remotion compositions are React components and need a bundler; HyperFrames compositions are plain HTML that humans and agents can edit directly. HyperFrames is Apache-2.0 with no per-render fees or company-size thresholds, while Remotion's source-available license requires a paid company license for organizations of four or more people. Remotion is the more mature tool, public since 2020 and at version 4, with a longer-established cloud renderer, and HyperFrames' own comparison calls Remotion Lambda the "mature cloud renderer". A dedicated skill helps move Remotion and [Motion Canvas](https://metavert.io/motion-canvas) projects to HyperFrames. See [Remotion vs HyperFrames](https://metavert.io/compare/remotion-vs-hyperframes). VEED's OpenEdit takes a similar approach, with an agent writing the edit as an HTML page, but packages it as an editing pipeline rather than a general framework (see [VEED](https://metavert.io/veed)). Both belong to the wider practice of [motion graphics as code](https://metavert.io/motion-graphics-as-code) and [video as code](https://metavert.io/video-as-code). HyperFrames' rapid release pace is a sign of momentum and a caution for teams that need stable interfaces: it is still at version 0.8. ## Related Topics - [Remotion vs HyperFrames](https://metavert.io/compare/remotion-vs-hyperframes) — React components against HTML and GSAP - [Remotion](https://metavert.io/remotion) — The React framework that inspired it - [HeyGen](https://metavert.io/heygen) — The AI video company that maintains it - [Motion Graphics as Code](https://metavert.io/motion-graphics-as-code) — The practice it serves - [Video as Code](https://metavert.io/video-as-code) — Video as a versioned specification - [OpenMontage](https://metavert.io/openmontage) — An agent pipeline that renders with HyperFrames - [Motion Canvas](https://metavert.io/motion-canvas) — Generator-based animation in TypeScript - [SKILL.md](https://metavert.io/SKILL.md) — How its agent skills are packaged - [FFmpeg](https://metavert.io/ffmpeg) — The encoder under the renderer - [AI Coding Agents](https://metavert.io/ai-coding-agents) — The agents that write compositions ## Further Reading - [HyperFrames on GitHub](https://github.com/heygen-com/hyperframes) — README, packages, skills and license - [HyperFrames documentation](https://hyperframes.heygen.com/introduction) — quickstart, guides, catalog and AWS Lambda rendering - [HyperFrames vs Remotion](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion) — HeyGen's own comparison guide - [HyperFrames by HeyGen in Claude's directory](https://claude.com/connectors/hyperframes-heygen) — the hosted connector - [HyperFrames releases](https://github.com/heygen-com/hyperframes/releases) — the version history