HyperFrames
A HyperFrames video studio you can run from a chat
HyperFrames turns HTML, CSS, and GSAP animation into rendered video. CapyFrame wraps that idea in a hosted workspace, so you describe the video and review the result instead of hand-writing the composition.
HyperFrames is an open-source framework from HeyGen that renders HTML, CSS, and GSAP animation timelines into video. CapyFrame is a separate, hosted studio that generates HyperFrames-style compositions from a chat brief, lets you approve the plan, edit scenes in plain language, and export an MP4 without installing Node, FFmpeg, or Chrome.
What is a HyperFrame composition?
A HyperFrames composition is an ordinary HTML document. A root element carries the video width, height, frame rate, and duration. Each scene is an element with a start time and a duration, and a paused GSAP timeline is stepped frame by frame to produce the video. Because it is HTML, anything a browser can draw can become a scene.
Where CapyFrame fits
Writing a composition by hand is powerful, but it asks you to manage layout, timing, assets, and rendering yourself. CapyFrame keeps the same HTML and GSAP foundation and puts a workflow around it.
- Describe the video in chat and review a structured Video Plan before anything is built.
- Approve the plan to generate the script, scenes, and styles as one validated composition.
- Patch scenes, captions, backdrops, and footage by typing what you want changed.
- Preview in the browser, add voice and captions, and export an MP4.
Safe by design
Generated composition code is treated as untrusted. CapyFrame inspects the HTML, CSS, and script before preview or export, and blocks network access, storage, workers, navigation, and unregistered asset URLs. Only the approved animation runtime and the assets in your project can load.
When to use HyperFrames directly instead
If you want to write HTML, CSS, and GSAP yourself, keep your source in a repository, or run renders in your own pipeline, use HyperFrames directly. CapyFrame is the better fit when you want the studio to guide planning, editing, and delivery. The two are complementary: CapyFrame is not HyperFrames, and it is not affiliated with HeyGen.
How to make a HyperFrames-style video with CapyFrame
Describe the video
Write a short brief in chat: the topic, audience, length, and tone. Attach footage or audio if you have it.
Review the Video Plan
CapyFrame proposes scenes, pacing, and the materials each scene uses. Edit any field before you continue.
Approve and generate
Approve the plan and CapyFrame writes the script and builds a validated HTML and GSAP composition.
Refine in chat
Ask for changes in plain language, such as trimming a clip, restyling captions, or swapping a backdrop. Every change can be undone.
Export an MP4
Add voice and captions if you want them, then export the finished video.
HyperFrames questions
What is HyperFrames?
HyperFrames is an open-source framework from HeyGen that renders HTML, CSS, and GSAP animation timelines into video. It is released under the Apache-2.0 license.
Is CapyFrame the same as HyperFrames?
No. CapyFrame is a hosted video studio that produces HyperFrames-style HTML and GSAP compositions inside a guided workflow. HyperFrames is the underlying open-source framework, and CapyFrame is not affiliated with HeyGen.
Do I need to install anything to make a HyperFrames video with CapyFrame?
No. CapyFrame runs in your browser, so you do not need to install Node, npm, Chrome, or FFmpeg. Developers who use HyperFrames directly do need their own local or hosted render setup.
Can I edit the HTML myself?
CapyFrame is built for editing through chat, scene settings, and the timeline. Its compositions are HTML-native, but the studio manages the code and validates it before preview and export.
Is CapyFrame free to try?
Yes. CapyFrame has a Free plan, and paid plans add AI credit, storage, voice, exports, and longer videos. The pricing page lists current limits.