Remotion Video Toolkit

---
name: remotion-video
description: Programmatic video creation with Remotion and React. Create videos with code using familiar web technologies.
---

# Remotion Video Toolkit

Create videos programmatically using React and web technologies.

## Quick Start

### Installation

```bash
# Create new Remotion project
npx create-video@latest

# Or add to existing project
npm install remotion
```

### Basic Composition

```tsx
import {Composition, useCurrentFrame, interpolate} from 'remotion';

const MyVideo = () => {
  const frame = useCurrentFrame();
  
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  
  return (
    <div style={{opacity}}>
      <h1>Hello World</h1>
    </div>
  );
};

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};
```

## Core Concepts

### useCurrentFrame

Get the current frame number:

```tsx
const frame = useCurrentFrame();
```

### interpolate

Animate values between frames:

```tsx
const opacity = interpolate(frame, [0, 30], [0, 1]);
const scale = interpolate(frame, [0, 60], [0, 1], {
  extrapolateRight: 'clamp',
});
```

### spring

Physics-based animations:

```tsx
import {spring} from 'remotion';

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

## Rendering

### CLI

```bash
# Render video
npx remotion render src/index.ts MyVideo out.mp4

# Render still
npx remotion still src/index.ts MyVideo out.png
```

### Lambda (AWS)

```bash
# Deploy Lambda function
npx remotion lambda functions deploy

# Render on Lambda
npx remotion lambda render <serve-url> <composition-id> out.mp4
```

## Common Use Cases

### Data-Driven Charts

```tsx
import {BarChart} from './components/BarChart';

const ChartVideo = ({data}) => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [0, 90], [0, 1]);
  
  return <BarChart data={data} progress={progress} />;
};
```

### Text Animations

```tsx
const AnimatedText = ({text}) => {
  const frame = useCurrentFrame();
  const characters = text.split('');
  
  return (
    <div>
      {characters.map((char, i) => {
        const delay = i * 2;
        const opacity = interpolate(frame, [delay, delay + 10], [0, 1]);
        return <span style={{opacity}}>{char}</span>;
      })}
    </div>
  );
};
```

### Captions

```tsx
import {Subtitle} from 'remotion';

const CaptionVideo = ({transcript}) => {
  return (
    <Sequence from={0} durationInFrames={300}>
      <Subtitle src={transcript} />
    </Sequence>
  );
};
```

## Media Handling

### Images

```tsx
import {Img, staticFile} from 'remotion';

<Img src={staticFile('image.png')} />
```

### Video

```tsx
import {Video} from 'remotion';

<Video src={staticFile('video.mp4')} />
```

### Audio

```tsx
import {Audio} from 'remotion';

<Audio src={staticFile('audio.mp3')} volume={0.5} />
```

## Transitions

### Fade

```tsx
import {TransitionSeries} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <Scene1 />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition timing={fade()} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <Scene2 />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

## Resources

- Docs: https://www.remotion.dev/docs
- GitHub: https://github.com/remotion-dev/remotion
- Showcase: https://remotion.dev/showcase