76 lines
2.3 KiB
Markdown
76 lines
2.3 KiB
Markdown
# Remotion Quickstart
|
||
|
||
## Prerequisites
|
||
|
||
- Node.js 18+
|
||
- ffmpeg installed on your system
|
||
|
||
## Getting started
|
||
|
||
```bash
|
||
npm install # install dependencies
|
||
npm run dev # start Remotion Studio
|
||
```
|
||
|
||
Remotion Studio opens at **http://localhost:3000** in your browser. If 3000 is already in use, Remotion automatically bumps to 3001, 3002, etc. — watch the terminal output for the actual port number.
|
||
|
||
## Commands
|
||
|
||
| Command | What it does |
|
||
|----------------------|----------------------------------------------|
|
||
| `npm run dev` | Starts Remotion Studio (live preview UI) |
|
||
| `npm run build` | Bundles the project for production |
|
||
| `npx remotion render`| Renders a video from the command line |
|
||
| `npx remotion upgrade` | Upgrades all Remotion packages to latest |
|
||
|
||
## Remotion Studio
|
||
|
||
`npm run dev` starts the Studio — a browser-based editor where you can:
|
||
|
||
- Preview compositions in real time
|
||
- Scrub through frames
|
||
- Change props and see changes instantly
|
||
- Render videos from the browser
|
||
|
||
The Studio auto-reloads on file changes. No manual refresh needed.
|
||
|
||
## Project structure
|
||
|
||
```
|
||
.
|
||
├── src/
|
||
│ ├── index.ts # Entry point — calls registerRoot()
|
||
│ ├── Root.tsx # React root component
|
||
│ ├── Composition.tsx # Composition definitions (placeholder)
|
||
│ └── lrc2srt.ts # LRC → SRT subtitle converter
|
||
├── package.json # Remotion + React + Tailwind deps
|
||
├── remotion.config.ts # CLI config (rspack, jpeg output format)
|
||
├── tsconfig.json # TypeScript (strict, ES2018)
|
||
└── ffmpeg.sh # Helper for ASS subtitle baking
|
||
```
|
||
|
||
## Compositions
|
||
|
||
Compositions are defined in `src/Composition.tsx`. Each has:
|
||
|
||
- **id** — unique name
|
||
- **durationInFrames** — length in frames
|
||
- **fps** — frames per second
|
||
- **width/height** — resolution
|
||
|
||
The placeholder is 1280×720 at 30fps, 60 frames (2 seconds).
|
||
|
||
## Rendering a video
|
||
|
||
```bash
|
||
npx remotion render src/index.ts MyComp out/video.mp4
|
||
```
|
||
|
||
Replace `MyComp` with your composition ID. The output goes to `out/`.
|
||
|
||
## Next steps
|
||
|
||
- [Remotion docs](https://www.remotion.dev/docs)
|
||
- [Compositions guide](https://www.remotion.dev/docs/the-introduction-video)
|
||
- [Props guide](https://www.remotion.dev/docs/props)
|