Files

T

irene afe397da3f refactor: draw the src/scripts boundary, drop dead files

Make each directory answerable by path alone: src/ is what the Remotion build
compiles, scripts/ is what you run by hand.

Removed:
- `ffmpeg.sh` — never worked; every parameter was assigned `$1`, so bake/bypass
  were broken from the start. Superseded by `scripts/ffmpeg_tools.py bake|still`.
- `src/lrc2srt.ts` — the TypeScript port; `scripts/lrc2srt.py` is the script that
  was actually maintained, and it now handles the multi-timestamp cases the TS
  version did.
- `scripts/bom-gen.ts` — superseded by `scripts/bom_gen.py`.
- `scripts/ffmpegusage.txt` — legacy command notebook. Every recipe in it is now
  reproduced by `ffmpeg_tools.py`, including the `-map 0:v:0 -map 1:a:0 -c:v copy`
  mux and the FLAC `-compression_level 12` case, so it has no unique content left.

Also drops the `bom-gen` alias from the dispatcher (dash-case was TypeScript
naming) and documents the boundary in README.md and REMOTION-QUICKSTART.md.

`npm run lint` (eslint src && tsc) passes with src/ reduced to Remotion input.

2026-09-10 18:18:04 +09:00

2.9 KiB

Raw Permalink Blame History

Remotion Quickstart

Prerequisites

Node.js 18+
ffmpeg installed on your system

Getting started

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:

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

npx remotion render src/index.ts MyComp out/video.mp4

Replace MyComp with your composition ID. The output goes to out/.

2.9 KiB Raw Permalink Blame History Unescape Escape