Remotion + Claude Code: How to Make & Edit AI Videos (Step-by-Step Guide)

Remotion + Claude Code explained (and why it's different from text-to-video)

Here's the simple version. Remotion is React for video. You write components, and it renders frames into a video. Claude Code is a coding agent that takes your prompt and writes the React for you. Put them together, and you get an editing workflow that feels like talking to a junior motion designer who also ships clean code.

Why it beats black-box text-to-video: you get real source code, version control, parameters, and repeatable templates. No random clip that you can't tweak. With Remotion, the timeline is code, and at 30 fps, frame 30 equals exactly 1 second. That precision matters when you want your text to hit on beat. Remotion is also open source, so you can audit it and build on it. Claude Code just accelerates the boring parts.

Agent Skills are the missing piece. They are instruction sets that teach Claude Code how to use a framework the right way. The Remotion Skill covers animations, audio, captions, compositions, and more, so the agent doesn't guess. It follows battle-tested patterns.

Important facts to bookmark:

• Remotion is a React framework for programmatic video, and videos are built as components you can edit and iterate.
• Claude Code requires a paid subscription to run this workflow. See the docs for details on the official Remotion page.
• You install a new project using npx create-video@latest, pick the Blank template, enable Tailwind, and allow Skills to install, all documented in the same page above.
• To add the Skills package from the Remotion team, use npx skills add remotion-dev/skills, which Remotion announced publicly on X.

What you can build with Remotion + Claude Code

Once the skill is loaded, your prompt maps to real code changes. That's the unlock. Tell Claude what you want, and it edits components, props, and timing. Here are projects I've shipped and what the agent actually did under the hood.

Social clips that fit every feed

• Hook, then kinetic typography, then CTA. Claude adds <Sequence> blocks for pacing, uses spring and interpolate for snappy text, and sets brand colors in Tailwind classes or style props.
• Auto-resize for 9:16, 1:1, or 16:9 by creating separate <Composition>s with different width, height, and fps.

Product launches that feel polished

• Animate UI mockups, add screen inserts, and sync music and voiceover. Claude imports assets, trims <Audio> to start exactly at the beat, and lowers background music when narration starts.
• Add logo and brand font with Google Fonts or local font loading, then reveal it with a clean scale and opacity combo.

Data and charts from JSON or CSV

• Programmatic visuals that scale. One template, thousands of variants. Claude reads your data, builds a bar chart component, and animates bars in order so the story makes sense.
• Swap the dataset, keep the design. Re-render, done.

Prerequisites and quick setup (5 minutes)

Before you prompt anything, get your environment clean and verify it works.

• Install Node.js LTS and make sure npm and npx run in your terminal.
• Confirm your Claude Code CLI is logged in. You need a paid plan to use it with Skills, which the Remotion docs state clearly here.
• Create the Remotion project with Skills enabled.
• Start the dev server and make sure the preview opens.

Commands you'll run

1. Create the project : npx create-video@latest 3 choose Blank template, enable Tailwind, and install Skills when prompted.
2. Enter the directory: cd my-video
3. Install deps: npm install
4. Start preview: npm run dev
5. Open Claude in a new terminal: claude
6. Add Remotion Skills: npx skills add remotion-dev/skills (as shared by Remotion here), then tell Claude to use the Remotion Skill.

Step-by-step: Make your first video with Claude Code and Remotion

Here's the quick path from zero to a rendered clip. It's fast, but don't rush. Little checks save you minutes.

1. Start clean 3 preview running with npm run dev. No TypeScript errors in the terminal.
2. Tell Claude your goal 3 open the CLI with claude in your project root. Say what you want and mention the Skill. Example: "Use the Remotion Skill. Create a 1080x1920 composition at 30 fps, 12 seconds long, brand colors #111827 and #00E5A1. Add bold headline, subhead, and a logo fade. Add a subtle music bed at -14 LUFS and duck it under voiceover by -9 dB."
3. Let it scaffold 3 it will add a <Composition>, import fonts, create a Title component, and wire timing with <Sequence>, spring, and interpolate.
4. Add assets 3 drop your logo in /public or /assets. Put audio in /public/audio. Tell Claude the paths if it guesses wrong.
5. Tighten timing 3 ask for exact beats. Example: "Make the headline pop at frame 15, subhead at frame 45. Fade music in over 12 frames. Start VO at frame 60." Remember, 30 fps means frame 30 is 1 second.
6. Preview changes 3 use the Remotion preview. If fonts don't load, have Claude add the font loader and apply classes globally.
7. Render 3 when it looks good, ask Claude to add a render script and run it, for example: npm run build then npm run render with the composition id.

A prompt you can paste

Paste this into Claude after you add the Skill:

Use the Remotion Skill. Create a composition id="LaunchClip" size 1080x1920 at 30 fps, duration 360 frames. Add a headline "Meet Flux 2", subhead "Faster, smarter, cheaper". Apply brand colors #0F172A background, #22D3EE accent. Animate headline with a spring from scale 0.9 to 1.0 and opacity 0 to 1 over 18 frames. Add background music at -16 dB and a voiceover placeholder. Duck music under VO by -9 dB. Render a 9:16 MP4.

Claude Code vs. other AI coding agents for Remotion

I've tried this with multiple agents. Claude Code is the smoothest today. It loads the Remotion Skill without drama, reasons well about timing, and keeps diffs small. Others can do it, but you babysit more.

Best practices, troubleshooting, and scaling

Here's the stuff that saved me hours. Most of it comes straight from the Remotion Skill rules and hands-on use.

Animations that feel good

• Use spring for snappy, physical motion. Adjust damping and stiffness until it feels right, then lock numbers.
• Use interpolate for smooth opacity and color shifts. Map frame ranges to values, keep it predictable.
• For sequencing, wrap elements in <Sequence from={x} durationInFrames={y}> so you can slide blocks around without breaking everything.

Assets, fonts, and audio

• Fonts: load Google Fonts or local files early. Apply font stacks globally to avoid flashes.
• Images and video: keep paths stable. If a clip fails to decode, test it in the browser first and convert it to a known-good format.
• Audio: trim starts, set volume in decibels, and duck under voiceover. Preview at the same loudness each time so your mix is consistent.

Captions that actually sync

• Ask Claude to build a captions component and pass in timed lines. Keep timestamps in frames, not seconds, so the math stays simple.
• If text wraps weird, measure text and set max width. Adjust line height and font size per break point.

Performance and flaky renders

• Heavy scenes: reduce shadows and blur. Cache expensive calculations.
• Video decode: if a format stalls, swap it. Simpler codecs win for previews.
• Preview lag: keep the tab in focus and use shorter compositions while you iterate. Render final files once you lock timing.

Parameters and scale

• Add parameters with a schema so you can swap text, colors, and images from a JSON file.
• Batch generation: loop through your dataset and render multiple compositions headlessly. One template can generate hundreds of unique videos.