I haven't opened a video editor in months. Every video I make now starts with a conversation in my terminal — I describe what I want, Claude Code writes the Remotion components, I preview it, tweak it through more conversation, and render. The whole loop takes minutes, not hours.
This post walks through exactly how I set this up, the workflow I follow, and why I think this combo is the most underrated content creation stack out there right now.
Why Remotion?
If you haven't heard of Remotion, here's the elevator pitch: it lets you create videos using React. Instead of dragging clips on a timeline, you write JSX components that render frames. Every frame is just a React render at a specific point in time.
Why this matters:
- Videos become code — version controlled, parameterized, composable
- React ecosystem — use any npm package, fetch data, use state
- Programmatic rendering — generate 100 variants from a template with different data
- Server-side rendering — render videos headlessly on a server or CI/CD pipeline
If you've ever wanted to generate videos the way you generate PDFs — from data and templates — Remotion is it.
Why Claude Code?
Claude Code is Anthropic's CLI-based agentic coding tool. You run it in your terminal, it reads your codebase, and you talk to it in natural language. It writes code, runs commands, edits files, debugs errors — all within your existing project.
The key insight is: Remotion videos are just React code, and Claude Code is really good at writing React code. The combination is almost unfair. You say "create a 30-second intro with animated text and a gradient background" and Claude Code generates a complete Remotion composition that actually works.
Setting Up the Project
Let's start from scratch. First, create a new Remotion project:
npx create-video@latest my-video-project
cd my-video-project
This scaffolds a standard Remotion project. The structure looks like this:
my-video-project/
├── src/
│ ├── Composition.tsx # Main entry point
│ ├── Root.tsx # Registers compositions
│ └── HelloWorld/ # Example composition
│ ├── index.tsx
│ └── ...
├── remotion.config.ts # Remotion config
├── package.json
└── tsconfig.json
Install any extra packages you like. I usually add a few things upfront:
npm install @remotion/transitions @remotion/noise @remotion/paths
Now open Claude Code in the project:
claude
That's it. Claude Code will index your project and you're ready to start building videos through conversation.
The Workflow: Conversation-Driven Video Creation
Here's my typical workflow. I'll walk through a real example — creating a "Top 5 AI Tools" explainer video.
Step 1: Describe the Video
I start with a high-level description in Claude Code:
> Create a 60-second video composition called "TopAITools" with these scenes:
> 1. Intro slide with animated title "Top 5 AI Tools in 2026" with a dark gradient background
> 2. For each tool, a card that slides in from the right with the tool name, a one-liner, and an icon
> 3. Outro with "Follow for more" text and a subscribe animation
> Use smooth spring animations and a modern dark theme throughout.
Claude Code creates the composition file, registers it in Root.tsx, and sets up the scene structure. It writes all the animation logic using Remotion's useCurrentFrame(), interpolate(), and spring() APIs.
Step 2: Preview and Iterate
Start the Remotion preview server:
npx remotion studio
This opens a browser-based player where you can scrub through your video frame by frame. See something you don't like? Go back to Claude Code:
> The title animation is too fast — make it ease in over 45 frames instead of 20.
> Also change the card background to a glassmorphism style with backdrop blur.
Claude Code reads the current file, understands the animation structure, and makes precise edits. The preview hot-reloads. This back-and-forth feels like pair-programming on a video.
Step 3: Add Data-Driven Content
This is where it gets powerful. Instead of hardcoding the tool names, I pass them as props:
> Refactor the composition to accept an array of tools as input props.
> Each tool should have: name, description, color, and icon.
> Use Remotion's inputProps schema validation with Zod.
Claude Code refactors the entire composition to be data-driven:
import { z } from "zod";
export const toolSchema = z.object({
tools: z.array(
z.object({
name: z.string(),
description: z.string(),
color: z.string(),
icon: z.string(),
})
),
});
export type ToolProps = z.infer<typeof toolSchema>;
Now the same composition can generate different videos just by swapping the input data. Create 10 variants for 10 different topics? Just change the JSON.
Step 4: Render
When you're happy with the preview, render the final video:
npx remotion render src/index.ts TopAITools out/top-ai-tools.mp4
Or ask Claude Code to set up a render script:
> Create an npm script that renders the TopAITools composition at 1080p 60fps
> with the tools data loaded from a JSON file.
It generates something like:
// render.mjs
import { bundle, renderMedia, selectComposition } from "@remotion/renderer";
import { readFileSync } from "fs";
const toolsData = JSON.parse(readFileSync("./data/tools.json", "utf-8"));
const run = async () => {
const bundled = await bundle("./src/index.ts");
const composition = await selectComposition({
serveUrl: bundled,
id: "TopAITools",
inputProps: toolsData,
});
await renderMedia({
composition,
serveUrl: bundled,
codec: "h264",
outputLocation: "./out/top-ai-tools.mp4",
inputProps: toolsData,
});
console.log("✅ Video rendered successfully!");
};
run();
Real Patterns I Use Daily
After a few weeks of this workflow, I've settled on some patterns that make everything smoother.
Template Compositions
I've built a library of reusable composition templates. Claude Code helped me create them and now I reuse them across videos:
- TextReveal — animated text with character-by-character reveal
- SlideTransition — smooth scene transitions with configurable direction
- DataCard — animated info cards that slide and fade in
- CodeBlock — syntax-highlighted code that types itself out
- ProgressBar — animated progress/ranking visualizations
When I start a new video, I tell Claude Code which templates to compose together:
> Create a new 45-second composition using TextReveal for the intro,
> 3 DataCards for the main content, and SlideTransition between each scene.
> Use the dark theme preset.
Dynamic Data from APIs
Since Remotion compositions are React, you can fetch data at render time. I've used this to:
- Pull trending topics from an API and generate "trending this week" videos
- Fetch GitHub stats and create project showcase reels
- Load analytics data and create automated weekly report videos
Claude Code makes hooking up these data sources trivial — just describe what API to call and how to map the data to the composition props.
Batch Rendering
For content pipelines, batch rendering is the killer feature. I have a script (again, Claude Code wrote it) that reads a folder of JSON data files and renders a video for each one:
node render-batch.mjs --input ./data/episodes/ --output ./out/videos/
Each JSON file defines the content for one video. The script renders them all in sequence. On my M3 Mac, a 60-second 1080p video renders in about 40-90 seconds depending on complexity.
Tips and Gotchas
A few things I've learned the hard way:
1. Keep compositions simple and composable. Don't put everything in one massive component. Break scenes into separate components and compose them. Claude Code is better at editing smaller, focused files.
2. Use spring() for everything. Remotion's spring animation looks better than linear interpolation 99% of the time. Claude Code defaults to this when you say "smooth" or "animated."
3. Watch your frame math. Remotion works in frames, not seconds. At 30fps, 1 second = 30 frames. I always tell Claude Code the fps upfront so the math is right.
4. Preview before rendering. The Remotion Studio is your best friend. Don't waste time rendering full videos only to find a typo. Use npx remotion studio and scrub through the timeline.
5. Version control everything. Since videos are code, you get full git history. I can go back to any version of any video I've ever made. Try doing that with Premiere Pro.
6. Use Remotion's <Sequence> component. It's the building block for timing. Each scene is a <Sequence> with a from frame and durationInFrames. Claude Code handles this naturally when you describe scenes.
What's Next
This workflow — Claude Code as the creative interface, Remotion as the rendering engine — has completely changed how I think about video content. It's not just faster. It's a different paradigm. Videos become a build artifact, not a creative project.
In my next post, I'll take this further: fully automated video pipelines using OpenClaw employees and Telegram. Imagine not even needing to type a prompt — autonomous agents monitor trends, generate scripts, create Remotion compositions, render videos, and send you the result on Telegram for approval. That's the setup I'm running now, and it's wild.
But for now, start here. Get Claude Code, set up a Remotion project, and try describing your first video. I promise you'll never look at video editing the same way.
The Video
Here's a video I made entirely using Claude Code + Remotion — zero video editors involved. I'll embed it here once it's uploaded — stay tuned.
If you found this useful, share it with someone who's still dragging clips on a timeline. They deserve better.