Remotion Video Engine

A programmatic video creation skill for building dynamic videos using React components, enabling data-driven video generation, automated video pipelines, and interactive video editing.

When to Use

Choose Remotion when:

• Generating videos programmatically from data (reports, dashboards, social media)
• Building automated video generation pipelines for content marketing
• Creating personalized videos at scale with dynamic text, images, and animations
• Developing video templates that non-technical users can customize

Consider alternatives when:

• Editing existing video files — use FFmpeg or video editing software
• Creating simple animated GIFs — use a GIF library
• Building real-time video effects — use WebRTC or canvas-based tools

Quick Start

Copy
# Create a new Remotion project
npx create-video@latest my-video
cd my-video && npm start

Copy
import { AbsoluteFill, useCurrentFrame, useVideoConfig, Sequence, spring, interpolate, Img, Audio } from 'remotion';

// Main video composition
export const MyVideo: React.FC<{
  title: string;
  subtitle: string;
  logoUrl: string;
}> = ({ title, subtitle, logoUrl }) => {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  // Spring animation for title
  const titleScale = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 200 }
  });

  const titleOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp'
  });

  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a2e' }}>
      {/* Background gradient */}
      <AbsoluteFill style={{
        background: 'radial-gradient(circle at 50% 50%, #16213e 0%, #0f0f23 100%)'
      }} />

      {/* Logo sequence */}
      <Sequence from={0} durationInFrames={90}>
        <AbsoluteFill style={{
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <Img
            src={logoUrl}
            style={{
              width: 200,
              transform: `scale(${titleScale})`,
              opacity: titleOpacity
            }}
          />
        </AbsoluteFill>
      </Sequence>

      {/* Title sequence */}
      <Sequence from={30} durationInFrames={120}>
        <AbsoluteFill style={{
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column'
        }}>
          <h1 style={{
            color: 'white',
            fontSize: 72,
            fontFamily: 'Inter, sans-serif',
            transform: `translateY(${interpolate(frame - 30, [0, 20], [50, 0], { extrapolateRight: 'clamp' })}px)`,
            opacity: interpolate(frame - 30, [0, 20], [0, 1], { extrapolateRight: 'clamp' })
          }}>
            {title}
          </h1>
          <p style={{
            color: '#a0a0b0',
            fontSize: 28,
            opacity: interpolate(frame - 45, [0, 20], [0, 1], { extrapolateRight: 'clamp' })
          }}>
            {subtitle}
          </p>
        </AbsoluteFill>
      </Sequence>
    </AbsoluteFill>
  );
};

Core Concepts

Remotion Architecture

Concept	Description	Usage
Composition	Root video component definition	Register in Root.tsx
Sequence	Timed segment within a composition	<Sequence from={30}>
useCurrentFrame	Current frame number hook	Animation timing
interpolate	Map frame ranges to value ranges	Smooth transitions
spring	Physics-based spring animation	Natural movement
Series	Sequential non-overlapping segments	Slideshows
AbsoluteFill	Full-frame absolute positioned container	Layout
staticFile	Reference files in public folder	Assets

Data-Driven Video Generation

Copy
// Generate videos from data
interface VideoData {
  productName: string;
  price: number;
  features: string[];
  imageUrl: string;
  rating: number;
}

const ProductVideo: React.FC<{ data: VideoData }> = ({ data }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: '#fff' }}>
      <Sequence durationInFrames={60}>
        <ProductIntro name={data.productName} image={data.imageUrl} />
      </Sequence>

      <Sequence from={60} durationInFrames={90}>
        <FeatureShowcase features={data.features} />
      </Sequence>

      <Sequence from={150} durationInFrames={60}>
        <PriceReveal price={data.price} rating={data.rating} />
      </Sequence>

      <Sequence from={210} durationInFrames={30}>
        <CallToAction productName={data.productName} />
      </Sequence>
    </AbsoluteFill>
  );
};

// Render programmatically
// npx remotion render src/index.ts ProductVideo out/product.mp4 --props='{"data":...}'

Configuration

Option	Description	Default
fps	Frames per second	30
width	Video width in pixels	1920
height	Video height in pixels	1080
durationInFrames	Total video duration in frames	300
codec	Output codec: h264, h265, vp8, vp9	"h264"
imageFormat	Frame format: jpeg, png	"jpeg"
quality	JPEG quality (0-100)	80
concurrency	Parallel rendering threads	CPU count

Best Practices

1. Use interpolate with extrapolateRight: 'clamp' to prevent values from going beyond your intended range — without clamping, animations overshoot and cause visual glitches when frames exceed the interpolation range
2. Pre-load all assets using Remotion's delayRender and continueRender to ensure images, fonts, and data are fully loaded before any frame renders; missing assets cause blank frames in the output
3. Structure videos as composable Sequences that can be reordered and reused across different compositions — this makes video templates modular and easy to customize for different content
4. Use spring animations for natural movement instead of linear interpolation; spring physics produces organic-feeling motion that viewers perceive as more professional and polished
5. Render with --concurrency matching your CPU cores for optimal rendering speed, but reduce concurrency when compositions use heavy image processing or external API calls to avoid memory pressure

Common Issues

Fonts not loading in rendered output: Custom fonts loaded via CSS @font-face may not be available during server-side rendering. Use Remotion's loadFont utility or @remotion/google-fonts package to ensure fonts are loaded before rendering begins, and verify fonts are embedded in the final video.

Black frames at sequence boundaries: When Sequences have gaps between their from + durationInFrames and the next Sequence's from, the composition shows the background. Use <Series> for sequential clips without gaps, or ensure your background AbsoluteFill covers all frames.

Slow rendering for long videos: Remotion renders each frame as a separate image, which takes time for long videos. Use --concurrency to parallelize, reduce resolution for previews, split long videos into shorter segments that can be concatenated with FFmpeg, and optimize component rendering to avoid expensive recalculations per frame.