HyperFrames - HeyGen's open-source AI-native video rendering framework

What are HyperFrames?

HyperFrames is an open-source AI-native video rendering framework from HeyGen, adopting the "Write HTML, Render video" concept and designed specifically for AI agents and developers. The framework defines video as HTML files, manages the timeline, tracks, and metadata through data-* attributes, supports GSAP, Lottie, CSS, and Three.js animations, and outputs MP4 via deterministic rendering in the browser. HyperFrames provides a non-interactive CLI and Skills system, supporting direct invocation of AI tools such as Claude Code and Cursor, enabling an automated pipeline from script to finished product.

The main functions of HyperFrames

• HTML native description: Use standard HTML + data-* attributes to define video timelines and tracks, without needing to learn a proprietary DSL.
• AI Agent PriorityCLI non-interactive design, supports parameter-driven programming, and is compatible with AI programming tools such as Codex, Claude Code, and Cursor.
• Deterministic renderingThe same input guarantees the same output, and supports batch generation, automated testing, and CI/CD integration.
• Multi-animation engine supportIt is compatible with GSAP, Lottie, and CSS animations, and can be integrated with runtimes such as Three.js, without being locked into a single animation system.
• Skills System:passnpx skills addBy installing the HyperFrames skill, the AI Agent can automatically learn frame-specific patterns.
• Component-based productionOffers 50+ preset transitions, social media components, data charts, and visual effects, and supports...hyperframes addOne-click installation.
• Website to video conversionIt supports capturing URLs and converting them into videos, enabling an automated pipeline from complete websites to videos.

The technical principles of HyperFrames

• HTML native description layerHyperFrames defines video as a standard HTML document, through...data-*Attributes (such as)data-start,data-duration,data-track-indexThe timeline, track hierarchy, and metadata can be declared directly on DOM elements, eliminating the need for developers to learn proprietary DSLs to describe complex video compositing structures.
• Browser captures the rendering pipelineThe underlying framework adopts a rendering path of "web page screenshot + video encoding": Puppeteer drives the headless browser to precisely seek to each frame along the timeline, capture the page state frame by frame, and FFmpeg mixes and encodes the image sequence and audio track into a deterministic MP4 file, ensuring that the same input produces a pixel-perfect output.
• Frame Adapter animation runtimeThe core adopts the Frame Adapter design pattern, providing a unified frame adaptation interface. Runtimes such as GSAP, Lottie, CSS Transitions, and Three.js can all access this layer, with HyperFrames uniformly scheduling the timeline and rendering loop to achieve mixed rendering and synchronization of multiple animation systems.
• AI Agent Skill System: Through the Skills mechanism (npx skills addInjecting framework-specific writing patterns and CLI command specifications into the AI Agent enables tools such as Claude Code and Cursor to master HyperFrames' composition syntax, GSAP animation paradigm, and rendering parameters, directly transforming natural language requirements into executable HTML video projects.

How to use HyperFrames

• Use via AI Agent (Recommended):implementnpx skills add heygen-com/hyperframesInstallation skills, used in tools such as Claude Code/hyperframesThe instruction describes the video requirements, such as "Create a 10-second product introduction video with a fade-in title and background music".
• Manually initialize the project:implementnpx hyperframes init my-videoCreate a project and usenpx hyperframes previewReal-time previewnpx hyperframes renderRendered as MP4.
• Add components:passnpx hyperframes add [组件名]Install transitions or effects, such asflash-through-white,instagram-follow,data-chart。

Key information and usage requirements for HyperFrames

• Development TeamHeyGen
• Open source licenseApache 2.0
• Environmental requirementsNode.js >= 22, FFmpeg
• GitHub addresshttps://github.com/heygen-com/hyperframes
• Latest versionv0.4.4 (continuously updated frequently)
• Community size2.9k Stars, 226 Forks

HyperFrames' core advantages

• Zero learning costDevelopers and AI are already familiar with HTML/CSS/JS, so there is no need to master the timeline operations of complex editing software.
• Automation friendlyPlain text output and deterministic rendering make it suitable for unattended batch video production and version management.
• AI native integrationThe Skills system enables AI Agents to create videos, supporting the automatic generation of videos from PDFs, CSVs, and web pages.
• Flexible and controllableIt replaces the traditional drag-and-drop editing with code iteration, supporting real-time preview and precise adjustments.

HyperFrames project address

• GitHub repositoryhttps://github.com/heygen-com/hyperframes

HyperFrames Competitive Comparison

Application scenarios of HyperFrames

• Marketing content automationBusinesses can use HyperFrames to generate product introductions, short videos for social media, and TikTok-style content in batches, enabling automated production of marketing materials.
• Data visualization presentationUsers can directly convert data files such as CSV into dynamic chart competition videos, significantly reducing the barrier to entry for creating data visualization content.
• Website demo recordingThe system automatically captures webpage images and generates product introduction or software tutorial videos, simplifying the creation process for website demo content.
• AI Agent Workflow IntegrationDevelopers can integrate HyperFrames into CI/CD pipelines to build an end-to-end AI Agent workflow from content understanding to video generation.
• Programmatic advertising creativeAdvertising teams can programmatically generate differentiated creative materials in batches based on pre-set templates, improving the efficiency of A/B testing for ad campaigns.