Remotion Video Toolkit

Overview

Create videos programmatically using React and Remotion. Build reusable video templates as React components, render them to MP4/WebM via CLI or cloud infrastructure, and generate personalized videos at scale. Ideal for automated social media content, animated data visualizations, and dynamic video production pipelines.

Instructions

When a user asks to create programmatic video, determine the task:

Task A: Set up a Remotion project

# Create a new Remotion project
npx create-video@latest my-video
cd my-video
npm start  # Opens the Remotion Studio at http://localhost:3000

Project structure:

my-video/
  src/
    Root.tsx          # Register all compositions
    MyComposition.tsx # Your video component
  remotion.config.ts  # Render settings

Task B: Create a video composition

Every Remotion video is a React component that uses useCurrentFrame() and useVideoConfig():

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

interface MyVideoProps {
  title: string;
  subtitle: string;
  bgColor: string;
}

export const MyVideo: React.FC<MyVideoProps> = ({ title, subtitle, bgColor }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Animate title sliding in
  const titleY = spring({ frame, fps, from: -100, to: 0, durationInFrames: 30 });

  // Fade in subtitle after 20 frames
  const subtitleOpacity = interpolate(frame, [20, 40], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: bgColor, justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ fontSize: 80, color: "white", transform: `translateY(${titleY}px)` }}>
        {title}
      </h1>
      <p style={{ fontSize: 36, color: "rgba(255,255,255,0.8)", opacity: subtitleOpacity }}>
        {subtitle}
      </p>
    </AbsoluteFill>
  );
};

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{ title: "Hello World", subtitle: "Made with Remotion", bgColor: "#1a1a2e" }}
    />
  );
};

Task C: Add TikTok-style animated captions

import { AbsoluteFill, useCurrentFrame, Sequence } from "remotion";

interface CaptionWord {
  text: string;
  startFrame: number;
  durationInFrames: number;
}

const captions: CaptionWord[] = [
  { text: "This", startFrame: 0, durationInFrames: 15 },
  { text: "is", startFrame: 15, durationInFrames: 10 },
  { text: "amazing!", startFrame: 25, durationInFrames: 20 },
];

export const CaptionOverlay: React.FC = () => {
  const frame = useCurrentFrame();

  const activeWord = captions.find(
    (c) => frame >= c.startFrame && frame < c.startFrame + c.durationInFrames
  );

  return (
    <AbsoluteFill style={{ justifyContent: "flex-end", alignItems: "center", paddingBottom: 120 }}>
      {activeWord && (
        <div style={{
          fontSize: 64,
          fontWeight: "bold",
          color: "white",
          textShadow: "2px 2px 8px rgba(0,0,0,0.8)",
          backgroundColor: "rgba(0,0,0,0.5)",
          padding: "8px 24px",
          borderRadius: 12,
        }}>
          {activeWord.text}
        </div>
      )}
    </AbsoluteFill>
  );
};

Task D: Render videos

# Render locally via CLI
npx remotion render MyVideo out/video.mp4

# Render with custom props
npx remotion render MyVideo out/video.mp4 --props='{"title":"Custom Title"}'

# Render a still frame (for thumbnails)
npx remotion still MyVideo out/thumbnail.png --frame=45

# Render with specific codec and quality
npx remotion render MyVideo out/video.mp4 --codec=h264 --crf=18

For batch rendering at scale:

# Render on AWS Lambda
npx remotion lambda render MyVideo --props='{"title":"Video 1"}'

# Render on Google Cloud Run
npx remotion cloudrun render MyVideo --props='{"title":"Video 1"}'

Task E: Animated data visualizations

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

interface DataPoint { label: string; value: number; color: string; }

export const BarChart: React.FC<{ data: DataPoint[] }> = ({ data }) => {
  const frame = useCurrentFrame();
  const maxVal = Math.max(...data.map((d) => d.value));

  return (
    <AbsoluteFill style={{ padding: 80, justifyContent: "flex-end", backgroundColor: "#0f0f23" }}>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 20, height: "70%" }}>
        {data.map((point, i) => {
          const height = interpolate(frame, [i * 10, i * 10 + 30], [0, (point.value / maxVal) * 100], {
            extrapolateLeft: "clamp",
            extrapolateRight: "clamp",
          });
          return (
            <div key={i} style={{ flex: 1, textAlign: "center" }}>
              <div style={{
                height: `${height}%`,
                backgroundColor: point.color,
                borderRadius: "8px 8px 0 0",
                transition: "height 0.3s",
              }} />
              <p style={{ color: "white", marginTop: 12, fontSize: 24 }}>{point.label}</p>
            </div>
          );
        })}
      </div>
    </AbsoluteFill>
  );
};

Examples

Example 1: Personalized welcome video

User request: "Generate a welcome video for each new user with their name"

# Generate videos from a JSON list of users
for user in $(jq -r '.[] | @base64' users.json); do
  name=$(echo "$user" | base64 -d | jq -r '.name')
  npx remotion render WelcomeVideo "out/welcome_${name}.mp4" \
    --props="{\"userName\":\"${name}\"}"
done

Example 2: Animated sales dashboard

User request: "Create a video showing our quarterly metrics animating in"

Build a composition using the BarChart component with quarterly data, render with:

npx remotion render SalesDashboard out/q4_report.mp4 \
  --props='{"quarter":"Q4","revenue":1250000,"growth":12.5}'

Example 3: Social media content with captions

User request: "Add animated captions to a video for TikTok"

Combine the CaptionOverlay with an OffthreadVideo source:

import { OffthreadVideo } from "remotion";
<AbsoluteFill>
  <OffthreadVideo src="https://example.com/clip.mp4" />
  <CaptionOverlay />
</AbsoluteFill>

Guidelines

Use useCurrentFrame() and interpolate() for all animations; avoid CSS transitions.
Keep compositions pure: pass all dynamic data as props for easy batch rendering.
Use <Sequence> to organize sections of your video timeline.
Prefer <OffthreadVideo> over <Video> for better performance with video sources.
Set crf (Constant Rate Factor) between 16-20 for good quality-to-size ratio.
For Lambda rendering, keep compositions under 120 seconds to avoid timeout issues.
Test in Remotion Studio before rendering to catch layout issues early.
Use staticFile() to reference assets in the public/ folder.

remotion-video-toolkit