How I Built a Full Product Video with Claude Code + Remotion - Builder Créatif

The problem: a product video, zero After Effects budget

You’re launching your app. You need a product video for marketing.

The classic options:

Video freelancer: $1,000–3,000, 2 weeks lead time
After Effects yourself: 3 days minimum if you know what you’re doing
Canva/templates: looks cheap, not worthy of your product

My choice? Code the video with React.

Result: a 1min40 pro video, 18 animated scenes, in 2 languages. In a single session with Claude Code.

The stack: React that outputs MP4

Tool	Role
Remotion	React framework → video (code = MP4)
Claude Code (CLI)	Wrote 100% of the code
React + TypeScript	Components = scenes
@remotion/transitions	Animated transitions (fade, slide, wipe)
@remotion/media	Synchronized video embeds
Remotion Studio	Live preview + H.264 render

Remotion’s concept: each scene is a React component. You code your animation, preview in real-time, render to MP4.

It’s code. So it’s versioned, reusable, modifiable in seconds.

How I worked with Claude Code

The entire video was built iteratively through conversation.

The workflow:

Describe the scene I want in natural language
Claude generates the full Remotion component with animations
Preview in Remotion Studio
Send a screenshot + feedback (“too small”, “wrong color”, “merge these two scenes”)
Claude adjusts

What worked really well:

Describing layout/design intent and getting working code instantly
Iterating on styling by sending screenshots
Bulk operations: translate all 18 scenes to French, remove all periods, replace all colors — in seconds
Consistent design system applied automatically across all scenes
Managing the orchestration (durations, transitions, total frames)

This is exactly what AI-assisted development looks like. AI is my accelerator, not my replacement. I direct the vision, Claude writes the code.

The architecture: 18 scenes, 17 transitions, 30 FPS

src/
├── Composition.tsx          # EN orchestrator
├── CompositionFR.tsx        # FR orchestrator
├── constants.ts             # Colors, durations, FPS
├── components/
│   ├── PhoneMockup.tsx      # Reusable phone frame
│   └── SceneBg.tsx          # Background variants
├── scenes/                  # English scenes
│   ├── Scene01Hook.tsx
│   ├── Scene02Journey.tsx
│   └── ... (18 scenes)
└── scenes-fr/               # French scenes (same structure)

The video is a TransitionSeries — a sequence of React components connected by animated transitions.

Centralized configuration in a single file:

export const SCENE_DURATIONS = {
  scene01: 120,  // 4s
  scene02: 210,  // 7s
  // ...
};

export const TOTAL_FRAMES = 3120; // ~1min40 at 30fps

Change a scene’s timing? One line. Add a scene? One component. Change all colors? One grep + replace.

Design decisions

Visual identity:

Cream/gold/black palette from the Muse Otter landing page
Consistent card design: white bg, colored left border, shadow, icon square
Cairo font throughout

Scene types:

Text-only (Hook, Gap, Reveal) — spring animations + interpolate
Phone mockup — embedded MP4 videos of the actual app
Data (Architecture layers, Pricing cards, Message Flow)
Comparison (Generic AI Chat vs Muse Otter — side by side)
Hub-and-spoke (Foundation — circular layout with SVG lines)

Transitions:

fade() for calm transitions
slide({ direction }) for dynamic movement
wipe({ direction }) for reveals

The French version: 18 files translated in one pass

I created a separate composition (MuseOtterFR) by duplicating all scene files into scenes-fr/. Both versions share the same components, constants, and assets — only the text differs.

Claude handled the full translation across all 18 files in a single pass.

Manually? That would take hours. With Claude Code: seconds.

The app recordings evolution

The video includes 8 screen recordings of the actual app (onboarding, coach selection, chat, marketplace, voice mode…).

The technical evolution:

GIFs → poor quality (256 colors, low framerate)
<Gif> from @remotion/gif → rendering issues (canvas element didn’t play well inside components)
MP4 + <Video> from @remotion/media → perfect sync, full quality, loop support

The <Video> component syncs each frame with Remotion’s timeline. The render is deterministic and frame-perfect.

The gotchas (and how I solved them)

GIF rendering

Native GIFs don’t sync with Remotion’s frame-by-frame rendering. Solution: convert everything to MP4.

Font sizing at 1920x1080

Text that looks fine in a browser is tiny at video resolution. Had to scale up fonts, icons, and spacing several times based on preview screenshots.

Color leaks

Old branding colors from a previous project (purple) leaked into the design. Solution: systematic grep + replace across all files.

Transition math

Each scene needs padding frames for transition overlap. Easy to miscalculate TOTAL_FRAMES when adding/removing scenes.

Package versions

AnimatedImage (newer Remotion API) wasn’t available in my version. Had to fall back from @remotion/gif to @remotion/media.

What Claude Code can’t do

Visual judgment — It can’t see the preview. I send screenshots and describe what’s wrong
Asset creation — Screen recordings, logo, and background images are made separately
Subjective copywriting — I provide the direction and audience context. Claude adapts the tone, but I steer the message

What surprised me

Speed — 18 scenes, 2 languages, multiple design iterations. In a single session
Consistency — Once I established a design pattern, Claude applied it across all new scenes without being reminded
Bulk operations — Translating 18 files, removing trailing periods, replacing color references — tedious tasks done in seconds
The Remotion skill — Claude Code loaded a Remotion-specific skill with best practices for animations, transitions, and media handling

The final output

2 videos: English + French
18 scenes each with spring animations and interpolated transitions
8 embedded app recordings (MP4)
~1min40 at 30fps (3,120 frames)
Rendered via Remotion Studio → H.264 MP4

What	Tool
All code	Claude Code (Opus)
Video framework	Remotion 4.0.420
Screen recordings	Manual (iPhone/web app capture)
GIF → MP4 conversion	Manual
Background images	Pre-made assets
Logo	Existing brand asset
Music	Royalty-free track
Preview	Remotion Studio (localhost)
Render	Remotion CLI (H.264)

Why this is pure Builder Créatif

This approach sums up exactly how I work:

Velocity. One session for a complete video in 2 languages. Not 2 weeks and $2,000 in freelance costs.

Code = reusable asset. Each scene is a component. Change the copy, swap an asset, create a new language version: a few lines. No “redo the entire video from scratch.”

AI + expertise = results. Claude writes the code. I direct the design, the visual identity, the message. 7 years of experience + AI mastery = maximum velocity.

The only requirement: you need to be comfortable giving design feedback through conversation and screenshots. Claude Code writes the code, but you direct the vision.

Want to see the video? It’s on the Muse Otter page. 1min40 that shows everything the app does — without a single cent spent on traditional video production.