HyperFrames: Write HTML, Render Video, Built for Agents

My notes

Summary

HyperFrames is an open-source framework by HeyGen that renders HTML compositions into MP4 video, designed specifically to be driven by AI agents rather than humans. Compositions are plain HTML files with data attributes - no React, no proprietary DSL - making them trivially easy for LLMs to write and edit. The tool ships as installable “skills” for Claude Code, Cursor, Gemini CLI, and Codex that teach the agent framework-specific patterns beyond what generic docs cover.

Key Insight

• AI-native architecture, not AI-bolted-on: the CLI is non-interactive by default, meaning every command is designed to be called by a script or agent. Human video editors are not the target user.
• HTML as the IR (intermediate representation): because agents already know HTML, the learning curve for generating compositions is near zero. No new syntax to hallucinate.
• Deterministic rendering: same HTML input always produces identical MP4 output - critical for automated pipelines and reproducible content factories.
• Skills-as-distribution: HeyGen distributes npx skills add heygen-com/hyperframes which registers /hyperframes, /hyperframes-cli, and /gsap as slash commands inside Claude Code. This is a product distribution strategy disguised as a developer tool.
• 50+ pre-built blocks (shader transitions, social overlays, animated charts, cinematic effects) via npx hyperframes add <block> - lowers time-to-first-video dramatically.
• GSAP is the default animation layer, with Lottie, CSS, and Three.js supported via the Frame Adapter pattern - so complex motion is achievable without custom rendering code.
• Practical use cases unlocked today: CSV-to-animated-bar-chart-race, PDF-to-pitch-video, product intro with TTS narration, TikTok-style hook videos with synced captions.