HyperFrames

HyperFrames is an open-source video rendering framework that treats HTML as a first-class timeline format. Instead of learning a proprietary composition API, developers write ordinary HTML files annotated with data attributes for timing, layering, and media tracks, then hand those files to the HyperFrames engine, which seeks through every animation frame in headless Chromium and encodes the result with FFmpeg.

The framework is purpose-built for the agent era. Because the authoring format is plain HTML — the same thing coding agents already know how to write — AI systems like Claude Code, Cursor, and Gemini CLI can generate, lint, preview, and render complete videos without any specialist prompting. A companion set of agent skills packages those conventions into a reusable production loop any coding agent can install with a single command.

HyperFrames is organized as a TypeScript monorepo with distinct packages for the composition core, the headless rendering engine, the CLI, the producer server, a browser-based studio, and cloud deployment targets for AWS Lambda and GCP Cloud Run. The animation layer is deliberately adapter-based: GSAP, Lottie, Three.js, Anime.js, CSS animations, and the Web Animations API all work without modification because the engine communicates with the page via a lightweight seek protocol rather than intercepting framework internals.

The project launched in early 2026 and has grown rapidly, accumulating over 28,000 stars in under four months, with dozens of releases per month and active contributions from HeyGen’s engineering team alongside a growing open-source community.

What You Get

• A CLI (hyperframes init, preview, render) that scaffolds projects, serves a live-reload browser preview, and encodes to MP4, WebM, MOV, animated GIF, or PNG sequence
• A rendering engine that seeks compositions frame-by-frame in headless Chromium and passes the frames to FFmpeg for encoding, guaranteeing identical output across machines and CI runs
• An adapter protocol (window.__hf) that lets GSAP, Lottie, Three.js, Anime.js, CSS animations, and WAAPI all work as seekable animation runtimes without patching
• A catalog of ready-to-install reusable blocks — shader transitions, social overlays, animated charts, map animations, kinetic captions — added via hyperframes add <block>
• Agent skills installable with npx skills add heygen-com/hyperframes that teach Claude Code, Cursor, Codex, and Gemini CLI the full video-production loop
• A producer server package exposing a clean HTTP API (POST /render, POST /render/stream) for integrating rendering into hosted pipelines
• Cloud deployment targets for AWS Lambda and GCP Cloud Run for distributed rendering at scale
• A frame.md / DESIGN.md superset that inverts a web design system for the camera so agents can compose brand-consistent videos without guessing at scale or layout

Common Use Cases

• Automated content pipelines where a coding agent writes the HTML composition, lints it, and triggers a render job via the producer HTTP API without human intervention
• Product launch and feature announcement videos generated from structured data (changelogs, release notes) and rendered deterministically in CI for every release
• Data visualization videos — animated chart races, map sequences, live-data overlays — built with standard web charting libraries and exported as shareable MP4 files
• PR walkthrough videos with animated code diffs, syntax-highlighted code blocks, and narration rendered on every pull request as a complement to written descriptions
• Social video production at scale: kinetic caption videos, brand-consistent reels, and story-format content assembled from template HTML files and per-video variable overrides
• Docs-to-video and PDF-to-video explainers where existing text content is transformed into voiced and animated video without re-authoring in a video editing tool

Under The Hood

Architecture HyperFrames is organized as a TypeScript monorepo with clearly separated concerns: a core package owns all composition types, timing compilation, and the HTML bundler; an engine package owns all headless-browser and FFmpeg coordination; a producer package owns orchestration, the HTTP server, and distributed rendering logic; and the CLI is a thin command layer that delegates to producer. Data flows in one direction — raw HTML is compiled by the timing resolver into annotated HTML, consumed by the engine’s frame-capture loop, passed to FFmpeg for encoding, and finally assembled by the producer into the output artifact. The render orchestrator slices compositions into parallel chunks, coordinates workers through a semaphore-backed coordinator, and assembles chunk outputs without the workers needing to communicate directly. The only shared runtime contract between the page and the engine is a lightweight seek protocol (window.__hf) injected into every page, which keeps the animation layer completely decoupled from rendering concerns.

Tech Stack The entire codebase is TypeScript targeting Node.js 22, built with tsup and bundled for distribution. Bun is the monorepo development runtime for fast installs and test execution, with Vitest handling unit tests across packages. The rendering pipeline is driven by Puppeteer (Chromium DevTools Protocol via CDP), coordinated with the headless-experimental CDP domain for deterministic frame timing. FFmpeg handles all encoding, muxing, audio mixing, and format conversion; the engine communicates with it via spawned child processes with typed result objects. The HTTP server in the producer package is built on Hono running on the Node adapter, with Server-Sent Events for streaming render progress. Linting uses oxlint (Rust-based, very fast) and formatting uses oxfmt; git hooks are managed by lefthook. The studio is a React 19 + Vite application. AWS Lambda and GCP Cloud Run packages provide cloud-native deployment manifests.

Code Quality The codebase demonstrates comprehensive test coverage across all core and engine packages, with extensive unit tests for every service — frame capture, audio mixing, chunk encoding, HTML compilation, font handling, and the timing resolver all have dedicated test files, including edge-case and regression fixtures. The project enforces strict TypeScript throughout with an explicit convention against any, type assertions, and non-null assertions, preferring type guards and narrowing helpers instead. Error handling follows a documented three-tier strategy: orchestration services throw, FFmpeg wrappers return typed result objects, and cleanup functions never throw. oxlint and oxfmt are enforced via pre-commit lefthook hooks, and CI runs the full lint and typecheck suite. The error convention documentation in the engine’s index.ts is a particularly clear signal of intentional, maintained code quality standards.

What Makes It Unique HyperFrames makes a specific and unusual bet: HTML is the best timeline format for the agent era. Where Remotion (its closest analogue) requires React components and a JavaScript-centric timeline API, HyperFrames uses plain HTML with data attributes — a format every browser developer already knows, and more importantly, one that AI coding agents can generate, validate, and iterate on without specialist prompting or framework knowledge. The adapter-based animation protocol means no animation library is privileged: GSAP, Lottie, Three.js, and CSS animations all become seekable with zero internal modification. The agent skills system is the most direct expression of this thesis — it packages the production loop as installable skill packs that any coding agent can run, effectively turning video production into a task any agent can complete without human guidance. The combination of strict determinism (same input, same bytes), a non-interactive CLI by default, and the HTTP producer server makes HyperFrames the only HTML-native video renderer explicitly designed to run inside automated agent pipelines at scale.

Self-Hosting

HyperFrames is released under the Apache License 2.0, a permissive open-source license maintained by the Apache Software Foundation. Under Apache 2.0 you may use, modify, and redistribute the software for any purpose — including commercial products and internal enterprise tools — without paying royalties or opening your own source code. The license does require you to include a copy of the license and to state any significant changes you made to the original files, but it imposes no copyleft obligations on your own work that links to or embeds HyperFrames.

Running HyperFrames yourself means taking on responsibility for the full rendering stack. The engine requires Node.js 22 or higher, a compatible build of Chromium or Chrome (managed automatically by Puppeteer in most setups), and FFmpeg installed on the host. Local renders are CPU-bound and scale predictably: each worker occupies one headless browser instance, and the CLI exposes a --workers flag to tune parallelism to the available cores. For production deployments the project ships ready-made configurations for AWS Lambda (for serverless burst rendering) and GCP Cloud Run, along with Kubernetes job manifests in the examples directory. You are responsible for provisioning, scaling, logging, and updating these deployments.

HeyGen operates a hosted cloud playground at hyperframes.dev where compositions can be previewed, iterated, and rendered without a local install, and the studio UI is available as an npm package you can self-host. There is no documented paid cloud tier or enterprise support contract for the open-source project at this time; teams needing SLAs, managed upgrades, or dedicated infrastructure should plan to build that operational layer themselves or engage HeyGen directly. The active release cadence — multiple tagged releases per week — means staying current requires routine upgrades, though the semantic versioning and detailed changelogs make tracking breaking changes straightforward.