Animation Patterns

Advanced animation techniques for Remotion compositions.

Staggered cascade animation

Animate a list of items appearing one after another with a delay between each:

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

interface CascadeItemProps {
  label: string;
}

const CascadeItem: React.FC<CascadeItemProps> = ({ label }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 100 },
  });

  const opacity = interpolate(progress, [0, 1], [0, 1]);
  const translateX = interpolate(progress, [0, 1], [-40, 0]);

  return (
    <div
      style={{
        opacity,
        transform: `translateX(${translateX}px)`,
        fontSize: 36,
        color: 'white',
        padding: '8px 0',
      }}
    >
      {label}
    </div>
  );
};

export const StaggeredList: React.FC<{ items: string[] }> = ({ items }) => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        padding: 100,
        backgroundColor: '#1a1a2e',
      }}
    >
      {items.map((item, i) => (
        <Sequence key={i} from={i * 10}>
          <CascadeItem label={item} />
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

The key pattern: map over items with <Sequence from={i * delay}> where delay controls stagger timing. Inside each Sequence, useCurrentFrame() resets to 0.

Parallax scroll effect

Create depth by moving layers at different speeds:

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

interface ParallaxLayerProps {
  speed: number;
  children: React.ReactNode;
}

const ParallaxLayer: React.FC<ParallaxLayerProps> = ({ speed, children }) => {
  const frame = useCurrentFrame();
  const translateY = interpolate(frame, [0, 150], [0, -200 * speed], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ transform: `translateY(${translateY}px)` }}>
      {children}
    </AbsoluteFill>
  );
};

export const ParallaxScene: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0d1117' }}>
      <ParallaxLayer speed={0.3}>
        <div style={{ position: 'absolute', top: 400, left: 100 }}>
          <div style={{ width: 200, height: 200, backgroundColor: '#1f2937', borderRadius: 16 }} />
        </div>
      </ParallaxLayer>
      <ParallaxLayer speed={0.7}>
        <div style={{ position: 'absolute', top: 300, left: 400 }}>
          <div style={{ width: 150, height: 150, backgroundColor: '#374151', borderRadius: 12 }} />
        </div>
      </ParallaxLayer>
      <ParallaxLayer speed={1.0}>
        <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
          <h1 style={{ color: 'white', fontSize: 72 }}>Parallax</h1>
        </AbsoluteFill>
      </ParallaxLayer>
    </AbsoluteFill>
  );
};

Higher speed values move faster, creating foreground elements. Lower values create the illusion of distant background elements.

Morph transition between scenes

Cross-fade between two scenes with a shared transform:

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

interface MorphTransitionProps {
  sceneA: React.ReactNode;
  sceneB: React.ReactNode;
  transitionStart: number;
  transitionDuration: number;
}

export const MorphTransition: React.FC<MorphTransitionProps> = ({
  sceneA,
  sceneB,
  transitionStart,
  transitionDuration,
}) => {
  const frame = useCurrentFrame();
  const transitionEnd = transitionStart + transitionDuration;

  const progress = interpolate(frame, [transitionStart, transitionEnd], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const scaleA = interpolate(progress, [0, 1], [1, 1.2]);
  const scaleB = interpolate(progress, [0, 1], [0.8, 1]);

  return (
    <AbsoluteFill>
      <AbsoluteFill style={{ opacity: 1 - progress, transform: `scale(${scaleA})` }}>
        {sceneA}
      </AbsoluteFill>
      <AbsoluteFill style={{ opacity: progress, transform: `scale(${scaleB})` }}>
        {sceneB}
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

Custom easing curves

Create custom easing by composing interpolate with an easing function:

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

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

  // Ease in-out cubic
  const easeInOut = interpolate(frame, [0, 60], [0, 1], {
    extrapolateRight: 'clamp',
    easing: Easing.inOut(Easing.cubic),
  });

  // Bounce
  const bounce = interpolate(frame, [0, 60], [0, 1], {
    extrapolateRight: 'clamp',
    easing: Easing.bounce,
  });

  // Elastic
  const elastic = interpolate(frame, [0, 60], [0, 1], {
    extrapolateRight: 'clamp',
    easing: Easing.elastic(1),
  });

  // Bezier curve
  const bezier = interpolate(frame, [0, 60], [0, 1], {
    extrapolateRight: 'clamp',
    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  });

  return null; // Apply these values to styles
};

Available easing functions from Easing:

• Easing.linear - constant speed
• Easing.ease - default CSS ease
• Easing.cubic / Easing.quad / Easing.sin - power curves
• Easing.bounce - bouncing ball effect
• Easing.elastic(bounciness) - spring overshoot
• Easing.bezier(x1, y1, x2, y2) - custom cubic bezier
• Easing.in(fn) / Easing.out(fn) / Easing.inOut(fn) - directional wrappers

Multi-property animation

Animate multiple properties with different timings from a single frame source:

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

export const MultiProperty: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Phase 1: Fade in (frames 0-20)
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Phase 2: Scale up with spring (frames 10-40)
  const scale = spring({
    frame: Math.max(0, frame - 10),
    fps,
    config: { damping: 10, stiffness: 100 },
  });

  // Phase 3: Slide to final position (frames 20-50)
  const translateX = interpolate(frame, [20, 50], [-100, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Phase 4: Color transition (frames 30-60)
  const colorProgress = interpolate(frame, [30, 60], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const r = Math.round(interpolate(colorProgress, [0, 1], [255, 99]));
  const g = Math.round(interpolate(colorProgress, [0, 1], [255, 102]));
  const b = Math.round(interpolate(colorProgress, [0, 1], [255, 241]));

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0f0f0f',
      }}
    >
      <div
        style={{
          opacity,
          transform: `scale(${scale}) translateX(${translateX}px)`,
          color: `rgb(${r}, ${g}, ${b})`,
          fontSize: 64,
          fontWeight: 'bold',
        }}
      >
        Multi-Phase Animation
      </div>
    </AbsoluteFill>
  );
};

Pattern: use different frame ranges for each property. Offset start frames to create overlapping phases. Use Math.max(0, frame - offset) for spring delays.

Typewriter effect

Reveal text character by character:

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

interface TypewriterProps {
  text: string;
  charsPerFrame?: number;
}

export const Typewriter: React.FC<TypewriterProps> = ({
  text,
  charsPerFrame = 0.5,
}) => {
  const frame = useCurrentFrame();
  const charsToShow = Math.floor(frame * charsPerFrame);
  const displayText = text.slice(0, charsToShow);
  const showCursor = frame % 15 < 10;

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#1e1e1e',
      }}
    >
      <p
        style={{
          fontFamily: 'monospace',
          fontSize: 48,
          color: '#d4d4d4',
        }}
      >
        {displayText}
        <span style={{ opacity: showCursor ? 1 : 0 }}>|</span>
      </p>
    </AbsoluteFill>
  );
};

Circular motion

Animate elements along a circular path:

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

interface OrbiterProps {
  radius: number;
  speed: number;
  size: number;
  color: string;
}

const Orbiter: React.FC<OrbiterProps> = ({ radius, speed, size, color }) => {
  const frame = useCurrentFrame();
  const angle = interpolate(frame, [0, 90], [0, Math.PI * 2 * speed]);

  const x = Math.cos(angle) * radius;
  const y = Math.sin(angle) * radius;

  return (
    <div
      style={{
        position: 'absolute',
        width: size,
        height: size,
        borderRadius: '50%',
        backgroundColor: color,
        transform: `translate(${x}px, ${y}px)`,
        left: '50%',
        top: '50%',
        marginLeft: -size / 2,
        marginTop: -size / 2,
      }}
    />
  );
};

export const CircularMotion: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      <Orbiter radius={200} speed={1} size={30} color="#e63946" />
      <Orbiter radius={150} speed={-0.7} size={20} color="#457b9d" />
      <Orbiter radius={100} speed={1.5} size={15} color="#2a9d8f" />
    </AbsoluteFill>
  );
};

Key: use Math.cos and Math.sin with a frame-derived angle. Multiply speed to control rotation rate. Negative speed reverses direction.

Project Structure

Organizing Remotion projects for maintainability and reuse.

Standard project layout

my-video/
  src/
    Root.tsx              # Registers all compositions
    index.ts              # Entry point (exports Root)
    compositions/
      Intro.tsx           # Individual composition components
      MainContent.tsx
      Outro.tsx
    components/
      AnimatedText.tsx    # Reusable animation components
      Background.tsx
      Logo.tsx
    hooks/
      useAnimation.ts    # Custom animation hooks
      useData.ts         # Data fetching hooks
    lib/
      colors.ts          # Shared constants
      fonts.ts           # Font loading
      schemas.ts         # Zod schemas for input props
    types.ts              # TypeScript type definitions
  public/
    fonts/               # Custom font files
    images/              # Static images
    audio/               # Music and sound effects
  remotion.config.ts     # Remotion CLI configuration
  package.json
  tsconfig.json

Entry point and Root

The entry point exports the Root component that registers all compositions:

// src/index.ts
import { registerRoot } from 'remotion';
import { RemotionRoot } from './Root';

registerRoot(RemotionRoot);

// src/Root.tsx
import { Composition } from 'remotion';
import { Intro } from './compositions/Intro';
import { MainContent } from './compositions/MainContent';
import { Outro } from './compositions/Outro';
import { introSchema, mainSchema, outroSchema } from './lib/schemas';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Intro"
        component={Intro}
        durationInFrames={90}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          title: 'Welcome',
          subtitle: 'An example video',
        }}
      />
      <Composition
        id="MainContent"
        component={MainContent}
        durationInFrames={300}
        fps={30}
        width={1920}
        height={1080}
        schema={mainSchema}
        defaultProps={{
          items: ['Item 1', 'Item 2', 'Item 3'],
        }}
      />
      <Composition
        id="Outro"
        component={Outro}
        durationInFrames={60}
        fps={30}
        width={1920}
        height={1080}
        schema={outroSchema}
        defaultProps={{
          message: 'Thanks for watching',
        }}
      />
    </>
  );
};

Parametrized videos with Zod schemas

Define input props with Zod for type safety and Remotion Studio UI generation:

// src/lib/schemas.ts
import { z } from 'zod';

export const introSchema = z.object({
  title: z.string().describe('Main title text'),
  subtitle: z.string().describe('Subtitle text below the title'),
  backgroundColor: z.string().default('#0f0f0f').describe('Background color'),
  accentColor: z.string().default('#e63946').describe('Accent color for highlights'),
});

export const mainSchema = z.object({
  items: z.array(z.string()).describe('List of items to display'),
  showNumbers: z.boolean().default(true).describe('Show item numbers'),
  animationSpeed: z.enum(['slow', 'normal', 'fast']).default('normal'),
});

export const outroSchema = z.object({
  message: z.string().describe('Closing message'),
  showLogo: z.boolean().default(true),
});

export type IntroProps = z.infer<typeof introSchema>;
export type MainProps = z.infer<typeof mainSchema>;
export type OutroProps = z.infer<typeof outroSchema>;

Use the schema in compositions:

// src/compositions/Intro.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';
import type { IntroProps } from '../lib/schemas';

export const Intro: React.FC<IntroProps> = ({
  title,
  subtitle,
  backgroundColor,
  accentColor,
}) => {
  const frame = useCurrentFrame();

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

  const subtitleOpacity = interpolate(frame, [20, 50], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <h1 style={{ color: accentColor, fontSize: 80, opacity: titleOpacity }}>
        {title}
      </h1>
      <p style={{ color: 'white', fontSize: 36, opacity: subtitleOpacity }}>
        {subtitle}
      </p>
    </AbsoluteFill>
  );
};

When a schema is set on a <Composition>, Remotion Studio renders form controls in the sidebar for each field, using describe() values as labels.

Reusable animation components

Build a library of composable animation primitives:

// src/components/FadeIn.tsx
import { useCurrentFrame, interpolate } from 'remotion';

interface FadeInProps {
  children: React.ReactNode;
  durationFrames?: number;
  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
  distance?: number;
}

export const FadeIn: React.FC<FadeInProps> = ({
  children,
  durationFrames = 20,
  direction = 'up',
  distance = 30,
}) => {
  const frame = useCurrentFrame();

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

  const translate = interpolate(frame, [0, durationFrames], [distance, 0], {
    extrapolateRight: 'clamp',
  });

  const transforms: Record<string, string> = {
    up: `translateY(${translate}px)`,
    down: `translateY(${-translate}px)`,
    left: `translateX(${translate}px)`,
    right: `translateX(${-translate}px)`,
    none: 'none',
  };

  return (
    <div style={{ opacity, transform: transforms[direction] }}>
      {children}
    </div>
  );
};

// src/components/ScaleIn.tsx
import { useCurrentFrame, useVideoConfig, spring } from 'remotion';

interface ScaleInProps {
  children: React.ReactNode;
  delay?: number;
  damping?: number;
}

export const ScaleIn: React.FC<ScaleInProps> = ({
  children,
  delay = 0,
  damping = 12,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const scale = spring({
    frame: Math.max(0, frame - delay),
    fps,
    config: { damping },
  });

  return (
    <div style={{ transform: `scale(${scale})` }}>
      {children}
    </div>
  );
};

Usage in compositions:

import { Sequence } from 'remotion';
import { FadeIn } from '../components/FadeIn';
import { ScaleIn } from '../components/ScaleIn';

export const MyScene: React.FC = () => {
  return (
    <AbsoluteFill>
      <Sequence from={0}>
        <FadeIn direction="up" durationFrames={30}>
          <h1>Title</h1>
        </FadeIn>
      </Sequence>
      <Sequence from={20}>
        <ScaleIn damping={8}>
          <img src={staticFile('logo.png')} />
        </ScaleIn>
      </Sequence>
    </AbsoluteFill>
  );
};

Font loading

Centralize font loading for consistency:

// src/lib/fonts.ts
import { loadFont as loadInter } from '@remotion/google-fonts/Inter';
import { loadFont as loadPoppins } from '@remotion/google-fonts/Poppins';

export const inter = loadInter();
export const poppins = loadPoppins();

For custom fonts, place .woff2 files in public/fonts/ and use CSS @font-face in your components.

Shared style constants

// src/lib/colors.ts
export const colors = {
  background: '#0f0f0f',
  surface: '#1a1a2e',
  primary: '#e63946',
  secondary: '#457b9d',
  accent: '#2a9d8f',
  text: '#ffffff',
  textMuted: '#a0a0a0',
} as const;

export const sizes = {
  titleFont: 80,
  subtitleFont: 48,
  bodyFont: 32,
  padding: 100,
  borderRadius: 16,
} as const;

export const timing = {
  fadeIn: 20,
  fadeOut: 15,
  staggerDelay: 8,
  sceneTransition: 30,
} as const;

Async data loading pattern

Load external data before rendering:

// src/hooks/useData.ts
import { useCallback, useEffect, useState } from 'react';
import { continueRender, delayRender } from 'remotion';

export function useAsyncData<T>(fetcher: () => Promise<T>) {
  const [data, setData] = useState<T | null>(null);
  const [handle] = useState(() => delayRender('Loading async data'));

  const fetchData = useCallback(async () => {
    try {
      const result = await fetcher();
      setData(result);
      continueRender(handle);
    } catch (err) {
      console.error('Failed to load data:', err);
      continueRender(handle);
    }
  }, [fetcher, handle]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return data;
}

Usage:

import { AbsoluteFill } from 'remotion';
import { useAsyncData } from '../hooks/useData';

export const DataDriven: React.FC = () => {
  const data = useAsyncData(async () => {
    const response = await fetch('https://api.example.com/stats');
    return response.json();
  });

  if (!data) {
    return null; // Will not render until data loads
  }

  return (
    <AbsoluteFill>
      <h1 style={{ color: 'white', fontSize: 64 }}>{data.title}</h1>
    </AbsoluteFill>
  );
};

The delayRender() call pauses the renderer until continueRender() is called, ensuring async data is available before any frame is captured.

Rendering Guide

Comprehensive guide to rendering Remotion compositions to video files.

CLI rendering

The primary way to render videos is the Remotion CLI:

# Basic render to MP4 (H.264 codec)
npx remotion render src/index.ts MyComposition out/video.mp4

# Specify codec explicitly
npx remotion render src/index.ts MyComposition out/video.mp4 --codec h264

# Render to WebM (VP8)
npx remotion render src/index.ts MyComposition out/video.webm --codec vp8

# Render to ProRes (for editing in Final Cut/Premiere)
npx remotion render src/index.ts MyComposition out/video.mov --codec prores

# Render a GIF
npx remotion render src/index.ts MyComposition out/animation.gif --codec gif

Resolution and quality options

# Custom resolution (overrides composition defaults)
npx remotion render src/index.ts MyComposition out/video.mp4 --width 3840 --height 2160

# Control CRF (quality) - lower is better quality, higher file size
# H.264 range: 1-51, default 18
npx remotion render src/index.ts MyComposition out/video.mp4 --crf 15

# Frame range (render only specific frames)
npx remotion render src/index.ts MyComposition out/video.mp4 --frames 0-90

# Specific single frame as image
npx remotion still src/index.ts MyComposition out/thumbnail.png --frame 45

Passing input props

# Pass JSON props to the composition
npx remotion render src/index.ts MyComposition out/video.mp4 \
  --props '{"title": "Hello World", "color": "#ff0000"}'

# Pass props from a file
npx remotion render src/index.ts MyComposition out/video.mp4 \
  --props ./input-data.json

Codec comparison

Recommendation: Use h264 for most distribution. Use prores when the output will be edited further. Use gif only for very short clips (under 5 seconds).

Programmatic rendering

Render from Node.js code for batch processing or server-side rendering:

import { bundle } from '@remotion/bundler';
import {
  renderMedia,
  selectComposition,
  getCompositions,
} from '@remotion/renderer';
import path from 'path';

async function renderVideo() {
  // Step 1: Bundle the project
  const bundleLocation = await bundle({
    entryPoint: path.resolve('./src/index.ts'),
    webpackOverride: (config) => config,
  });

  // Step 2: Select composition
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: 'MyComposition',
    inputProps: {
      title: 'Dynamic Title',
    },
  });

  // Step 3: Render
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: 'h264',
    outputLocation: path.resolve('./out/video.mp4'),
    inputProps: {
      title: 'Dynamic Title',
    },
    onProgress: ({ progress }) => {
      console.log(`Rendering: ${Math.round(progress * 100)}%`);
    },
  });

  console.log('Render complete');
}

renderVideo();

Batch rendering multiple compositions

import { bundle } from '@remotion/bundler';
import { getCompositions, renderMedia } from '@remotion/renderer';
import path from 'path';

async function renderAll() {
  const bundleLocation = await bundle({
    entryPoint: path.resolve('./src/index.ts'),
  });

  const compositions = await getCompositions(bundleLocation);

  for (const composition of compositions) {
    console.log(`Rendering ${composition.id}...`);
    await renderMedia({
      composition,
      serveUrl: bundleLocation,
      codec: 'h264',
      outputLocation: path.resolve(`./out/${composition.id}.mp4`),
    });
  }

  console.log(`Rendered ${compositions.length} videos`);
}

renderAll();

Rendering with dynamic data

import { bundle } from '@remotion/bundler';
import { renderMedia, selectComposition } from '@remotion/renderer';
import path from 'path';

interface VideoData {
  userName: string;
  score: number;
  avatarUrl: string;
}

async function renderPersonalizedVideo(data: VideoData) {
  const bundleLocation = await bundle({
    entryPoint: path.resolve('./src/index.ts'),
  });

  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: 'PersonalizedVideo',
    inputProps: data,
  });

  const outputPath = path.resolve(`./out/${data.userName}.mp4`);

  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: 'h264',
    outputLocation: outputPath,
    inputProps: data,
  });

  return outputPath;
}

Rendering still images

Export a single frame as PNG or JPEG:

import { bundle } from '@remotion/bundler';
import { renderStill, selectComposition } from '@remotion/renderer';
import path from 'path';

async function renderThumbnail() {
  const bundleLocation = await bundle({
    entryPoint: path.resolve('./src/index.ts'),
  });

  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: 'MyComposition',
  });

  await renderStill({
    composition,
    serveUrl: bundleLocation,
    output: path.resolve('./out/thumbnail.png'),
    frame: 45,
    imageFormat: 'png',
  });
}

renderThumbnail();

CLI equivalent:

npx remotion still src/index.ts MyComposition out/thumbnail.png --frame 45
npx remotion still src/index.ts MyComposition out/thumbnail.jpeg --frame 45 --image-format jpeg --quality 90

Performance optimization

Parallel rendering with concurrency

await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: 'h264',
  outputLocation: './out/video.mp4',
  concurrency: 4, // Render 4 frames in parallel
});

Default concurrency is 50% of CPU cores. Increase for CPU-heavy compositions, decrease if running out of memory.

Use OffthreadVideo for embedded video clips

import { OffthreadVideo, staticFile } from 'remotion';

// Preferred: better rendering performance
export const GoodVideoEmbed: React.FC = () => {
  return <OffthreadVideo src={staticFile('clip.mp4')} />;
};

// Avoid: slower rendering due to seeking
export const SlowVideoEmbed: React.FC = () => {
  return <video src={staticFile('clip.mp4')} />;
};

<OffthreadVideo> extracts frames outside the browser, significantly reducing render time for compositions that include video clips.

Prefetch remote assets

import { prefetch } from 'remotion';

const { free, waitUntilDone } = prefetch('https://example.com/large-image.png', {
  method: 'blob-url',
});

// Use in component after prefetch completes

Reduce bundle size

// remotion.config.ts
import { Config } from '@remotion/cli/config';

Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        // Tree-shake unused heavy dependencies
      },
    },
  };
});

Remotion Lambda (cloud rendering)

Render videos in AWS Lambda for horizontal scaling:

import { renderMediaOnLambda } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  serveUrl: 'https://your-site.com/bundle',
  composition: 'MyComposition',
  codec: 'h264',
  inputProps: { title: 'Cloud Rendered' },
});

console.log('Video URL:', result.url);

Lambda rendering splits the video into chunks, renders each chunk in a separate Lambda invocation, then stitches them together. This allows rendering a 5-minute video in under 30 seconds.

Setup requirements:

1. Deploy a Lambda function with npx remotion lambda functions deploy
2. Deploy the Remotion bundle with npx remotion lambda sites create
3. Configure AWS credentials with appropriate IAM permissions

Configuration file

remotion.config.ts at the project root:

import { Config } from '@remotion/cli/config';

// Set default codec
Config.setCodec('h264');

// Set default CRF (quality)
Config.setCrf(18);

// Set concurrency
Config.setConcurrency(4);

// Override webpack config
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    module: {
      ...config.module,
      rules: [
        ...(config.module?.rules ?? []),
        // Add custom loaders here
      ],
    },
  };
});

Troubleshooting rendering issues