How to make videos with Claude Code

Claude Code can’t film anything, but it writes code well, and a video can be code: each scene is a page or a component with animations, and a renderer records it frame by frame into an MP4. Text stays sharp and spelled right, because no video model draws it.

Three ways to do it

Remotion’s agent skills

Remotion makes videos with React and publishes its own agent skills: npx skills add remotion-dev/skills. Claude Code then writes Remotion components for you. Check the license first: Remotion is free for individuals, non-profits and for-profit teams of up to three employees, and other companies need a company license. Remotion alternatives compares the options.

HyperFrames

HyperFrames is HeyGen’s open-source renderer, under Apache 2.0. A composition is an HTML file, and npx hyperframes render turns it into an MP4. It also publishes agent skills for Claude Code. The HyperFrames tutorial builds a first composition step by step.

A ready-made video skill

Both routes above start from a blank page, so the first video tends to look like everyone else’s. A video skill fixes the art direction up front: the type, the palette, the timing and the checks. Lookbk’s video skills are built on HyperFrames, so the setup is the same.

What you need

• Claude Code, started in the folder where you want the video
• Node.js 22 or newer (node -v to check)
• FFmpeg on your PATH (brew install ffmpeg, winget install ffmpeg or apt install ffmpeg)
• Network access the first time: HyperFrames runs through npx and downloads a headless Chrome on its first render

Your first render with a free skill

Kinetic Title Drop is free and makes a six-second 1080p title video from three short lines. It is a quick way to check your setup end to end.

1. 1

   Step 1: Install the skill

   Paste the install prompt from Kinetic Title Drop into Claude Code, or run the command below. Either one puts it in ~/.claude/skills/kinetic-title-drop.

   TerminalCopy Terminal

   curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop

2. 2

   Step 2: Ask for the video

   Start a new session and describe it in plain words:

   Claude CodeCopy Claude Code

   Make a 6-second kinetic title drop that says "Ship / it / today." in our brand orange, 1080p, for an X post.

3. 3

   Step 3: Let it check before it renders

   Claude Code fills in a brief, a script writes it into the template, and hyperframes check tests layout and contrast. It renders still frames for you to look at before the final MP4.

4. 4

   Step 4: Get the file

   The video lands in renders/title-drop.mp4. For another version, change the brief and ask again.

Free

video

Kinetic Title DropClaude CodeCodexCursor+3 more agents

Free

video

Pixel Quest PromoClaude CodeCodexCursor+3 more agents

video

Countdown TeaserClaude CodeCodexCursor+3 more agents

Tips for a better video

• Approve a storyboard first. Ask Claude Code for the scenes and their lengths as a list before it builds anything. Changing a line of text is cheap; re-timing a finished video is not.
• Render a draft. With HyperFrames, --quality draft renders fast for a check. Render the final file once the draft is right.
• Look at stills. Frames at a few key moments show text that runs into the edge, which is easy to miss while the video plays.
• Bring your own music. No Lookbk skill ships a track. The launch films fit their cuts to the bars of a track you license, and Pixel Quest Promo writes a cue sheet for adding chiptune.
• Plan the format. Most skills render 16:9. Countdown Teaser also renders 9:16 for Stories and Reels.

If something goes wrong

• The render says Chrome is missing

  Run npx --yes hyperframes@0.8.192 browser ensure once, with the version the skill pins, then render again.

• The render hangs, then shows a static frame

  The animation library didn’t load, usually because the network blocks cdn.jsdelivr.net. The skill’s Troubleshooting section shows how to keep a local copy of GSAP instead.

• ffmpeg: command not found

  Install FFmpeg and open a new terminal so your PATH updates, then start Claude Code again.

• Claude Code doesn’t use the skill

  Type /skills to check it is listed. If it isn’t, see Troubleshooting.

For longer pieces, see the best launch video skills and Make a product launch video with an AI agent. Every video skill is under video skills.