HyperFrames is a TypeScript framework that takes HTML, CSS, and GSAP animations and produces seekable MP4 files.
It runs locally via CLI, integrates with AI agents through MCP and skills.sh, and ships with a hosted playground.
The core promise is deterministic video output from code, which means agents can write HTML and get frame-perfect video without manual timeline editing.
The project has 42K stars and is trending #11 on GitHub for TypeScript.
HeyGen built it to make video generation programmatically addressable.
The architecture is Puppeteer for DOM rendering, GSAP for animation timing, and FFmpeg for encoding.
The interesting part is how it guarantees determinism when each layer is async by default.
Why HTML-to-Video Matters for Agents Most video generation tools target human designers.
You drag keyframes, adjust curves, export.
Agents need something different: a function that takes structured input and returns a file.
HyperFrames treats video as a build artifact.
You write HTML with animation code, run a command, get an MP4.
This shifts video from creative workflow to infrastructure.
An agent can generate a data visualization, encode it as HTML with GSAP transitions, and call HyperFrames to render.
No GUI, no manual export, no non-deterministic output.
The same HTML always produces the same video.
The MCP server integration means agents can invoke HyperFrames as a tool.
The skills.sh distribution packages it as a skill set that coding agents can install and call.
This is video rendering as a first-class agent capability, not a side effect of screen recording.
Architecture: Puppeteer, GSAP, and FFmpeg HyperFrames chains three components: Puppeteer launches a headless Chromium instance and loads your HTML.
GSAP (GreenSock Animation Platform) runs animations inside the browser.
GSAP is deterministic because it uses explicit timelines, not CSS transitions or requestAnimationFrame drift.
FFmpeg encodes the captured frames into MP4 with H.264 or other codecs.
The pipeline looks like this: The key is .
GSAP lets you jump to any point in the animation timeline without playing it in real time.
Puppeteer captures a screenshot at each seek position.
FFmpeg stitches the screenshots into video.
Determinism and Frame Timing Determinism breaks if any of these layers drift: Puppeteer rendering: DOM layout must be stable.
Fonts, images, and CSS must load before capture starts.
HyperFrames waits for a ready signal.
GSAP animations: GSAP timelines are deterministic by design.
Seeking to always produces the same visual state.
CSS transitions or loops would not.
FFmpeg encoding: Same input frames and codec settings produce the same output.
HyperFrames defaults to H.264 with fixed bitrate to avoid encoder variance.
The failure mode is async resource loading.
If a web font or image loads after the first frame capture, the video will show a flash.
HyperFrames mitigates this with preload checks and a configurable wait time.
Another failure mode is GSAP timeline complexity.
If your animation uses random values or Date.now(), it is not deterministic.
HyperFrames does not enforce purity.
It assumes your HTML is reproducible.
MCP Server and Agent Integration HyperFrames ships an MCP server that exposes video rendering as a tool.
The server accepts HTML strings or file paths, renders them, and returns MP4 URLs or base64 blobs.
The MCP server holds no persistent state between calls.
Each render is a fresh Puppeteer instance.
This avoids state leakage but means you cannot reuse browser sessions for performance.
The trade-off is correctness over speed.
The skills.sh integration packages HyperFrames as a skill set.
An agent can install it with and then call commands.
The core skill set includes: to generate a new project to produce MP4 from HTML to open the playground The skills are non-interactive.
An agent can invoke them in a script without human input.
This is the key difference from CLI tools that prompt for options.
Codec Choices and Output Shape