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/                  # Remotion input — compiled by tsc/Remotion
│   ├── index.ts          # Entry point — calls registerRoot()
│   ├── Root.tsx          # React root component
│   └── Composition.tsx   # Composition definitions (placeholder)
├── scripts/              # Operator tooling — Python, stdlib only
│   ├── tools.py          # Dispatcher: python3 scripts/tools.py --help
│   ├── ffmpeg_tools.py   # mux / bake / still / strip / probe
│   ├── lrc2srt.py        # LRC → SRT
│   ├── srt2ass.py        # SRT → ASS (the step before baking)
│   ├── bom_gen.py        # Bill of materials for untracked assets
│   └── hwprobe.py        # What this machine can actually encode
├── package.json          # Remotion + React + Tailwind deps
├── remotion.config.ts    # CLI config (rspack, jpeg output format)
└── tsconfig.json         # TypeScript (strict, ES2018)
```

`src/` and `scripts/` do not mix: the former is what the video build compiles, the
latter is what you run by hand.

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