HyperFrames, and when finished styles are the shorter path
HyperFrames is HeyGen's open-source framework for making videos from HTML, built for AI agents. It is a full toolkit: a timeline written in HTML, a catalog of ready-made blocks, audio mixing and cloud rendering. Here is what it does, how it compares with ultramotion, and when to use which. They render the same way, so you can also use both.
What HyperFrames is
A video is an HTML file. Data attributes on the elements set when each one starts, how long it stays and which track it is on; the animation itself can be GSAP, CSS, Lottie, Three.js, Anime.js or the Web Animations API. The renderer opens the page in headless Chrome, seeks to every frame and encodes the result with FFmpeg, so the same file always gives the same video. It needs Node.js 22+ and FFmpeg, is Apache 2.0, and renders locally, in Docker, on AWS Lambda, or on HeyGen's servers if you want. No HeyGen account is needed for local use.
For agents there are 21 skills, from a router (/hyperframes) to workflows such as turning a music track into a beat-synced video, sourcing music, sound effects and images, and mixing audio with EQ, compression and voice ducking. The catalog adds blocks for transitions, captions, charts, maps and effects with npx hyperframes add.
What ultramotion is
A set of finished motion styles packaged as Agent Skills: Liquid Glass, Kinetic Type, Light Particles, Hand-drawn Explainer, Painterly, Ink Wash, Data Story and more. Each style is one self-contained scene.html, where the frame is a pure function of time, plus a score.py that writes the music for that video in code, with numpy and no music files or music models. Your agent adapts the scene to your content, renders it frame by frame in a headless browser and adds the soundtrack. Every style page shows the same prompt run with and without the skill in Claude Code and ChatGPT Codex.
HyperFrames or ultramotion?
| HyperFrames | ultramotion | |
|---|---|---|
| What it is | A framework and editor: timeline, blocks, audio mixing, rendering | A set of finished styles, each with its own motion rules and music |
| What the agent writes | A composition in HTML with data attributes, using blocks from the catalog | Your content in an existing scene: new words, numbers, images, timings |
| Look | Whatever the agent and the catalog put together | Set by the style: Liquid Glass looks like Liquid Glass every time |
| Music | Your own track, the catalog, or a music model; full mixing | Written in code for each video, timed to the cuts |
| Needs | Node.js 22+, FFmpeg | A Chromium browser, FFmpeg, Python with numpy and scipy |
| Rendering | Local, Docker, AWS Lambda, or HeyGen cloud | Local |
| License | Apache 2.0 | MIT |
Which one to use
Use HyperFrames if you want to build videos of your own design, edit them on a timeline, mix real audio, or render at scale in the cloud. Use ultramotion if you already know the look you want and would rather get that exact look in one prompt than direct the design yourself. Both are agent skills, so they can sit side by side in the same agent: ask for "a launch video in the Liquid Glass style" and the agent uses ultramotion; ask for a custom edit and it uses HyperFrames.
Try it
npx skills add sunsiyuan/ultramotionThen ask your agent, for example: "Make a 15-second launch video for our app in the Liquid Glass style." Browse the styles to see what each one looks like, or try the Liquid Glass generator in your browser.