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.
/
Get Friday PicksSubmitMake a video with your coding agent, step by step
Claude Code and Codex can make real videos when you give them a video engine and its skill. This guide covers both agents and both main engines, with prompts you can copy.
Checked on
Can Claude Code or Codex make a video?
Short answer: yes. Install the official skill for a video engine, HyperFrames or Remotion, describe the video in plain words, look at the preview, then render an MP4 on your own computer. The agent writes the video as code, so you can ask for changes and render again.
- Pick an engine (next section).
- Install its skill in Claude Code or Codex.
- Describe the video with one of the prompts below.
- Review the preview and ask for changes.
- Render the final file and watch it once at full size.
Choose an engine
| HyperFrames | Remotion | |
|---|---|---|
| Your agent writes | Web pages: HTML, CSS and JavaScript | React components |
| Licence | Apache: free for anyone | Free for individuals and very small companies; larger companies pay |
| Good for | Fast motion pieces, launch videos, anything web-like | Teams that use React, video built from real app components |
We tested both with the same brief. Read HyperFrames vs Remotion for the results and both videos. Not sure? Start with HyperFrames: its licence is free for anyone, companies included.
Set up in Claude Code
HyperFrames, as a Claude Code plugin (from its README):
claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes
Or as standalone skills: npx skills add heygen-com/hyperframes. To start a project by hand, run npx hyperframes init my-video: it also writes a CLAUDE.md file that tells the agent to use the skills.
Remotion, from its skills README:
npx skills add remotion-dev/skills
New projects made with npx create-video@latest also offer to add the skills. Start a new Claude Code session afterwards so it loads them.
Set up in Codex
Codex looks for skills in a .agents/skills folder in your project, and in ~/.agents/skills for skills you want everywhere. OpenAI's skills docs list every place it checks.
Remotion: run npx skills add remotion-dev/skills and pick Codex when it asks. In our test this put the skill in the project's .agents/skills folder.
HyperFrames: run npx skills add heygen-com/hyperframes and pick Codex, or run npx hyperframes init my-video. In our test, init linked its core skills into ~/.agents/skills and wrote an AGENTS.md file into the project.
In Codex, type $ or run /skills to call a skill by name. If a new skill does not show up, restart Codex. Some skills are also sold as Codex plugins, with codex plugin marketplace add and codex plugin add: brag works this way, see the launch video guide.
Copy a prompt for your video
Written by us. Replace each [bracket] with your details. Each one asks the agent to show you something before the final render.
Explainer
Using [HyperFrames or Remotion], make a short explainer video about [topic] for [audience]. Plan the scenes first and show me the plan. Use only these facts: [facts]. Open the preview before you render.
Using [HyperFrames or Remotion], make a short explainer video about [topic] for [audience]. Plan the scenes first and show me the plan. Use only these facts: [facts]. Open the preview before you render.
Product promo
Using [HyperFrames or Remotion], make a short promo for [product]. Use the real screens in [folder] and our colours and font from [file]. Show me a still frame of each scene before the full render.
Using [HyperFrames or Remotion], make a short promo for [product]. Use the real screens in [folder] and our colours and font from [file]. Show me a still frame of each scene before the full render.
Data animation
Using [HyperFrames or Remotion], animate this chart: [data or file]. Keep every value exactly as given, label the axes, and show me a still of the last frame before you render.
Using [HyperFrames or Remotion], animate this chart: [data or file]. Keep every value exactly as given, label the axes, and show me a still of the last frame before you render.
Music video
Using Remotion, build a music video for [audio file]. Find the beats in the track and cut the visuals to them. I own the rights to this track. Show me a short preview before the full render.
Using Remotion, build a music video for [audio file]. Find the beats in the track and cut the visuals to them. I own the rights to this track. Show me a short preview before the full render.
For a real example of the music video route, see Music video coded in Codex with Remotion + Suno.
Preview, render and export
| HyperFrames | Remotion | |
|---|---|---|
| Preview in the browser | npx hyperframes preview | npx remotion studio |
| Check before rendering | npx hyperframes check | npx tsc --noEmit for type errors |
| Render an MP4 | npx hyperframes render -o out.mp4 | npx remotion render [CompositionId] out.mp4 |
These are the commands we ran in our own test. Both skills tell the agent to show you a preview first and to render only when you ask for the file.
When something goes wrong
- The font looks wrong. HyperFrames only finds its bundled fonts by name. For any other font, put the font file in the project's
assets/fontsfolder and load it with@font-face. The Remotion skill has guides for Google Fonts and local fonts. - Animations jump or drift. Both engines draw each frame from the timeline, so anything that runs on the clock breaks. In Remotion, CSS transitions and CSS animations do not render correctly: ask the agent to use
useCurrentFrame()andinterpolate(). In HyperFrames, avoid timers,Date.now()and endless repeats. - Renders take too long. Get one still frame right before you render the whole film. HyperFrames has a draft quality setting and can render with several workers. Remotion can render a single still.
- HyperFrames will not start. Check your Node.js version against the one its README asks for.
npx hyperframes doctorlists what is missing. - The video starts on a blank frame. Social players show the first frame as the thumbnail. Ask the agent to start with the title already on screen.
Examples made with these engines
Made and posted by the people credited on each video, not by us. Hover to preview, or open one to watch with sound.
MOTION0:10
MOTION1:35A demo video animated with Claude Code + Remotion
Made with Claude Code + Remotion. Remotion is free and open source: the main button takes you to it.
MOTION0:22Raw assets to a reusable video system with Remotion
The Remotion skills turned a pile of assets into reusable video compositions; the post shows the process and the result.
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.
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.
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.
Our own test videos are on the HyperFrames vs Remotion page.
Related pages
- HyperFrames vs Remotion: our same-brief test Comparison
- Motion graphics skills for coding agents Category
- Video editing skills: edit real footage with your agent Category
- How to make a launch video with an AI agent Guide
- HyperFrames Skill
- Remotion official agent skills Skill
- Codex whiteboard video skill Skill for Codex
- Music video coded in Codex with Remotion + Suno Use case
Free newsletter
Friday Picks
New AI tools you can use right away, in plain words. Every Friday.