remotion

Prompt file imported from mquhuy/remotion-skill (.windsurf/workflows/remotion.md). Copyright stays with the author.

Remotion Video Generation

Remotion is a framework for creating videos programmatically using React. It leverages web technologies (HTML, CSS, JavaScript/TypeScript) to create dynamic, data-driven videos with full programmatic control.

When to Use

Use this workflow when:

• User requests video generation (create video, generate video, render video)
• User wants to build animated content programmatically
• User asks about Remotion, video components, or mp4 rendering

CRITICAL: Forbidden Patterns

These will break renders (flickering, desynced, or failed):

Golden Rule: ALL animations MUST be driven by useCurrentFrame().

For detailed technical patterns, see Remotion's official rules.

Core Concepts

Frame-Based Animation

• Videos are composed of frames rendered at a specific FPS
• Use useCurrentFrame() to get the current frame number
• Use useVideoConfig() to get video configuration

Compositions

• A <Composition> defines a video with specific dimensions, duration, and FPS
• Compositions are registered in Root.tsx

Sequences & Series

• <Sequence> delays the appearance of components
• <Series> plays sequences one after another

Essential Imports

import {
  useCurrentFrame,
  useVideoConfig,
  AbsoluteFill,
  Sequence,
  Series,
  interpolate,
  spring,
  Easing,
  interpolateColors,
  Video,
  Audio,
  Img,
  OffthreadVideo,
  staticFile,
  random,
  Composition,
} from 'remotion';

Animation Patterns

Basic Interpolation

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

Spring Animation

const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({
  frame,
  fps,
  config: { damping: 200, stiffness: 100, mass: 0.5 },
});

Color Interpolation

const backgroundColor = interpolateColors(
  frame,
  [0, 75, 150],
  ['#ff0000', '#00ff00', '#0000ff']
);

Component Patterns

Basic Video Component

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

export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ backgroundColor: 'white' }}>
      <h1 style={{ opacity, textAlign: 'center', marginTop: 200 }}>
        Hello Remotion!
      </h1>
    </AbsoluteFill>
  );
};

Using Sequences

<AbsoluteFill>
  <Sequence durationInFrames={60}>
    <Intro />
  </Sequence>
  <Sequence from={50} durationInFrames={90}>
    <MainContent />
  </Sequence>
  <Sequence from={120}>
    <Outro />
  </Sequence>
</AbsoluteFill>

CLI Commands

# Start Remotion Studio
npx remotion studio

# Render video
npx remotion render src/index.ts CompositionId out/video.mp4

# With custom props
npx remotion render src/index.ts CompositionId out/video.mp4 \
  --props='{"titleText":"Custom Title"}'

# Render still image
npx remotion still src/index.ts CompositionId out/thumbnail.png --frame=30

Quick Reference

AI Workflow

MANDATORY: When generating Remotion video components:

1. Generate Video Component - Create the video component
2. Register Composition - Ensure it's in src/Root.tsx
3. Verify Render - Run npx tsx scripts/render.ts [CompositionId] out/video.mp4
4. Fix Errors - Fix any errors and re-render until successful
5. Report Success - Only notify user after render passes