HyperFrames is an open-source TypeScript framework developed by HeyGen that converts HTML, CSS, media, and seekable animations into deterministic MP4 videos. The project is designed with a specific focus on enabling AI coding agents to generate video content programmatically, though it also supports local CLI usage and integration into hosted authoring workflows. The framework uses FFmpeg for video rendering and requires Node.js 22 or higher.
The core value proposition centers on a production loop where developers write HTML and CSS, define seekable animations, incorporate media assets, and render them into video output. The framework emphasizes determinism, meaning the same input consistently produces identical video output, which is critical for agent-driven workflows. HyperFrames ships with 21 skills that agents can load on demand, covering everything from a router skill that maps user intent to appropriate workflows, through specialized creation workflows like product launch videos, website-to-video conversion, faceless explainers, and music-synchronized videos, down to atomic domain skills covering animation, keyframes, media handling, and CLI operations.
The repository overlaps with contributors from nousresearch/hermes-agent, openclaw/openclaw, and gatsbyjs/gatsby, suggesting cross-pollination with agent frameworks and web technologies. The primary issue labels tracked by GitGenius reveal a focus on stability and improvement, with bug fixes and enhancements dominating the development agenda.
HyperFrames introduces frame.md, a design system translation layer that adapts brand design specifications from web contexts into video-ready formats. This allows AI agents to compose promotional videos without manual scaling adjustments or web chrome considerations. The framework supports diverse output types including product announcements, pull request walkthroughs with animated code diffs, data visualizations and chart races, social videos with kinetic captions, documentation-to-video conversions, and reusable motion graphics for automated content pipelines.
The skills system teaches agents the complete production workflow: planning the video structure, writing valid HTML, configuring seekable animations, adding media assets, linting for errors, previewing results, and rendering final output. The framework integrates with multiple AI coding agents including Claude Code, Cursor, Gemini CLI, and Codex through a standardized skills interface. Domain-specific skills cover composition contracts with timing attributes, animation across multiple runtimes including GSAP, Lottie, Three.js, and CSS animations, keyframe authoring with seek-safety guarantees, creative direction elements, and media resolution from the HeyGen catalog. The CLI provides development tools including initialization, linting, validation, inspection, preview, rendering, and cloud rendering via AWS Lambda deployment.
