Remotion

---
name: remotion
description: Best practices for Remotion - video creation in React. Use when working with video compositions, animations, or subtitles.
user-invocable: true
when_to_use: "Invoked when the user says \"remotion\", \"video\", \"animation\", \"subtitle\"."
allowed-tools: Read, Write, Edit, Bash, Grep, Glob
model: opus
---

# Remotion Best Practices

Video creation in React using Remotion.

## When to Use

- Creating video compositions
- Adding animations to video
- Working with subtitles/captions
- Embedding media (videos, images, audio)
- Sequencing and timing

## Core Concepts

### Compositions
Define video dimensions, duration, and frame rate:
```tsx
import { Composition } from 'remotion';

<Composition
  id="MyVideo"
  component={MyComponent}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
/>
```

### Animation with useCurrentFrame
```tsx
import { useCurrentFrame, interpolate } from 'remotion';

const MyComponent = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return <div style={{ opacity }}>Hello</div>;
};
```

### Sequencing
```tsx
import { Sequence } from 'remotion';

<Sequence from={0} durationInFrames={60}>
  <Scene1 />
</Sequence>
<Sequence from={60} durationInFrames={60}>
  <Scene2 />
</Sequence>
```

## Detailed Rules

Load specific rules for detailed guidance:

| Rule | When to Load |
|------|--------------|
| `rules/animations.md` | Fundamental animation patterns |
| `rules/compositions.md` | Defining compositions, stills, folders |
| `rules/subtitles.md` | Captions and subtitle rendering |
| `rules/timing.md` | Interpolation, easing, springs |
| `rules/videos.md` | Embedding videos - trim, volume, speed |

## Quick Reference

### Interpolation
```tsx
// Linear interpolation
const value = interpolate(frame, [0, 100], [0, 1]);

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

// Explicitly clamp; the default extrapolation extends the input range
const value = interpolate(frame, [0, 100], [0, 1], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
```

### Spring Animation
```tsx
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

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

### Media
```tsx
import { Video, Audio, Img, staticFile } from 'remotion';

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

// With controls
<Video
  src={src}
  volume={0.5}
  startFrom={30}
  endAt={120}
/>
```

## Integration Notes

- Works with React 18+
- Use `staticFile()` for assets in `/public`
- Frame-based timing (not time-based)
- SSR-compatible components

Source: [remotion-dev/skills](https://github.com/remotion-dev/skills)

## Proving the run

**Observable:** the requested composition renders end to end with the expected
frame count, duration, dimensions and playable media. Inspect representative
scene boundaries and the final artifact, including audio/subtitles when present.
A nonblank middle still is one control, not proof of the whole video.

```bash
npx remotion still <CompositionId> out/frame.png --frame=<mid>
npx remotion render <CompositionId> out/video.mp4
```

A composition that type-checks can still render black — a mistimed `Sequence`,
an asset that 404s, a `useCurrentFrame` off by a factor of fps. Render a still
from the middle rather than frame 0, which is often legitimately empty, and look
at it. Report the frame count and duration actually produced, not the ones
configured. Verify output identity against the candidate composition and input
assets. See [interpolate](https://www.remotion.dev/docs/interpolate) for current
extrapolation behavior.