name: remotion
description: Create programmatic videos using React with Remotion. Use for video compositions, animations, rendering to MP4/WebM/GIF, spring/interpolate animations, or Lambda deployment.

Remotion

Videos are functions of frames. First frame is 0, last is durationInFrames - 1.

Related skills:
- @launchpad-remotion - Reusable components for trycua/launchpad projects
- @ffmpeg - Video processing, format conversion, speed adjustment
- @elevenlabs - AI voiceovers and sound effects

Global knowledge base: ~/docs/solutions/video-production/remotion/
- prompts.md - 10 ready-to-use animation prompts
- techniques.md - Advanced animation techniques
- libraries.md - Component libraries & packages
- github-examples.md - Top GitHub repos

Quick Start

npx create-video@latest      # Create project
npx remotion studio          # Preview
npx remotion render src/index.ts CompositionId out.mp4

Core API

import { useCurrentFrame, useVideoConfig, interpolate, spring, Easing } from 'remotion';

const frame = useCurrentFrame();
const { fps, durationInFrames, width, height } = useVideoConfig();

// Interpolate (always clamp!)
const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });

// Spring animation
const scale = spring({ frame, fps, config: { damping: 10, stiffness: 100 } });

// Easing
const value = interpolate(frame, [0, 30], [0, 100], { easing: Easing.bezier(0.25, 0.1, 0.25, 1) });

// Color interpolation
const color = interpolateColors(frame, [0, 30], ['#ff0000', '#0000ff']);

Sequencing

import { Sequence, Series, Loop, Freeze } from 'remotion';

// Time-shift (useCurrentFrame becomes relative)
<Sequence from={30} durationInFrames={60}><Scene /></Sequence>

// Play consecutively
<Series>
  <Series.Sequence durationInFrames={30}><Intro /></Series.Sequence>
  <Series.Sequence durationInFrames={60}><Main /></Series.Sequence>
</Series>

// Repeat
<Loop durationInFrames={30} times={3}><Animation /></Loop>

// Pause at frame
<Freeze frame={10}><Component /></Freeze>

Media

import { AbsoluteFill, Img, Video, OffthreadVideo, Audio, staticFile } from 'remotion';

<AbsoluteFill>
  <Img src={staticFile('image.png')} />
  <Video src={staticFile('clip.mp4')} volume={0.5} startFrom={30} />
  <OffthreadVideo src={staticFile('large.mp4')} />  {/* Better perf */}
  <Audio src={staticFile('music.mp3')} volume={0.8} />
</AbsoluteFill>

Props: volume, playbackRate (constant only!), muted, loop, startFrom, endAt

Transitions

import { TransitionSeries, linearTiming, springTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';
import { slide } from '@remotion/transitions/slide';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}><SceneA /></TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: 15 })} />
  <TransitionSeries.Sequence durationInFrames={60}><SceneB /></TransitionSeries.Sequence>
</TransitionSeries>

Official: fade(), slide({ direction }), wipe(), flip(), clockWipe()
Directions: from-left, from-right, from-top, from-bottom

Custom (digitalsamba toolkit lib/transitions/):

Timing: Quick=15-20f, Standard=30-45f, Dramatic=50-60f

Composition

// src/Root.tsx
<Composition
  id="MyVideo"
  component={MyComponent}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{ title: 'Hello' }}
/>

Async Data

const [handle] = useState(() => delayRender());

useEffect(() => {
  fetchData().then(data => {
    setData(data);
    continueRender(handle);
  });
}, [handle]);

CLI Rendering

npx remotion render src/index.ts MyComp out.mp4 \
  --codec=h264 --quality=80 --scale=2 --frames=0-59 \
  --props='{"title":"Hello"}'

Critical Rules

1. Frame-based only - CSS transitions/animations are FORBIDDEN
2. Always clamp - extrapolateRight: 'clamp' prevents runaway values
3. Use fps - 2 * fps for 2 seconds, not magic numbers
4. OffthreadVideo - Use for heavy videos
5. delayRender - Block until async data ready
6. staticFile - Reference public/ folder assets

Deep Dive Rules

Read rules/*.md for detailed patterns:

Lambda (Serverless)

npx remotion lambda policies user
npx remotion lambda functions deploy
npx remotion lambda sites create src/index.ts --site-name=mysite
npx remotion lambda render <serve-url> MyComp out.mp4

See reference.md for full @remotion/renderer and @remotion/lambda APIs.

Player (Embed)

import { Player } from '@remotion/player';

<Player
  component={MyComp}
  durationInFrames={150}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls loop autoPlay
/>