Making videos with Claude Code and Remotion

Short answer: Claude Code makes videos by writing Remotion — React components rendered to MP4. Install Remotion's agent skills so it knows the API, give it a component library to compose rather than animation to invent, and brief it with your real copy and a length. Then review the frames yourself.

1. Set up the project with skills

npx create-video@latest

The Remotion scaffolder offers to add Remotion's agent skills — say yes. In an existing project:

npx skills add remotion-dev/skills

These teach the agent Remotion's own best practices: useCurrentFrame(), interpolate(), <Sequence>, rendering. They work with Claude Code, Codex, Cursor and other agents.

Remotion's docs also serve every page as markdown: append .md to a docs URL, and Claude Code fetches that version when you paste a link.

2. Give it components, not a blank canvas

Give the agent the Imgcli component index so it can choose a component for each beat and read its props, duration, and install command.

3. Write the brief like a shot list

Vague prompts get vague videos. Name the length, the format, the beats and the exact words on screen:

Make a 20-second 1920x1080 launch video for Acme Billing in this Remotion project.

Beats:
1. Title: "Invoices, sent before lunch" (3s)
2. A prompt being typed and sent: "Bill Acme for September's usage" (5s)
3. The answer streaming in (6s)
4. Screen recording public/recordings/checkout.mp4, push in on the Send button (6s)

Use installed Imgcli components for every beat; do not write animation by hand.
Transitions between beats: slide from the right, not fade.
Render it to out/launch.mp4 when Studio looks right.

The last lines do the most work: "do not write animation by hand" keeps the agent composing, and naming the transition avoids the most common defect.

4. What agents still get wrong

• Crossfades that stack scenes. Remotion's fade() keeps the outgoing scene at full opacity, so two headlines sit on top of each other mid-transition. Ask for slide() — the full reason is in why your Remotion scene transitions look broken.
• Improvised easing. Linear moves, springs that bounce type, quint ease-outs that look frozen on a 30fps clock. See how to animate text in Remotion.
• Guessed props. An agent that has not read a component's props invents plausible ones. Use the component index to confirm each install name.
• Invisible text. A render with no background is black, and light-theme text disappears on it. Tell the agent the background colour.
• Never looking. The agent cannot see motion. Scrub it in Studio yourself before you ship.

Next: how to make a product demo video in React — the same video, step by step, if you would rather build it yourself.

FAQ