heygen-com/hyperframes

What it solves

HyperFrames is a framework that allows users to create deterministic MP4 videos by writing HTML, CSS, and seekable animations. It eliminates the need for traditional video editing software by treating video production as a coding task, making it particularly suitable for AI coding agents to automate the creation of marketing videos, product launches, and data visualizations.

How it works

Videos are defined as HTML documents with specific data- attributes for timing, tracks, and duration. The framework supports various animation runtimes like GSAP, Lottie, Three.js, and CSS. A CLI tool is provided for previewing and rendering the project to an MP4 file using Node.js and FFmpeg.

Who it’s for

• AI Coding Agents: Developers using tools like Claude Code, Cursor, or Gemini CLI who want to automate video generation.
• Developers: Those who who want to programmatically generate videos from data or code changes (e.g., turning a GitHub PR into a video).
• Content Creators: People building automated content pipelines for social media or product announcements.

Highlights

• Agent-First Design: Includes 20 specialized "skills" that teach AI agents how to plan, write, and render videos.
• Deterministic Rendering: Ensures that the HTML/CSS output is rendered consistently into a video file.
• Design System for Video: The frame.md specification allows brands to define design tokens specifically for video frames rather than web pages.
• Wide Animation Support: Compatible with GSAP, Lottie, Three.js, Anime.js, and WAAPI.
• Automated Workflows: Specialized workflows for product launches, faceless explainers, and converting GitHub PRs to video.