Remotion内部アーキテクチャ — フレームをビデオに変換するパイプライン
Headless Chrome → スクリーンショット → FFmpegエンコーディングまでのレンダリングパイプライン解剖
RemotionがReactコードをビデオに変換する過程はWeb技術の創造的な活用です。
まずWebpackまたはesbuildがReactコンポーネントをブラウザ実行可能なバンドルにビルドします。このバンドルにはビデオのメタデータ（fps、解像度、総フレーム数）が含まれます。
次にPuppeteerがHeadless Chromeを起動し、バンドルされたページをロードした後、フレーム番号を0から最後まで順次変更しながら各フレームをPNG/JPEGでスクリーンショットします。delayRender()/continueRender() APIで非同期データロード（API呼び出し、フォントロードなど）が完了するまでスクリーンショットを遅延させることができます。
最後にFFmpegがイメージシーケンスを受け取りH.264（MP4）またはVP8/VP9（WebM）にエンコードします。オーディオトラックがあれば一緒にmuxします。
マルチスレッドレンダリングもサポートしています。--concurrencyオプションで複数のChromeインスタンスを同時実行しフレームを分散処理できます。
動作フロー
Webpack/esbuildがReactコンポーネント + メタデータ（fps、width、height、durationInFrames）をバンドル
PuppeteerがHeadless Chromeインスタンスを起動しバンドルされたHTMLページをロード
フレーム0からNまで巡回しcurrentFrameを注入 → React再レンダリング → スクリーンショット（PNG/JPEG）
delayRender()がアクティブな場合continueRender()呼び出しまでスクリーンショットを待機（非同期安全）
FFmpegがイメージシーケンス + オーディオトラックをH.264/VP9でエンコードし最終MP4/WebMを出力
メリット
- ✓ Web標準技術のみ使用: Chrome + FFmpegという実証済みの組み合わせ
- ✓ CSS/SVG/Canvas/WebGLなどブラウザがレンダリングできるすべてがビデオフレームになる
- ✓ delayRenderで非同期データ完了を保証 → データ駆動ビデオでの空フレーム防止
デメリット
- ✗ Chrome依存: Headless Chromeがない環境ではレンダリング不可
- ✗ メモリ使用量: フルHDフレームをメモリに保持するため長いビデオはRAM消費が大きい
- ✗ デバッグの複雑さ: レンダリングエラーがPuppeteer/Chrome/FFmpegのどこで発生したか特定が困難