About this skill
HyperFrames is HeyGen's open-source HTML-to-video renderer, and this is its official agent skill. It teaches the agent the render contract, the work loop, and what each kind of video needs, from captions and charts to full launch films.
You say
Make a 20-second launch film for this project in HyperFrames. Bold type, one idea per beat, and a logo at the end.
How it works
- Your agent writes the video as an index.html: timed clips, CSS, and a paused GSAP timeline.
- It previews and checks the composition, then fixes what the checks find.
- The HyperFrames CLI captures the page frame by frame and encodes an MP4.
Getting a good result
- Give it one idea per beat and a target length. A short brief with a clear point beats a long list of effects.
- Keep text in HTML rather than in images, so a later edit is one line and not a redraw.
- Install a fixed CLI version in the project, so the same composition renders the same way next month.
What you get
- The official HyperFrames skill at a pinned commit
- Its references for motion, story, captions, sound and review
- Its frame presets and helper scripts
- The Apache-2.0 license and attribution
Good fit
- Developers who think in HTML and CSS
- Launch films, explainers, title cards and vertical clips
Not for
- Editing long footage by hand
- Photorealistic generated video
How to install it
- Download the ZIP and unzip it.
- Move the folder holding
SKILL.mdinto your agent's skills folder, such as~/.claude/skills/for Claude Code. - Start a new session and ask for what you want to make.
Needs: An agent that reads skills, Node.js, HyperFrames CLI.
Popular on X
Posts showing demand for this kind of video, with views measured on 31 October 2026. Unless a post names this tool, it wasn't made with it.
- Opus 5.5, HyperFrames and Whisper as a free video stack 88,338 views on X
- A YouTube intro made with Opus 5.5 and HyperFrames 30,840 views on X
FAQ
Is it really free?
Yes. Create a free AdAnt account to download the ZIP. There is no card and no trial timer.
HyperFrames or Remotion?
HyperFrames renders HTML and has an Apache-2.0 license. Remotion uses React, and many companies need its paid Company License. Choose by your stack and your license needs.
Can I get it without signing up?
Yes. The original is public on GitHub, linked on this page. AdAnt's download is a pinned, read copy in one ZIP.
Related skills
Vertical Ad Motion Graphics
Direct and build a 9:16 motion graphics ad that works on mute, with no footage.
GSAP Animation Core
Give your agent GreenSock's official guidance for timing, easing and stagger.
Three.js Animation
Add keyframes, procedural motion and clip blending to 3D scenes made with code.