Post cover image

January 23, 2026

Making Videos with Code: The Complete Guide to Remotion and Claude Code

I asked Claude Code to build me a product launch video this Thursday. I described what I wanted in plain English, like I was talking to a…

Kristopher Dunham

9 min read

I asked Claude Code to build me a product launch video this Thursday. I described what I wanted in plain English, like I was talking to a video editor. Ten minutes later, I had a 30-second clip with animated text, synchronized music, and product screenshots ready to publish. No timeline scrubbing, no keyframe hunting, no rendering for hours.

This isn't AI generating random video from text prompts. That technology exists but produces inconsistent, uneditable results. This is different. Claude writes the code that renders your video. You get precision, editability, and the ability to generate thousands of variations from a single template.

Here's everything you need to know to start making videos this way.

What Remotion Actually Is

Remotion is React for video. You write components in TypeScript that describe what should appear on each frame, and the system renders those components into MP4 files. A button that fades in? That's an interpolation function. A logo that bounces with spring physics? That's a spring() helper with configurable mass and stiffness.

The key difference from traditional video editing: Remotion doesn't record your screen or rely on timeline manipulation in a GUI. It renders frames individually by taking screenshots of a headless browser, then stitches them together with FFmpeg. When you're at frame 100, the system literally sets the frame counter to 100, lets React update the DOM, waits for everything to load, takes a screenshot, then moves to frame 101.

None

This architecture means video becomes code. You can version control it, automate it, generate it from data, and scale it infinitely. One template can produce thousands of personalized videos. Change a single variable, re-render, and you've got a completely different video with zero manual editing.

The downside is that certain code patterns break videos. If you use Math.random() to position elements, each frame gets rendered by a different process and your "random" positions change between renders. Your confetti animation becomes a glitchy mess. You need to understand the constraints of frame-perfect rendering.

That's where Claude Code's skill system comes in.

Setting Up Claude Code with the Remotion Skill

The Remotion skill teaches Claude the specific rules that make video rendering work. Without it, Claude writes code like a web developer. That code runs perfectly in a browser preview but produces jittery, inconsistent video renders. With the skill loaded, Claude writes like a video engineer who understands determinism.

Here's the complete setup process. It takes about two minutes.

Step 1: Install Node.js If you don't have Node.js installed, get it from nodejs.org. You need version 18 or higher.

Step 2: Create a Remotion project Open your terminal and run:

npx create-video@latest my-first-video --template=blank
cd my-first-video

The blank template gives you a clean starting point. Avoid the "hello-world" or complex templates because they fill the project with example code that can confuse Claude's context.

Step 3: Install the Remotion skill Inside your project directory, run:

npx skills add remotion-dev/skills

This downloads a set of markdown files that Claude can read. These files contain the rules for writing Remotion code correctly. When you mention video-related tasks, Claude automatically loads the relevant rules.

Step 4: Start the preview server Run:

npx remotion studio

A browser window opens showing your video composition. This is your live preview. Leave it open. You'll see changes instantly as Claude builds your video.

That's it. You're ready to make videos.

How to Talk to Claude: Two Approaches

You can prompt Claude in two different ways, depending on whether you want precise control or prefer to describe creative intent. Both work. Mix them based on what you're building.

The Precise Approach: When You Know Exactly What You Want

If you have a clear technical vision, give Claude specific instructions.

Example prompt: "Create a composition called 'TitleCard' at 1920x1080, 30fps, 120 frames total. Add centered text that says 'LAUNCH DAY' in bold Inter font, 80px. Animate opacity from 0 to 1 between frames 0–30. Animate scale from 0.5 to 1.0 over the same range. Use easeOutCubic for both animations. Black background, white text."

Claude generates code with exact timing. At frame 15, you'll see exactly 50% of the animation complete. This precision matters when you're syncing to audio or matching brand guidelines that specify exact durations.

Use this approach when:

  • You need frame-accurate timing for audio sync
  • You're matching specific brand requirements
  • You know the exact structure you want
  • You're debugging or troubleshooting specific issues

The Creative Approach: When You're Describing a Feeling

If you care more about how it feels than the technical implementation, describe it like you're talking to a creative director.

Example prompt: "Make a title that says 'LAUNCH DAY' in bold white text. It should feel substantial, like it has real weight. Make it start small and grow into place with a satisfying bounce, like something heavy but elastic landing. Not a quick bounce, more like a deliberate settle. Make it feel premium and confident. Black background."

Claude interprets "weight" and "substantial" as reasons to use spring physics with higher mass. "Satisfying bounce" tells it to tune the damping for a single clean bounce. "Premium" influences font choice and spacing. "Confident" affects the timing curve to be deliberate rather than rushed.

Use this approach when:

  • You're exploring ideas and want to iterate quickly
  • You care about the emotional quality more than exact specs
  • You're not sure about the technical implementation
  • You want Claude to make creative decisions

Both prompts produce similar results, but the first gives you precise control while the second gives you creative flexibility. You can even mix them: "Make it feel heavy and premium, but the fade should complete in exactly one second."

None

Your First Video: The Simple Test

Start with something basic to verify your setup works. This takes about 30 seconds.

The prompt: "Create a simple test composition. Just make white text that says 'Hello World' fade in smoothly from the start. Black background. Make it feel clean and simple."

Claude will:

  1. Create the composition with sensible defaults (1920x1080, 30fps)
  2. Add the text component
  3. Apply a fade animation
  4. Set up the black background

In the Remotion Studio preview, you'll see the text fading in. Scrub the timeline by dragging the playhead. The fade should be smooth and consistent. If it works, your environment is ready.

If you see errors, paste them back to Claude. The skill makes Claude surprisingly good at debugging its own code. It knows the common pitfalls and can explain what went wrong.

Building Something Real: The Practical Patterns

Once your simple test works, you can tackle real projects. Here are the core patterns you'll use repeatedly.

Layering Elements on a Timeline

Real videos have multiple elements that appear at different times. Remotion uses Sequences to control when things appear.

The prompt: "Create a video with three text elements that appear one after another:

  • First: 'INTRODUCING' fades in at the start
  • Second: 'THE FUTURE' appears after the first one finishes, with a bouncy entrance
  • Third: 'OF DESIGN' slides in from the left after the second one

Make each transition feel natural, not rushed."

Claude creates three Sequence components, each starting after the previous one finishes. The animations run independently inside each sequence. This is how you build complex videos without timing conflicts.

Adding Images and Assets

Images need special handling to prevent blank frames.

The prompt: "I'm going to place a file called logo.png in the public/ folder. Add it to the video centered at the top. Make it fade in smoothly with a subtle scale effect, like it's gently appearing. Use the Remotion Img component so it waits for the image to load before rendering."

That last part is critical. Claude knows to use Remotion's <Img /> instead of standard <img>. This component signals the renderer to wait until the image is fully loaded. Without it, you get blank frames.

After Claude generates the code, actually put an image at public/logo.png in your project folder. Any image works for testing.

Integrating Audio

Audio makes videos feel complete. Remotion handles audio synchronization automatically.

The prompt: "Add background music from public/music.mp3. Also create a simple audio visualization at the bottom of the screen. Make bars that pulse with the beat. They should feel energetic and respond strongly to bass."

Claude will use the <Audio /> component for playback and visualizeAudio() for the visualization. The bars will actually respond to frequency data from your audio file. "Energetic" and "respond strongly to bass" guide Claude's implementation of the visualization style.

Drop an audio file at public/music.mp3 and the sync happens automatically.

Making Data-Driven Videos

This is where Remotion becomes powerful. Instead of manually editing text for each customer, you inject data.

The prompt: "Modify the composition to accept input data with these fields: customerName and purchaseAmount. Display 'Thanks [customerName]!' as the title, and 'Your purchase of $[purchaseAmount] is confirmed' as the subtitle. Make both fade in with a friendly, welcoming feel."

Claude adds a TypeScript interface for the props and modifies the components to use the injected values. Now you can render multiple versions:

npx remotion render src/index.ts ThankYou sarah.mp4 --props='{"customerName":"Sarah","purchaseAmount":"299"}'
npx remotion render src/index.ts ThankYou mike.mp4 --props='{"customerName":"Mike","purchaseAmount":"499"}'

One template, infinite personalized videos. This scales video production in ways traditional editing can't match.

Advanced Techniques Worth Exploring

Once you've built a few working videos, these techniques unlock new creative possibilities.

Spring Physics for Natural Motion

Linear interpolation makes things move, but spring physics makes them move with character.

The prompt: "Replace the title fade-in with spring physics. Make it feel like the text has weight and bounces slightly when it lands. Not too bouncy, just enough to feel alive and energetic."

The resulting animation will overshoot slightly before settling. It feels organic because it mimics real physics. You can refine it: "Make the bounce more subtle" or "Make it snap in faster with less overshoot" and Claude adjusts the spring parameters.

3D Objects and Camera Moves

Remotion can render full 3D scenes using Three.js.

The prompt: "Create a 3D scene with a chrome sphere floating in space. Make it rotate slowly and hypnotically. Add colored lights so the sphere reflects rainbow streaks. The camera should slowly orbit around it. Dark background, make it feel premium and futuristic."

You get WebGL 3D graphics in your video without touching any 3D software. Change "sphere" to "cube" or "torus" and Claude adapts the geometry. This works for product renders, abstract backgrounds, or kinetic sculptures.

Text Effects That Feel Designed

Kinetic typography separates amateur videos from professional ones.

The prompt: "Make text that types itself out character by character, but make it feel human, not robotic. Slight irregularity in timing, occasionally pausing between words. Add a blinking cursor. The text should say 'Ideas emerge from experimentation.' Make it feel contemplative."

You get typewriter animation with human-feeling timing variation. "Contemplative" slows the overall pace and influences font selection. This works for code reveals, poetic text, or dramatic statements.

Dynamic Video Length

Remotion compositions can calculate their own duration based on content.

The prompt: "Create a video that shows a list of items. The video length should automatically adjust based on how many items I give it. Each item should display for a few seconds with smooth transitions between them. Add an intro and outro that stay consistent regardless of item count."

Feed it three items, you get a nine-second video. Feed it ten items, you get a thirty-second video. The template adapts. This is how you build scalable video systems for sports highlights, product showcases, or news digests.

When Things Break: The Debugging Approach

Your first few videos will have issues. Here's the systematic way to fix them.

If the preview looks wrong: Paste the error or describe what's wrong to Claude. The skill makes it great at debugging. It knows that flickering usually means non-deterministic code, blank frames usually mean asset loading issues, and timing problems usually mean sequence errors.

If rendering fails: Add --log=verbose to see detailed output:

npx remotion render src/index.ts MyComp output.mp4 --log=verbose

Show the logs to Claude. It can identify bottlenecks or encoding issues.

If it works in preview but breaks during render: Run with --concurrency=1:

npx remotion render src/index.ts MyComp output.mp4 --concurrency=1

This forces single-threaded rendering. If it fixes the problem, you have code that isn't frame-independent. Claude can help refactor it.

The Iteration Advantage

Traditional video editing is linear. You make a change, export, review, and repeat. Each cycle takes minutes. With Remotion and Claude Code, iteration is instant.

I built a demo video with animated UI mockups. The client wanted the blue accent color changed to green. In After Effects, I'd manually update every element. In Remotion, I told Claude "change the primary color to #00FF00" and it updated a single variable. One command, entire video re-rendered in 30 seconds.

This speed changes how you work. You experiment more because the cost is negligible. Try different timing. Test different physics configs. Explore alternative compositions. The video improves because iteration costs almost nothing.

When Remotion Isn't the Right Choice

Be honest about the limitations.

For traditional footage editing: If you're cutting together clips from a camera, use DaVinci Resolve or Final Cut. Remotion works with pre-made assets, not hours of raw footage. Timeline-based NLEs are better for that workflow.

For hand-drawn animation: If you need Disney-level character animation with squash and stretch, use Adobe Animate or Blender. Remotion excels at motion graphics and programmatic animation, not frame-by-frame character work.

For very short clips: Setting up a Remotion project for a 3-second logo reveal is overkill. Use After Effects or Canva. Remotion's power appears when you're generating variations at scale or building longer content.

Start Making Videos Today

Here's your action plan:

  1. Run the setup commands (2 minutes)
  2. Test with a simple fade-in (30 seconds)
  3. Add an image to practice asset handling (2 minutes)
  4. Integrate audio and try a visualization (5 minutes)
  5. Build something you actually need (30 minutes)

You'll hit errors. That's expected. Paste them into Claude and ask what's wrong. The skill system means it knows the common pitfalls and can explain solutions clearly.

Don't try to build complex templates immediately. Start simple. Master text animations. Then add images. Then try springs. Then experiment with 3D. Build complexity gradually.

The barrier to programmatic video just collapsed. You don't need to be a video editor or a programmer. You need to describe what you want clearly, and Claude handles the translation from creative intent to working code. You're directing videos the same way you'd explain them to another person.

The difference is this person knows how to write Remotion code. And it turns out that's all you needed.