MOTION0:18HyperFrames demo: animated video from HTML, CSS and JS
A short tour of what HyperFrames renders, plus its built-in editor. Works in Claude Code, Cursor, Codex and Gemini.
/
SubmitHyperFrames: write HTML, get a video
Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
0:00
Video: @TopClickMediaSA on X, shown with credit. Press play; sound is on unless you mute it.
Images from the project README on GitHub.
Reference videos (9)
Real videos made with this skill, credited to their creators. Hover to preview.
MOTION0:18
MOTION1:20HyperFrames Studio: a video editor built for agents
Made with HyperFrames. HyperFrames is free and open source: the main button takes you to it.
MOTION0:10Japanese product promo made in Claude Code
Made with Claude Code + HyperFrames. HyperFrames is free and open source: the main button takes you to it.
MOTION0:30"What day is it?" answered as a 30-second motion piece
Made with HyperFrames + Claude. HyperFrames is free and open source: the main button takes you to it.
MOTION1:04Live-coding music video built on HyperFrames
A custom skill pairs Strudel beats with HyperFrames visuals, so the agent composes the track and the video together.
MOTION0:52Your Claude Code history, animated with HyperFrames
A skill reads local session history and turns a typical session into an animated story, built on HyperFrames.
MOTION0:20Short Instagram motion pieces with HyperFrames
After installing the skill, the agent spun up a small in-browser studio and produced short social motion clips.
MOTION0:42A full ad made with HyperFrames in 35 minutes
An agent wrote the whole ad as code with HyperFrames, with no editing software involved.
MOTION0:4545-second spot written entirely in code
1,350 frames of HTML, CSS, GSAP and WebGL cut to a 144 BPM track, with no camera, made with HyperFrames.
Try it in 60 seconds
claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes npx skills add heygen-com/hyperframes
Install command copied from the project README. Check the README for the latest version.
What it does
Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord
HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
Quoted from the README of heygen-com/hyperframes.
Inside the repo
Quick StartWith an AI coding agentSkillsPlugin packagesUpload to CodexRouterCreation workflowsDomain skills (loaded on demand)Manually with the CLIWhat You Can BuildFrame.mdHow It Works
A prompt to try
Make a 15-second 9:16 promo for [brand] with HyperFrames: bold kinetic headline, 3 product shots sliding in on the beat, end card with logo. Render to MP4.
Make a 15-second 9:16 promo for [brand] with HyperFrames: bold kinetic headline, 3 product shots sliding in on the beat, end card with logo. Render to MP4.
Written by us so you can reuse it. Replace each [bracket] with your details.
Step by step
- Open the GitHub repo and skim the README (install commands change often).
- Install it: copy the skill folder into ~/.claude/skills/ (Claude Code) or ~/.codex/skills/ (Codex), or use the plugin/marketplace command from the README.
- Restart Claude Code or Codex.
- Ask for a video, preview, tweak timing, then render the MP4.
Docs, demos & materials
Sources & credit
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
Related
SKILL0:34/brag: turn a finished project into a launch video
Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28Anatomy: interactive isometric illustrations
Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6k
SKILLGSAP official agent skills
Official skills from GreenSock that teach agents to write correct, smooth GSAP animations.
Claude Code +1★ 16.4k
SKILLmotion-skills: 50 packs (Reels, explainers, data-viz, Manim)
Install a pack and your agent works like a motion designer for TikTok/Reels, explainers, charts and WebGL.
Claude Code +2★ 812
SKILLanimate: single-file procedural videos with a storyboard
Makes short canvas videos in any style, planning story, look and storyboard as it goes.
Claude Code★ 703
SKILLBarty-Bart motion-graphics skills
Motion-graphics skills for Claude Code and Codex: animated cards and B-roll from your script.
Claude Code +1★ 682Coming soon
AgentsUses Weekly
A free weekly email with the best new skills and agent workflows is coming soon. Want a heads-up when the first issue goes out? Email [email protected] and we will let you know.