# Remotion Video

> Create programmatic videos with React using Remotion - generate animations, compositions, text effects, transitions, captions, and render MP4 videos from code

- Skill: `chainlesschain/remotion-video` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add chainlesschain/remotion-video`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chainlesschain/remotion-video/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: chainlesschain (https://skillmd.com/u/chainlesschain)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chainlesschain/remotion-video

---


# Remotion Video Skill

Create programmatic videos with React using Remotion.

## Usage

```
/remotion-video create <project-name>
/remotion-video preview [project-path]
/remotion-video render [composition-id] [--output output.mp4]
/remotion-video template <template-name>
```

## Actions

| Action | Description |
| --- | --- |
| `create` | Scaffold a new Remotion project |
| `preview` | Start the Remotion Studio dev server |
| `render` | Render a composition to MP4 |
| `template` | Generate a composition from template |
| `add-scene` | Add a new scene/composition to project |

## Animation Best Practices

### Interpolation

```tsx
import { interpolate, useCurrentFrame } from "remotion";
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
```

### Spring Animation

```tsx
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({ frame, fps, config: { damping: 200 } });
```

### Timing & Easing

- Use `interpolate()` for linear and eased transitions
- Use `spring()` for physics-based motion
- Use `<Sequence>` for sequencing scenes
- Use `<Series>` for stacking scenes with offsets

## Templates

| Template | Description |
| --- | --- |
| `intro` | Animated title intro with logo |
| `explainer` | Multi-scene explanation video |
| `slideshow` | Image/text slideshow with transitions |
| `social` | Short social media clip (16:9 or 9:16) |
| `caption` | Video with animated captions/subtitles |
| `chart` | Animated data visualization |

## Rendering

```
/remotion-video render MyComp --output video.mp4
```

Options: `--codec h264`, `--quality 80`, `--fps 30`, `--width 1920`, `--height 1080`