# Remotion
Remotion is a framework for programmatically creating videos using [[React]] and [[TypeScript]]. The core idea: a video is a function of images over time — write React components, receive a frame number, render content. Used by GitHub, SoundCloud, Wistia, Musixmatch. Built by Remotion AG. Licensed under a custom license (free for small teams).
## Core concepts
### Video as a function of time
Every video has four properties: `width`, `height`, `durationInFrames`, and `fps`. The first frame is `0`, the last is `durationInFrames - 1`.
### Compositions
A `<Composition>` combines a React component with video metadata. Register compositions in `src/Root.tsx` to make them renderable and visible in Remotion Studio:
```tsx
import {Composition} from 'remotion';
import {MyComp} from './MyComp';
export const Root: React.FC = () => (
<Composition
id="MyComp"
component={MyComp}
durationInFrames={120}
width={1920}
height={1080}
fps={30}
defaultProps={{}}
/>
);
```
### Key hooks
- `useCurrentFrame()` — returns the current frame number
- `useVideoConfig()` — returns `{ fps, durationInFrames, height, width }`
### Sequences
`<Sequence from={10} durationInFrames={20}>` scopes child components to a time range. Inside a Sequence, `useCurrentFrame()` returns frame relative to the Sequence start (not the global timeline).
## Product suite
- **Remotion Studio**: browser-based editor for real-time preview
- **Remotion Player**: embeddable video player for web applications
- **Remotion Lambda**: serverless rendering on AWS
- **Editor Starter**: template for building custom video editing apps
- **Timeline and Recorder**: additional creation tools
- **Prompt-to-video**: AI-powered video generation
## Key features
- React and TypeScript-based video composition
- Dynamic parameterization of video content with data
- Multiple rendering options: local, server-side, serverless (Lambda)
- Embed interactive videos in web applications via the Player
- Music visualization, captions, screencasts, year-in-review videos
## Installation
```sh
npx create-video@latest # npm
pnpm create video # pnpm
bun create video # bun
```
Next.js integration: `npx create-video@latest --next`
## Pricing
- **Free**: commercial use, unlimited renders, up to 3 team members
- **Company**: $0.01/render ($100/month minimum), prioritized support
- **Creators**: $25/month per seat for personal video creation
- **Enterprise**: from $500/month with consulting and custom terms
## References
- Website: https://www.remotion.dev/
- Documentation: https://www.remotion.dev/docs/
- API: https://www.remotion.dev/docs/api
- Source code: https://github.com/remotion-dev/remotion
## Related
- [[React]]
- [[TypeScript]]
- [[Node.js]]
- [[FFmpeg]]