HeyGen has open-sourced HyperFrames, a tool that allows AI agents to convert HTML, CSS, and JavaScript into video formats such as MP4, MOV, or WebM directly from the terminal. This innovative framework simplifies video creation by leveraging familiar web technologies and integrating with tools like GSAP, Lottie, and Three.js for animation. By shifting video editing to terminal-native processes, HyperFrames enables AI agents to generate web code more efficiently than traditional timeline video editors. HeyGen demonstrated the capabilities of HyperFrames using their own launch video, created in Claude Code.

GSAP: GSAP is a high-performance JavaScript animation library for animating web elements including CSS, SVG, and canvas across frameworks. It provides tools for smooth timelines and effects used in modern web development. HyperFrames integrates GSAP to manage animations in the code-to-video conversion process.
HeyGen: HeyGen is an AI-driven video creation platform that transforms text, images, or audio into professional videos featuring realistic avatars and cinematic scenes. It emphasizes agent-ready infrastructure including CLI tools for scripting to video delivery. HeyGen open-sourced HyperFrames to enable AI agents to render web code into videos, using it with Claude Code for their launch video.
Lottie: Lottie is a lightweight animation format and renderer for vector-based motion graphics exported as JSON from design tools. It enables scalable playback on web and apps without heavy assets. HyperFrames uses Lottie for incorporating animations into agent-generated videos.
Three.js: Three.js is a JavaScript library simplifying 3D graphics creation in browsers via WebGL with support for scenes, lighting, and materials. It facilitates interactive 3D experiences for developers. HyperFrames leverages Three.js for 3D elements in web-to-video rendering.
Claude Code: Claude Code is Anthropic’s AI coding agent operating in terminals, IDEs, and browsers with skills, hooks, and plugins for enhanced workflows. It supports generating and executing code for complex tasks. HeyGen built their HyperFrames launch video entirely using Claude Code.
HyperFrames: HyperFrames is an open-source, agent-native framework that renders HTML, CSS, and JavaScript into MP4, MOV, or WebM videos directly from the terminal. It extends web stacks with attributes for timing, layering, and composition while relying on tools like GSAP and browser engines. HeyGen released it to streamline AI agent video production, demonstrating its use in generating their announcement video.

`json
{
“Tool Synergy”: “Combines FFmpeg, GSAP, Lottie, and Three.js for deterministic video output from HTML.”,
“Agent Workflows”: “HyperFrames shifts video editing to terminal-native processes where AI agents generate web code and render it to MP4.”,
“Open Source Push”: “HeyGen’s release promotes agent-first video tools demonstrated in their own Claude Code-powered launch video.”
}
`