docs: add Remotion quickstart guide

2026-09-09 17:38:21 +09:00
parent 74b70967a1
commit d25e693a4a
2 changed files with 115 additions and 14 deletions
@@ -0,0 +1,75 @@
+# 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)