# HyperFrames HyperFrames is an open-source video rendering framework that lets you compose, preview, and render videos written as **HTML files with data attributes** — no React, no proprietary DSL, no build step. Originated and open-sourced by [[HeyGen]] under Apache 2.0. Built explicitly for AI agent authorship: agents already speak HTML, and the CLI is non-interactive by default so it slots into agent loops. The wager: as agents write more of our video content, the right authoring surface is the one models already understand. HTML wins on that axis; React doesn't. ## How it works A composition is just an HTML file: ```html <div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080"> <video id="clip-1" data-start="0" data-duration="5" data-track-index="0" src="intro.mp4" muted playsinline></video> <img id="overlay" class="clip" data-start="2" data-duration="3" data-track-index="1" src="logo.png" /> <audio id="bg-music" data-start="0" data-duration="9" data-track-index="2" data-volume="0.5" src="music.wav"></audio> </div> ``` Live preview in the browser. Render to MP4 locally or in [[Docker]] via headless Chrome ([[Puppeteer]]) + [[FFmpeg]] streaming. Same input, identical output — deterministic, suitable for automated pipelines. ## Key features - **HTML-native authoring.** Compositions are HTML + CSS + JS; no JSX, no bundler, no compile step. - **Library-clock animations.** GSAP, Anime.js, Motion One, Lottie, Three.js, CSS keyframes, Web Animations API — all seekable and frame-accurate via Frame Adapters that pause the runtime and step through deterministically. - **Agent-first CLI.** `init`, `lint`, `inspect`, `preview`, `render`, `doctor` — non-interactive, designed to be called from a coding agent. - **AI Skills bundle.** `npx skills add heygen-com/hyperframes` installs skills compatible with [[Claude Code]], [[Cursor.com|Cursor]], [[Gemini CLI]], and [[OpenAI Codex|Codex]] — including `/hyperframes`, `/hyperframes-cli`, `/hyperframes-media`, and adapter-specific skills (`/gsap`, `/three`, `/lottie`, `/animejs`, `/css-animations`, `/waapi`). - **Built-in media tooling.** TTS via Kokoro, transcription via [[Whisper]], background removal via u2net — all driven from the agent. - **Catalog of 50+ blocks.** Social overlays, shader transitions, animated charts, cinematic effects — `npx hyperframes add <block>` to drop into a composition. - **Studio + player + producer packages.** Browser editor (`@hyperframes/studio`), embeddable web component (`@hyperframes/player`), full pipeline runner (`@hyperframes/producer`). - **Website-to-video.** A dedicated `website-to-hyperframes` skill captures a URL and turns it into a video. - **Remotion-to-HyperFrames** translator skill for migrating React compositions. ## Architecture - **`hyperframes`** — the CLI. - **`@hyperframes/core`** — types, parsers, generators, linter, runtime, frame adapters. - **`@hyperframes/engine`** — seekable page-to-video capture ([[Puppeteer]] + [[FFmpeg]]). - **`@hyperframes/producer`** — full pipeline (capture + encode + audio mix). - **`@hyperframes/shader-transitions`** — WebGL transitions. - **Requirements:** Node.js ≥ 22, FFmpeg. ## Quickstart With an AI agent (recommended path — the one HyperFrames optimizes for): ```sh npx skills add heygen-com/hyperframes # then in your agent: # /hyperframes create a 10-second product intro with a fade-in title, background video, and music ``` Manual: ```sh npx hyperframes init my-video cd my-video npx hyperframes preview # browser, live reload npx hyperframes render # render to MP4 ``` ## HyperFrames vs [[Remotion]] The two are close cousins; HeyGen explicitly credits Remotion's prior art (Chrome launch flags, image2pipe → FFmpeg streaming, frame buffering). The decision tree: | | HyperFrames | Remotion | |---|---|---| | Authoring | HTML + CSS + GSAP | React components (TSX) | | Build step | None — `index.html` plays as-is | Required (bundler) | | Library-clock animations (GSAP, Anime.js, Motion One) | Seekable, frame-accurate | Plays at wall-clock during render | | Arbitrary HTML / CSS passthrough | Paste and animate | Rewrite as JSX | | Distributed rendering | Single-machine today | Lambda, production-ready | | **License** | **Apache 2.0 (OSI-approved)** | **Source-available, paid above small-team thresholds** | License is the first-order decision point. HyperFrames is fully open source — commercial use at any scale, no per-render fees, no seat caps. Remotion is a great product on a different model. ## Why agents matter here Most video frameworks were designed for human authors. HyperFrames was designed assuming an agent writes the composition, and a human edits the prompt. That changes priorities: - **HTML over JSX** — models already write HTML fluently; JSX requires more careful prompting and bundler awareness. - **Non-interactive CLI** — no prompts, no spinners blocking stdin, deterministic exit codes. - **First-class skills** — instead of a generic doc reference, the framework ships agent-specific procedural memory (slash commands, plugin manifests for [[Claude Code]] / [[Cursor.com|Cursor]] / [[OpenAI Codex|Codex]]). - **Iteration loop matches editing intent** — "make the title 2× bigger, swap to dark mode, add a fade-out" is a natural prompt; the agent edits the HTML, the renderer regenerates the MP4. This is the same shift `agentskills.io` is making for general agents, applied to video. ## License Apache 2.0. OSI-approved. ## References - Website: <https://www.hyperframes.dev/> - Documentation: <https://hyperframes.heygen.com/introduction> - Catalog: <https://hyperframes.heygen.com/catalog> - Prompting guide: <https://hyperframes.heygen.com/guides/prompting> - Source: <https://github.com/heygen-com/hyperframes> - X / Twitter: <https://x.com/HyperFrames_> ## Related - [[HeyGen]] — originator and open-source publisher - [[Remotion]] — closest comparable; React-based, source-available - [[AI Agent Skills]] - [[Claude Code]] - [[Cursor.com]] - [[Gemini CLI]] - [[OpenAI Codex]] - [[Codex CLI]] - [[FFmpeg]] - [[Puppeteer]] - [[Whisper]] - [[Open Source]]