Editing Videos With Claude Code and Remotion

Editing video sucks because the tools were built for mice, not for prompts. Remotion fixes that — and once your video lives in code, Claude Code (or OpenCode) becomes the editor you wish Premiere had.

Here's the trick: Remotion lets you build videos with React. Every scene is a component. Every animation is a function of frame number. Every cut is a prop change. That means a coding agent can read your video, understand it, and edit it the same way it edits a website.

Stop dragging clips. Start telling an agent what to do.

Step 1: Spin Up a Remotion Project

Bootstrap a Remotion app from scratch. You only need Node 18+ and a terminal.

npm create video@latest my-reel
cd my-reel
npm install
npm start

Pick the "Hello World" template when prompted. npm start opens the Remotion Studio in your browser — that's your live preview, scrubber, and renderer all in one.

Step 2: Point Claude Code (or OpenCode) at the Folder

Open the project in your terminal and launch your agent of choice:

# Anthropic's CLI
claude

# Or the open-source alternative
opencode

Both agents read your project the same way. They scan the file tree, understand src/Composition.tsx is your scene, see src/Root.tsx registering the composition, and figure out which props control what.

The first thing I do in a fresh Remotion project is ask the agent to map the codebase out loud:

Read the Remotion project in this directory.
Tell me which component is the main composition, what props it takes,
and where I'd change the duration, fps, and resolution.

Now the agent has the same mental model you do. From here, every edit is one prompt away.

Step 3: Describe the Video You Actually Want

Don't ask for "a cool intro video." Be a director. Give the agent a shot list, copy, timing, and vibe.

Replace the Hello World composition with a 6-second product intro for "Clawdbot."

Scenes:
- 0.0s - 1.5s: Black background, the word "Clawdbot" types in with a cursor.
- 1.5s - 3.0s: Logo (use a placeholder <div>) springs in from the bottom with a bouncy animation.
- 3.0s - 5.0s: Tagline "Claude. Free. Forever." fades up letter by letter.
- 5.0s - 6.0s: CTA pill button "Try it →" pulses on screen.

Use Inter font, emerald-400 accents on a near-black background.
Keep everything in src/Composition.tsx and update src/Root.tsx with the right durationInFrames at 30fps.

The agent will edit Composition.tsx, set up useCurrentFrame, interpolate, and spring, and update the duration in Root.tsx. Hit save and the Remotion Studio hot-reloads instantly. You see it before the prompt even leaves your scrollback.

Step 4: Iterate Like a Director

First render is never final. The whole point of doing this in code is that fixes are surgical, not destructive.

• "The logo spring is too bouncy — drop the damping by half."
• "Hold the tagline on screen for an extra 30 frames before fading out."
• "Swap the emerald accent for purple-500 across all scenes."
• "Add a subtle grain overlay using a noise SVG, 8% opacity."

Each note becomes a small diff. No re-rendering the whole timeline by hand. No remembering where in Premiere you set that easing curve. The agent already knows.

Step 5: Bring Real Assets In

Drop your audio, images, and footage into public/. Then talk to the agent like you would a junior editor.

Use public/voiceover.mp3 as the audio track for the whole video.
Sync the scene transitions to these timestamps: 0.0, 1.6, 3.2, 5.1.
Add the <Audio> component from remotion and set durationInFrames
to match the audio length (use staticFile + getAudioDurationInSeconds).

Remotion ships components for <Img>, <Video>, <Audio>, and <OffthreadVideo>. The agent already knows them. Ask for B-roll cuts, captions from a transcript JSON, ken-burns zooms on still photos — all of it is a prompt.

Step 6: Render and Ship

When the preview matches your head, render an MP4 from the CLI.

npx remotion render src/index.ts MainComp out/reel.mp4

You can also let the agent set up a render script in package.json, wire it to a GitHub Action, or push the output to S3. The video is now part of your repo's release pipeline like any other build artifact.

Why This Workflow Beats a Timeline Editor

Three things break in traditional video editing the moment you scale: versioning, iteration speed, and repeatability. Remotion + a coding agent fixes all three.

• Versioning: every edit is a git commit. Roll back the cut, not the file.
• Iteration speed: "make the title bigger" takes one sentence, not five clicks.
• Repeatability: need 50 personalised reels? Loop over a JSON of names and render each one.

The leverage shows up the second you stop thinking of a video as a finished file and start thinking of it as a function: (props) => mp4.

Stop editing footage. Start editing code that becomes footage.