heygen-com/hyperframes

Write HTML. Render video. Built for agents

Summary

HyperFrames is an open-source framework that renders deterministic MP4 videos from HTML, CSS, media, and seekable animations by seeking frame-by-frame through headless Chrome and encoding with FFmpeg. The README pitches it as "Write HTML. Render video. Built for agents," with explicit support for AI coding agents like Claude Code, Codex, Cursor, and Gemini CLI through a router and 21 on-demand skills. It is published under Apache-2.0 and implemented in TypeScript.

What it is useful for

Engineers reach for HyperFrames when they need a reproducible, scriptable path from web-style markup to a video deliverable: product launch clips, PR walkthroughs with animated code diffs, data visualizations, kinetic social videos, slide-style decks, and automated content pipelines. The HTML-native composition model means there is no proprietary timeline format or React requirement — a composition is an index.html whose elements carry data-* attributes such as data-composition-id, data-start, data-duration, and data-track-index to describe timing and tracks. Animations can be authored with GSAP, Lottie, Three.js, Anime.js, the Web Animations API, or CSS keyframes, and the framework treats them as seekable so rendering stays frame-accurate. A reusable catalog (npx hyperframes add data-chart, flash-through-white, instagram-follow) covers transitions, overlays, captions, charts, and maps, and an AWS Lambda renderer is documented for distributed jobs.

How engineers can use it

The README documents two main entry points. For a hands-on workflow, install Node.js 22+ and FFmpeg, then scaffold a project:

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

For agent-driven authoring, install the Claude Code marketplace plugin (claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes) or add standalone skills (npx skills add heygen-com/hyperframes). The README warns that skills add resolves the skills.sh registry, which can lag main by hours, so non-interactive runs are directed to npx hyperframes skills update instead. Documented requirements are Node.js 22+ and FFmpeg; the supplied README is truncated mid-list under "Why HyperFrames?", so performance and runtime tradeoffs are not documented in the source provided and should be checked against the linked introduction guide before relying on them.