Remotion and Claude Code: Programming Videos with React

Creating social media content is time-consuming. A short product demo video, a weekly recap animation, or a client-facing demo can take hours to produce, even when the content is simple.

What if you could write your videos as code, with AI helping you along the way? That's exactly what the combination of Remotion and Claude Code is for.

What is Remotion?#

Remotion is an open-source library that lets you create videos from React components. Instead of working in video editing software, you define what appears and when in code.

Why is this great?

• Data-driven videos: Content comes from JSON, a database, or an API
• Consistent branding: Write the style once, every video stays uniform
• Automatable: Same template, different data, different video
• Version-controlled: The video source code lives in git

For SMBs, this means you can produce content on a weekly basis without starting from scratch every time.

What can it be used for in practice?#

A few examples where Remotion delivers real time savings:

• Social media posts: Automated animated Instagram/LinkedIn graphics
• Product demo videos: Programmed demos instead of screen recordings
• Weekly report videos: Automatically generated summaries from data
• Customer greetings: Personalized videos with name and company
• Training materials: Tutorial videos with a consistent style

Setting up the development environment#

Create a new Remotion project:

npx create-video@latest my-video-project
cd my-video-project
npm start

This launches a dev server where you can see your video in real time:

Bringing Claude Code into the workflow#

Here's where it gets interesting. Instead of writing the React components yourself, you work with Claude Code:

claude "create a Remotion composition for a product demo
  video. The video is 5 seconds long, 1080x1920
  (Instagram Reel format). Include:
  1. Fade-in with company logo (1 sec)
  2. Product name and price centered (2 sec)
  3. Three bullet points with benefits (1.5 sec)
  4. CTA text: Details on our website (0.5 sec)
  Use a white background and black text."

Claude Code creates the necessary files. A typical result:

import { AbsoluteFill, useCurrentFrame, interpolate,
  spring, useVideoConfig, Img } from "remotion";

export const ProductReel: React.FC<{
  productName: string;
  price: string;
  benefits: string[];
  ctaText: string;
}> = ({ productName, price, benefits, ctaText }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade-in (0-30 frames)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  // Product info spring animation
  const productScale = spring({
    frame: frame - 30,
    fps,
    config: { damping: 12 },
  });

  // Benefits stagger
  const benefitEntries = benefits.map((_, i) =>
    spring({ frame: frame - 75 - i * 10, fps })
  );

  // CTA fade
  const ctaOpacity = interpolate(frame, [120, 135], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "#fff",
      padding: 60, justifyContent: "center",
      alignItems: "center" }}>

      {/* Logo */}
      <div style={{ opacity: logoOpacity }}>
        <Img src="/logo.png" width={200} />
      </div>

      {/* Product info */}
      <div style={{ transform: `scale(${productScale})`,
        textAlign: "center", marginTop: 40 }}>
        <h1 style={{ fontSize: 64 }}>{productName}</h1>
        <p style={{ fontSize: 48, color: "#666" }}>{price}</p>
      </div>

      {/* Benefits */}
      {benefits.map((benefit, i) => (
        <div key={i} style={{
          transform: `translateX(${
            interpolate(benefitEntries[i], [0, 1],
              [-100, 0])
          }px)`,
          opacity: benefitEntries[i],
        }}>
          {benefit}
        </div>
      ))}

      {/* CTA */}
      <div style={{ opacity: ctaOpacity }}>
        {ctaText}
      </div>
    </AbsoluteFill>
  );
};

Data-driven video generation#

The real power of Remotion lies in the data-driven approach. Create a JSON file with product data, and use Claude Code to automate the entire process:

claude "read the products.json file and create a separate
  Remotion composition for each product using the
  ProductReel template. Register each one in Root.tsx."

This means if you have 20 products, you get 20 videos with a single command. The style is consistent, the content is personalized.

Rendering and export#

When the video is ready, render it with the Remotion CLI:

# Render a single video
npx remotion render src/index.ts ProductReel out/reel.mp4

# Render all compositions
npx remotion render src/index.ts --all

Full workflow with Claude Code#

A typical workflow looks like this:

Real savings#

An SMB producing 3-4 social media videos per week typically spends 4-6 hours on content creation. The Remotion plus Claude Code combination drastically reduces this:

After the initial investment in the first template, subsequent videos are almost entirely automated.

Next steps#

If programmatic video creation interests you, start with the basics: install Remotion, create a simple template, and see how it fits into your workflow.

If you'd like help designing an automated content creation system for your business, get in touch.