Remotion Skill

Create videos programmatically using React. This skill provides guidance and tools for working with Remotion, a framework that allows you to build video content with React components.

Overview

Remotion is a React-based video creation framework that lets you:

• Build videos with familiar React concepts

• Use JavaScript/TypeScript for dynamic content

• Render videos programmatically

• Integrate video creation into applications

• Build parameterizable and reusable video components

When to Use This Skill

Use the Remotion skill when:

• Creating a new Remotion project

• Adding video generation to an existing React project

• Setting up Remotion compositions

• Configuring video rendering pipelines

• Creating reusable video components

• Integrating video rendering with server-side applications

Quick Start

Creating a New Remotion Project

Using npx (recommended)

npx create-video my-video

Or using npm init

npm init video my-video

Or using yarn

yarn create video my-video

Or using pnpm

pnpm create video my-video

Adding Remotion to Existing Project

Install core package

npm install remotion

Install CLI (for development)

npm install -D @remotion/cli

Optional: Install renderer for server-side rendering

npm install @remotion/renderer

Project Structure

A typical Remotion project structure:

my-video/ ├── src/ │ ├── Root.tsx # Root composition │ ├── Video.tsx # Main video component │ ├── components/ # Reusable components │ │ ├── Background.tsx │ │ ├── Text.tsx │ │ └── ... │ ├── compositions/ # Video compositions │ │ ├── MainComp.tsx │ │ └── ... │ └── index.tsx # Entry point ├── package.json ├── remotion.config.ts # Configuration └── public/ └── assets/

Core Concepts

1. Composition

A composition is a video scene with specific duration and frame rate:

import {Composition} from 'remotion'; import {MyVideo} from './Video';

export const RemotionRoot: React.FC = () => { return ( <> <Composition id="my-video" component={MyVideo} durationInFrames={300} // 10 seconds at 30fps fps={30} width={1920} height={1080} /> </> ); };

2. Video Component

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

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

// Animation based on frame const opacity = frame / 60; // Fade in over 2 seconds

return ( <AbsoluteFill style={{backgroundColor: 'white'}}> <AbsoluteFill style={{opacity}}> <h1>Hello, Remotion!</h1> <p>Frame: {frame}</p> </AbsoluteFill> </AbsoluteFill> ); };

3. Configuration

Create remotion.config.ts :

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

Config.setVideoImageFormat('jpeg'); Config.setOverwriteOutput(true); Config.setBrowserExecutable('/Applications/Google Chrome.app/Contents/MacOS/Google Chrome');

Common Patterns

Animations

Using spring for smooth animations:

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

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

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

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

Input Props

Pass data to compositions:

// Composition definition <Composition id="my-video" component={MyVideo} durationInFrames={300} fps={30} width={1920} height={1080} defaultProps={{ title: "Hello World", color: "blue", speed: 1.0, }} />

// Usage export const MyVideo: React.FC<{title: string; color: string; speed: number}> = ({ title, color, speed, }) => { return <div style={{color}}>{title}</div>; };

Sequence

Chain animations sequentially:

import {Sequence} from 'remotion';

export const SequenceExample: React.FC = () => { return ( <AbsoluteFill> <Sequence from={0} durationInFrames={60}> <FirstScene /> </Sequence> <Sequence from={60} durationInFrames={60}> <SecondScene /> </Sequence> <Sequence from={120} durationInFrames={180}> <FinalScene /> </Sequence> </AbsoluteFill> ); };

Loop

Repeat animations:

import {Loop} from 'remotion';

export const LoopExample: React.FC = () => { return ( <Loop durationInFrames={30} times={10}> <BouncingBall /> </Loop> ); };

Rendering Videos

Preview in Browser

npx remotion preview src/Root.tsx

Render to MP4

npx remotion render src/Root.tsx my-video --output=output.mp4

Render with Parameters

npx remotion render src/Root.tsx my-video --output=output.mp4 --props='{"title":"Custom Title"}'

Server-Side Rendering

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

async function renderVideo() { // Bundle the video const bundleLocation = await bundle({ entryPoint: './src/Root.tsx', webpackOverride: (config) => config, });

// Select composition const composition = await selectComposition({ serveUrl: bundleLocation, id: 'my-video', inputProps: {}, });

// Render await renderMedia({ composition, serveUrl: bundleLocation, codec: 'h264', outputLocation: output/${composition.id}.mp4, inputProps: {}, }); }

Best Practices

1. Component Structure

• Keep components small and reusable

• Use TypeScript for type safety

• Extract animations to separate hooks or utilities

2. Performance

• Use staticDuration when composition length doesn't change

• Optimize images and assets

• Use useCurrentFrame sparingly in complex components

3. Organization

src/ ├── compositions/ # Define video scenes ├── components/ # Reusable UI elements ├── hooks/ # Custom hooks for animations ├── utils/ # Helper functions └── assets/ # Images, fonts, etc.

4. Asset Management

• Use public/ folder for static assets

• Import images directly in components

• Optimize images before including in video

Troubleshooting

Video Not Rendering

• Check Chrome/Chromium is installed

• Verify composition ID matches

• Ensure output directory exists

• Check for console errors in preview

Performance Issues

• Reduce composition size during development

• Use lower resolution for testing

• Minimize expensive computations in render

• Use staticDuration when possible

Memory Issues

Reduce memory usage

NODE_OPTIONS=--max-old-space-size=4096 npx remotion render src/Root.tsx my-video

Advanced Features

Audio Integration

import {Audio, useAudioData} from 'remotion';

export const AudioExample: React.FC = () => { const {audioData} = useAudioData('/path/to/audio.mp3');

return ( <> <Audio src="/path/to/audio.mp3" /> {/* Visualize audio if needed */} </> ); };

Transitions

import {TransitionSeries} from '@remotion/transitions';

export const TransitionExample: React.FC = () => { return ( <TransitionSeries> <TransitionSeries.Transition in={<FirstScene />} out={<SecondScene />} > <TransitionSeries.Sequence name="first" durationInFrames={60}> <FirstScene /> </TransitionSeries.Sequence> <TransitionSeries.Sequence name="second" durationInFrames={60}> <SecondScene /> </TransitionSeries.Sequence> </TransitionSeries.Transition> </TransitionSeries> ); };

Lambda Rendering

For serverless video rendering:

npm install @remotion/lambda

Deploy to Lambda

npx remotion lambda sites create src/ --site-name=my-site

Render on Lambda

npx remotion lambda render my-video --output=output.mp4

Resources

• Remotion Documentation

• Remotion Examples

• Remotion GitHub

• Remotion Discord

• Remotion Twitter

Getting Help

When working with Remotion:

• Check the official documentation

• Review the examples repository

• Join the Discord community

• Search GitHub issues

• Ask in the Remotion community forums

Next Steps

After setting up your Remotion project:

• Create your first composition

• Build reusable components

• Test animations in the preview

• Render your first video

• Optimize for performance

• Deploy your rendering pipeline