heygen-com/hyperframes
Write HTML. Render video. Built for agents.
HyperFrames is heygen-com's open-source video rendering framework that lets you create MP4 video compositions using HTML, CSS, and JavaScript, with first-class skills for Claude Code, Cursor, Gemini CLI, and OpenAI Codex. If you want AI agents that ship rendered video, start here.
Our Review
HyperFrames is HeyGen's open-source video rendering framework that lets you create video compositions using HTML, CSS, and JavaScript -- 19,300 stars and 1,800 forks as of May 2026. Released March 2026 by heygen-com under Apache 2.0 and published as the npm package "hyperframes," it brings agent-first video authoring to AI coding tools like Claude Code, Cursor, Gemini CLI, and Codex.
What HyperFrames does:
- •HTML-based video compositions write standard HTML/CSS/JS for each frame, then render to MP4 via a Puppeteer-driven pipeline.
- •First-class AI agent support ships skills for Claude Code, Cursor, Gemini CLI, and Codex via npx skills add heygen-com/hyperframes.
- •Animation adapter library bundled adapters for GSAP, anime.js, CSS animations, Lottie, Three.js, and Web Animations API timelines.
- •Tailwind v4 browser runtime styling with the latest Tailwind via browser-runtime mode, no build step required.
- •Slash commands /hyperframes (composition authoring), /hyperframes-cli (dev loop), /hyperframes-media (TTS, transcription, background removal), plus animation-library helpers.
- •Multi-agent plugin manifests one repo ships Claude Code plugin, Cursor plugin, OpenAI Codex plugin manifests; install whichever IDE you use.
- •Media preprocessing built in TTS via skills, transcription, background removal, asset prep all wired into the composition pipeline.
HyperFrames ecosystem:
- •HeyGen the AI avatar video company behind HyperFrames, integrating HyperFrames output with its avatar pipeline.
- •npm registry distributed as the "hyperframes" package on npm with weekly download stats.
- •Discord community maintainer-run channel for composition help and feature requests.
- •Codex marketplace + Cursor marketplace listed plugins for sparse-install in either agent.
Getting started:
For the AI agent path: run npx skills add heygen-com/hyperframes in your project, then prompt your agent with Using /hyperframes, create a 10-second product intro. For manual use: install Node.js 22+ and the hyperframes npm package, write a composition in HTML/CSS, and render via hyperframes render. Full docs at hyperframes.heygen.com.
Limitations:
Requires Node.js 22+ -- older runtimes are not supported. Rendering long videos is CPU and disk intensive; production-scale rendering is best done on a workstation with plenty of disk. HyperFrames is HTML-first, so video editors used to After Effects timelines or Premiere will need to adapt to writing markup instead of dragging on a timeline. Some animation adapters (Three.js especially) add notable bundle size and memory pressure during render.
Our Verdict
HyperFrames in 2026 is the most agent-friendly open-source video rendering framework on GitHub. 19,300 stars in two months, 1,800 forks, Apache 2.0, built by heygen-com (the AI avatar video company), with first-class integrations for every major AI coding agent.
For Vibe Builders working in video content, HyperFrames is the path from "describe a video to your AI agent" to a rendered MP4 without ever opening After Effects. Skills register as slash commands (/hyperframes, /hyperframes-cli, /hyperframes-media), and the GSAP, Lottie, and CSS animation adapters cover most production styles.
For Developers building video tooling, the Puppeteer-based render pipeline is solid and extensible. The plugin manifests (Claude Code, Cursor, Codex) make it straightforward to ship video features inside your own agent product. The Tailwind v4 browser-runtime mode means no build step in composition development.
Skip HyperFrames if your workflow is traditional video editing in After Effects or Premiere -- HTML-first authoring is a different mental model. Skip if you only need short avatar clips (HeyGen's hosted product covers that without writing code). For 3D-heavy compositions where Three.js is overhead, Remotion (the well-known React video framework) may be a better fit because of its larger 3D ecosystem.
Frequently Asked Questions
What is HyperFrames?
HyperFrames is HeyGen's open-source video rendering framework that lets you create video compositions using HTML, CSS, and JavaScript, then render them to MP4 via a Puppeteer-driven pipeline. Released March 2026 by heygen-com under Apache 2.0, it has first-class support for AI coding agents like Claude Code, Cursor, Gemini CLI, and Codex. As of May 2026 it has 19,300 GitHub stars.
How does the AI agent integration work?
Run npx skills add heygen-com/hyperframes in your project, then your agent gets new slash commands. /hyperframes loads composition authoring context, /hyperframes-cli runs the dev loop (init, lint, preview, render), /hyperframes-media handles TTS and transcription, and animation-library helpers like /gsap, /lottie, and /three are available when compositions need them.
Which AI agents work with HyperFrames?
HyperFrames ships plugin manifests for Claude Code (.claude-plugin), Cursor (.cursor-plugin), and OpenAI Codex (.codex-plugin), plus a skills directory that any skill-aware agent can consume via npx skills add. Gemini CLI works via the skills directory. The same authoring context surfaces consistently across all four agents.
How do I render videos with HyperFrames?
Install hyperframes from npm (requires Node.js 22+), write a composition as HTML/CSS/JS, and run hyperframes render to produce an MP4. The render pipeline uses Puppeteer to drive a headless Chromium, capturing frames at the configured frame rate and assembling them with FFmpeg. Production-scale rendering benefits from a workstation with plenty of disk.
HyperFrames vs Remotion -- which should I choose?
Choose HyperFrames when you want first-class AI agent integrations and HTML-first authoring with GSAP timelines and Tailwind v4. Choose Remotion when you want React-first authoring with a large existing component ecosystem and Three.js workflows. Both render via headless Chromium; the key difference is agent-first design (HyperFrames) vs React-first design (Remotion).
What license does hyperframes use?
hyperframes uses the Apache-2.0 license.
What are alternatives to hyperframes?
Explore related tools and alternatives on My AI Guide.
Open source & community-verified
Apache-2.0 licensed: free to use in any project, no strings attached. 19,928 developers have starred this, meaning the community has reviewed and trusted it.
Reviewed by My AI Guide for relevance, quality, and active maintenance before listing.
Topics