76 lines
2.2 KiB
Markdown
76 lines
2.2 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.
|
|||
|
|
|
|||
|
|
## 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)
|