HyperFrames: Open-Source Framework for HTML to Video Rendering

What changed

HyperFrames, an open-source framework developed by heygen-com, has been released, enabling the conversion of HTML, CSS, media, and seekable animations into deterministic MP4 videos. The framework is built with TypeScript and is available for local use via a Command Line Interface (CLI) or integrated into AI coding agents. It also offers a desktop application for macOS, Windows, and Linux. The latest release is version v0.9.30.

HyperFrames is designed to be the rendering core for hosted authoring workflows and can be utilized by AI coding agents such as Claude Code, Codex, and Cursor. To integrate with these agents, users can install HyperFrames as a plugin or use standalone skills. For Claude Code, specific plugin installation commands are provided, including enabling auto-updates for the HyperFrames marketplace. For other agents supporting skills, the command npx skills add heygen-com/hyperframes can be used.

The framework ships with nine skills, categorized into a core set and others that install on demand. The core skills include /hyperframes for rendering video from HTML, /hyperframes-cli for managing the video production lifecycle, /hyperframes-registry for accessing pre-made components, /media-use for sourcing media, /reverse-any-video for rebuilding existing videos into editable projects (a HyperFrames Pro feature), and /style-sampling for applying predefined visual styles (also a Pro feature).

Skills that install on demand include /figma for integrating Figma designs into videos, /slideshow for creating navigable presentations, and /remotion-to-hyperframes for importing existing video code or footage from other tools. The framework also introduces frame.md, a design system translation layer that converts web-context design specifications into a format readable by AI agents for video composition.

Manual CLI usage involves commands like npx hyperframes init, npx hyperframes preview, and npx hyperframes render, requiring Node.js 22+ and FFmpeg. The project also supports building upload-ready Codex plugin archives, with a size limit of 100 MB.

Why it matters for builders

HyperFrames offers AI builders a novel way to programmatically generate video content using familiar web technologies like HTML and CSS. This bridges the gap between code and visual media, allowing AI agents to create dynamic video assets for various applications, from product demos to social media content. The framework's integration with popular AI coding assistants simplifies the process of incorporating video generation into agent workflows.

Practical impact

Developers can leverage HyperFrames to automate video creation tasks, such as generating product launch videos, animated code diffs for PR walkthroughs, data visualizations, and social media clips. By integrating HyperFrames skills into their AI agents, builders can instruct agents to produce videos based on specific prompts, like creating a 10-second product intro with custom titles, background video, and music. The availability of a desktop app and CLI also provides flexibility for local development and rendering.

Caveats and source limits

The source material indicates that /reverse-any-video and /style-sampling are HyperFrames Pro features, but pricing or specific details about the Pro plan are not provided. While the framework supports integration with various AI coding agents, the exact performance or limitations when used with each specific agent are not detailed. The source also mentions a 100 MB upload limit for Codex plugins, but does not specify limits for other deployment methods or local rendering.