## Overview
**Remotion** is a framework for creating videos programmatically using **React**. It gives you a frame number and a blank canvas, letting you render anything you want with React components — and then export it as a real MP4 video. Think of it as "React for video production."
- **Website**: [remotion.dev](https://www.remotion.dev/)
- **GitHub**: [remotion-dev/remotion](https://github.com/remotion-dev/remotion)
- **License**: Custom (free for individuals and teams up to 3; company license required for larger teams)
## Core Concept
> A video is a function of images over time. If you change content every frame, you end up with an animation.
Remotion treats video as a series of React renders. Each frame is a React component render at a specific point in time:
```tsx
import { AbsoluteFill, useCurrentFrame } from "remotion";
export const MyAnimation = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill
style={{
justifyContent: "center",
alignItems: "center",
fontSize: 100,
backgroundColor: "white",
}}
>
The current frame is {frame}.
</AbsoluteFill>
);
};
```
## Key Features
- **React-based** — use all of CSS, Canvas, SVG, WebGL, and the entire React/npm ecosystem
- **Compositions** — define videos with width, height, duration, and FPS as React components
- **Parametrized content** — pass props to generate different videos from the same template
- **Server-side rendering** — render videos on a server for automation and batch processing
- **Transparent overlays** — export with alpha channel for use as overlays in [[OBS Studio]]
- **Preview player** — real-time preview in the browser with timeline scrubbing
- **CLI & API** — automate rendering with command-line tools or the Node.js API
- **Skill.md** — provide a `skill.md` file describing your project, and AI tools can generate Remotion animations from it
## Use Cases
- **Animated overlays** for live streams and presentations via [[OBS Studio]]
- **Automated video generation** (e.g., personalized marketing videos, social media content)
- **Data visualization videos** — animate charts, graphs, and dashboards
- **Tutorial and explainer videos** — programmatically compose screen recordings with annotations
- **Conference talk graphics** — create animated title cards, transitions, and lower-thirds
## Integration with OBS Studio
Remotion animations integrate into [[OBS Studio]] in two ways:
1. **Pre-rendered**: Export animations as MP4 with alpha channel → add as **Media Source** in OBS
2. **Live preview**: Run Remotion in dev mode → capture as **Browser Source** in OBS (pre-rendering is more stable for performance)
Combined with [[Slidev]] for slides, this creates a powerful developer presentation stack.
## Why Remotion?
| Traditional Video Tools | Remotion |
|---|---|
| Manual timeline editing | Programmatic composition |
| Limited templating | Full React component reuse |
| GUI-dependent | Code-first, version-controlled |
| Hard to automate | CLI/API for batch rendering |
| Closed ecosystems | Leverage entire npm ecosystem |
## Pricing
- **Free** for individuals and companies up to 3 people
- **Company License** starting at $100/month for teams of 4+
- **Enterprise License** starting at $500/month with custom terms and consulting