HyperFrames — Write HTML, Render Video, Built for Agents

Introduction

HyperFrames bridges the gap between web development and video production by treating HTML and CSS as the scene description language for video. Instead of learning After Effects or video editing tools, developers write markup and animate it with GSAP or CSS animations, then render frames to MP4 via Puppeteer and FFmpeg.

What HyperFrames Does

• Converts HTML/CSS pages into frame-by-frame video output at configurable resolution and frame rate
• Supports GSAP, CSS transitions, and JavaScript-driven animations in the rendering pipeline
• Provides an MCP server for AI agents to generate and render videos programmatically
• Offers 7 built-in visual styles including technical diagrams, UML, and agent workflow patterns
• Renders to both MP4 video and individual PNG frames for post-processing

Architecture Overview

HyperFrames uses Puppeteer to launch a headless Chromium instance that loads each HTML scene. A frame capture loop screenshots the page at the target frame rate while advancing animation timelines. FFmpeg stitches the captured frames into the final video output. The MCP server wraps this pipeline so AI coding agents can call video rendering as a tool. The TypeScript core handles scene orchestration, timeline management, and output encoding configuration.

Self-Hosting & Configuration

• Install via npm globally or as a project dependency
• Place HTML scene files in your project and reference them in a render config
• Set resolution, frame rate, and output format via CLI flags or a config file
• Use the built-in MCP server to integrate video rendering into AI agent workflows
• Extend with custom Puppeteer page scripts for complex animation control

Key Features

• Web-native rendering means any valid HTML/CSS/JS runs as a video scene
• AI-agent-first design with MCP server and structured tool-call interface
• Support for multi-scene compositions with transitions
• SVG and Canvas elements render natively through Chromium
• TypeScript SDK for programmatic scene construction and batch rendering

Comparison with Similar Tools

• Remotion — React-based video framework with a component model; HyperFrames uses plain HTML and targets agent workflows
• Motion Canvas — TypeScript animation framework with its own scene graph; HyperFrames leverages the browser rendering engine directly
• FFmpeg alone — low-level video processing; HyperFrames adds the HTML-to-frames pipeline on top
• Revideo — code-driven video editor forked from Motion Canvas; HyperFrames is lighter and web-standards-based

FAQ

Q: What browsers does HyperFrames use for rendering? A: It uses Puppeteer with Chromium, ensuring consistent cross-platform rendering.

Q: Can I use React or Vue components in scenes? A: Yes, as long as you bundle your components into a standalone HTML file that Chromium can load.

Q: What video formats are supported? A: MP4 (H.264) by default. Other FFmpeg-supported codecs can be configured.

Q: How does the MCP integration work? A: HyperFrames exposes an MCP server that AI agents can call with scene HTML and rendering parameters, receiving the output video path.

Sources

• https://github.com/heygen-com/hyperframes
• https://hyperframes.dev