HyperFrames

What is HyperFrames?

HyperFrames is an open-source video rendering framework originated by HeyGen and built for the developer community under Apache 2.0. It bridges the gap between web code and video production — any scene written in HTML, CSS, and JS can be rendered into a real MP4 video file locally, no cloud, API key, or account required. Designed with AI agents in mind, HyperFrames works natively with tools like Claude Code and Codex, enabling agents to compose, preview, and render complete video projects from a single prompt. It supports libraries like Three.js, Lottie, D3, GSAP, and any other browser-compatible technology.

Key Features

• HTML-to-Video Rendering

  Write scenes in plain HTML, CSS, and JS — HyperFrames captures them frame-by-frame and outputs a real 1080p MP4 video, pixel-perfect and locally rendered.

• AI Agent Native

  Built specifically for AI coding agents like Claude Code and Codex. One command installs the skill pack, and agents can scaffold, write, and render full video projects autonomously.

• Simple Three-Command CLI

  The entire workflow runs through three CLI commands — init, preview, and render — making video production scriptable and easy to integrate into any development pipeline.

• Browser Library Support

  Compatible with any browser-runnable library including Three.js for 3D, Lottie for animations, D3 for data charts, GSAP for motion — if it runs in a browser, it renders to video.

• Visual Studio & Live Preview

  Includes a browser-based visual editor with a real-time preview, timeline view, and hot reload — changes to HTML are reflected in the preview within milliseconds.

• Open Source & Local Rendering

  Licensed under Apache 2.0, free to use with no vendor lock-in. All rendering happens locally on your machine with no cloud dependency or account required.

Use Cases

• AI-Generated Video Content : AI agents can autonomously produce complete launch videos, product demos, or promotional clips by writing HTML compositions and rendering them to MP4 — no human editing required.
• Motion Graphics & Explainers : Developers and designers can code animated title sequences, transitions, and branded motion graphics using familiar web technologies.
• Data Visualization Videos : Teams can turn D3 or chart-based animations into shareable video files for reports, presentations, or social media content.
• Automated Video Pipelines : Developers can integrate HyperFrames into CI/CD or content automation workflows, scripting the full video creation process from code to file output.
• Rapid Video Prototyping : Product teams can quickly prototype video sequences for app demos, onboarding flows, or marketing materials using a code-first approach.

FAQs