Remotionガイド

基礎

Remotion — Reactでビデオを作るフレームワーク

JSXコンポーネントがそのままビデオフレームになるプログラマティックビデオ生成

RemotionはReactコンポーネントをフレーム単位でレンダリングしてMP4/WebMビデオを生成するオープンソースフレームワーク。After EffectsやPremiereの代わりにコードでビデオを作成でき、データ駆動の大量ビデオ生成、自動化されたSNSコンテンツ、SaaSビデオ機能の実装に最適

Remotion内部アーキテクチャ — フレームをビデオに変換するパイプライン

Headless Chrome → スクリーンショット → FFmpegエンコーディングまでのレンダリングパイプライン解剖

Remotionのレンダリングは3段階: (1) Webpack/esbuildでReactバンドル生成 (2) PuppeteerでHeadless Chromeから各フレームをスクリーンショット (3) FFmpegでイメージシーケンスをMP4/WebMにエンコード。このパイプラインがコードをビデオに変える核心

Remotion Composition — ビデオの構造を設計する方法

Composition、Sequence、Seriesでシーンを組み合わせる宣言的ビデオ構造化

Remotionではビデオは Composition（最上位コンテナ）→ Sequence（時間区間分割）→ 個別コンポーネント階層で構成。Reactでコンポーネントツリーを設計するように、ビデオのタイムラインを宣言的に構造化できる

アニメーション & メディア

Remotionアニメーション — spring()とinterpolate()でモーション作り

物理ベースのスプリングと補間関数で自然なビデオアニメーションを実現

RemotionはCSS transitionの代わりにフレームベースのアニメーションを使用。spring()は物理エンジンベースで自然なバウンス/減速を、interpolate()はフレーム範囲を任意の値範囲にマッピング。2つの関数の組み合わせでプロフェッショナルなモーショングラフィックスを実現

Remotionオーディオ & 字幕 — サウンドとビジュアルの同期

<Audio>、<OffthreadVideo>、useAudioData()でオーディオ/ビデオソースをフレームに同期

Remotionはオーディオをフレーム単位で制御可能。<Audio>でBGM/効果音を挿入し、useAudioData()で波形データを抽出してビジュアライザーを実装。<OffthreadVideo>で既存ビデオを合成し、@remotion/captionsで字幕をフレーム精度で同期

プロダクション

Remotionデータドリブンビデオ — API/DBデータからビデオ自動生成

calculateMetadata + delayRenderで外部データを安全にビデオに注入するパターン

静的ビデオを超えて、APIレスポンスやDBデータに基づいてビデオを動的生成するパターン。calculateMetadataでレンダリング前にデータをfetchし、getInputProps()でコンポーネントに注入。delayRender()で非同期ロード完了を保証し空フレームなしの安全なレンダリングが可能

Remotion Lambdaとは — AWS Lambdaの並列レンダリングで動画生成をスケールさせる仕組み

Lambda関数がフレームを分散レンダリングしS3で結合するサーバーレスビデオパイプライン

Remotion Lambdaは1本の動画をN個のチャンクに分けてAWS Lambdaで同時にレンダリングし、S3でFFmpeg結合する仕組み。Lambdaを増やせば動画生成が水平にスケールし、コストは同じ。料金の考え方・10GB/15分の制限・有料ライセンスも整理

Remotion Player — Webブラウザでビデオをリアルタイム再生

@remotion/playerでReactアプリにインタラクティブなビデオプレビューを埋め込み

Remotion Playerはレンダリングなしでブラウザ上でReactコンポーネントをリアルタイムビデオとして再生するコンポーネント。ユーザーがパラメータを調整すると即座に結果を確認でき、SaaSビデオエディタやプレビュー機能に活用

Remotion実践Tips — プロダクションビデオプロジェクトのベストプラクティス

プロジェクト構造、パフォーマンス最適化、デバッグ、デプロイまでの実践ノウハウ集

Remotionプロジェクトをプロダクションで運用して得た実践Tips: プロジェクトディレクトリ構造、レンダリングパフォーマンス最適化（prefetch、画像最適化、メモイゼーション）、デバッグ技法、CI/CDパイプライン設計、よくある間違いと解決法

Remotionコード読解

Remotionコード分析 — BundleシステムとWebpack/esbuild統合

bundle()がReactコンポーネントをレンダリング可能なHTMLに変換する過程をソースコードで追跡

Remotionレンダリングの最初のステップであるバンドリングをソースコードレベルで分析。packages/bundler/のWebpack設定、packages/studio/のesbuild設定、そしてCompositionManagerがメタデータを収集する過程まで。コードを追いながらReactプロジェクトがどのようにHeadless Chromeで実行可能なHTMLに変換されるか理解

Remotionコード分析 — renderMedia()とフレームレンダリングループ

Puppeteerで各フレームをスクリーンショットしFFmpegで結合するレンダリングコアループをソースコードで分析

packages/renderer/のrenderMedia() → renderFrames() → stitchFramesToVideo()チェーンを追跡。PuppeteerがChromeページにcurrentFrameを注入する方法、delayRender/continueRenderの実装、マルチスレッドフレーム分配、FFmpegスティッチングまで

Remotionコード分析 — Sequenceとタイムラインの時間管理の実装

SequenceContextでローカルタイムを実装する内部メカニズムとuseCurrentFrame()の動作原理

Remotionの時間管理の核心はSequenceContext。<Sequence from={60}>が子コンポーネントのフレームを0にリセットするローカルタイムをReact Contextで実装。useCurrentFrame()はSequenceContextのネストを考慮して最終フレームを計算。このパターンがシーンの独立開発と自由な配置を可能にする核心

Remotionコード分析 — spring()物理エンジンの内部実装

減衰スプリング微分方程式をJavaScriptでシミュレーションするspring()の数学とコード

spring()は単純なイージング関数ではなく実際の物理シミュレーション。減衰調和振動子の微分方程式を毎フレーム数値的に解いて0→1の値を生成。mass、damping、stiffnessパラメータがoverdamped/underdamped/critically dampedのどの解を選ぶか決定