HyperFrames
Open-source framework for composing videos with HTML, CSS and JavaScript
Introduction
HyperFrames is an Apache 2.0 framework, originally from HeyGen, that lets AI agents and developers build and edit videos with ordinary web technologies. Timing is set through HTML data attributes, styling through CSS and animation with GSAP.
- Added on
- Nov 2, 2026
- Website
- hyperframes.heygen.com
- Pricing model
- Free
- Company
- HeyGen
Product information
What is HyperFrames?
HyperFrames is an open-source framework that lets AI agents and developers compose and edit videos using HTML, CSS and JavaScript, introducing a code-driven "vibe-coding" workflow.
How to use HyperFrames?
Write HTML with data attributes for timing, style it with CSS and animate with JavaScript (GSAP). It can also be added to agent workflows such as Claude Code as a skill.
Core features of HyperFrames
- Video editing through code
- Compositions in HTML, CSS and JS
- Apache 2.0 open source
- Works with agents like Claude Code
- GSAP-based animation
Use cases of HyperFrames
- 1Letting AI agents generate video content
- 2Building data-driven video layouts
- 3Automating repetitive editing through scripts
Frequently asked questions about HyperFrames
What license does HyperFrames use?+
Apache 2.0.
How do I add HyperFrames to Claude Code?+
Run npx skills add heygen-com/hyperframes to install it as a skill.
What does HyperFrames use for animation?+
It supports GSAP-based animation alongside HTML and CSS.
Which category is HyperFrames in?+
HyperFrames is listed under AI Code Editor, AI Video Editor.