ncmr-songs-videos/REMOTION-QUICKSTART.md

# 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. You can also pin a specific port:

```bash
npx remotion studio --port=3001
```

## 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)