Remotion プロダクション

Remotion ビデオを決定論的なフレームレンダラーとして構築します。アセットのジオメトリ、視覚的なアンカー、タイムラインのタイミング、最終的なメディア検証を個別の関心事として扱います。

タスクのルーティング

スプライトシートの抽出、フレームのはみ出し、被写体の位置ずれ、アートワークの切り捨て、不自然なループについては、references/sprite-sheets.md を参照してください。
コンポジション構造、シーンタイミング、ライブ座標パネル、トランジションデザインについては、references/scene-architecture.md を参照してください。
ビデオ内オープニングカバー、スタンドアロンサムネイルコンポジション、ブランディングエンディング、ファイナルホールドについては、references/covers-and-endings.md を参照してください。
アセットのロード、オーディオ、delayRender の失敗、メモリ不足レンダリング、エクスポート検証については、references/rendering-and-audio.md を参照してください。
カバー画像プロンプト、サムネイルの方向性、ショートビデオの説明文、公開ハッシュタグについては、references/publishing-copy.md を参照してください。

リクエストに関連するリファレンスのみを読んでください。古いプロジェクトでは remotion からメディアコンポーネントが公開されている場合があり、現在のプロジェクトでは @remotion/media を使用するため、インポートを選択する前にインストールされている Remotion のバージョンを確認してください。

プロダクションワークフロー

1. レンダリング契約の確立

編集前に既存のプロジェクトを検査します。以下を記録します。

コンポジション ID、幅、高さ、FPS、および期間。
シーンの境界と、フレームがグローバルか Sequence にローカルか。
ソースアセットの寸法、透明度、フレームメタデータ、オーディオ期間。
必要な出力コーデック、出力先、および利用可能なレンダリングリソース。
成果物に、オープニングカバーシーン、スタンドアロンカバー画像、エンディングカード、可聴オーディオ、意図的な無音、公開コピーが含まれるかどうか。

関連のないワーキングツリーの変更は保持します。プロジェクトを再構築するよりも、的を絞った小さな変更を優先します。

2. 時間を明示的にモデル化する

シーン期間とカットフレームを名前付き定数またはデータとして定義します。useCurrentFrame() と useVideoConfig() からアニメーション状態を導出します。

const spriteIndex =
  Math.floor((frame * spriteFps) / compositionFps) % sequence.length;

連続的なモーションには、クランプされた範囲で interpolate() を使用します。レンダリングされたアニメーションに CSS トランジション、CSS キーフレーム、壁時計タイマー、ランダム値、または可変再生状態を使用しないでください。

3. ソースジオメトリとプレゼンテーションを分離する

クロップ矩形、アニメーション順序、コンテンツ境界、視覚的アンカーを型付きデータに保持します。レンダリングコンポーネントは、CSS やラベルで座標を複製するのではなく、そのデータを消費するようにします。

以下に、同じ計算された現在のフレームオブジェクトを使用します。

可視クロップ。
フレームカウンターとハイライトされたセル。
JSON/座標パネル。
アクティブなフレームを説明するキャプション。

これにより、正しいアニメーションと古い説明用 UI の組み合わせを防ぎます。

フィルムストリップを表示する場合、正確な現在のフレームを含むウィンドウを生成します。異なるクロップをレンダリングしながら、最も近いサンプリングされたフレームをハイライトしないでください。

4. メイン被写体を安定させる

アニメーションには固定ビューポートを使用します。まずソース矩形を正確にクロップし、次にそのクロップされたフレームをビューポート内でフレームごとの視覚的アンカーまたは可視コンテンツボックスを使用して移動します。アートワークがセル内で移動する場合、生のセル矩形のみを中央揃えにしないでください。

スプライトシートの場合、すべてのエッジフレームと、テール、髪、影、モーショントレールなどの長い末端を含むフレームを検証します。references/sprite-sheets.md の詳細なワークフローに従ってください。

5. シーンの連続性を構築する

すべてのシーンシーケンスの外側に、コンポジションに永続的な不透明なベース背景を与えます。シーンの背景も不透明のままにすることができます。トランジションは、シーンの上、かつ最終的なビネットまたはセーフティオーバーレイの下に、フレーム駆動のオーバーレイとして適用します。

装飾効果は、説明に従属させます。トランジションはカットを隠すべきであり、透明性、チェッカーボード、隣接するスプライトセル、またはマウントされていないコンテンツを明らかにするべきではありません。

リクエストにカバーまたはエンディングが含まれる場合、それらをファーストクラスのシーンとして実装し、有用な場合はスタンドアロンのカバーコンポジションをレンダリングします。references/covers-and-endings.md に従ってください。ユーザーがプロンプトのみを要求した場合を除き、カバー生成プロンプトを実際の Remotion カバーの代わりに使用しないでください。

6. オーディオの追加とミキシング

ローカルオーディオは staticFile() で参照します。十分に長いトラックを選択するか、意図的にループさせるか、意図的にトリミングして、コンポジション全体をカバーします。ユーザーから提供された長いトラックの場合、その期間、無音、ラウドネスを検査し、必要な抜粋のみを public/audio/ に配置します。ラウドネスだけに頼るのではなく、音楽的に自然な区切りを選びます。

フェードにはフレームベースのボリュームコールバックを使用し、ナレーションや説明テキストのためにBGMを十分に低く保ちます。Remotion がすでにボリュームエンベロープを所有している場合、フェードを抜粋に焼き付けないでください。

スタジオプレビューだけからオーディオが完了したと宣言しないでください。エクスポートされたファイルに測定可能な非無音のオーディオストリームが含まれていることを確認してください。

7. スコープを拡大して検証する

以下の順序でチェックを実行します。

プロジェクトのタイプチェック。
カバー、各カットの両側、代表的なスプライトフレーム、エンディングの入り口、およびファイナルホールドでスチルをレンダリング。
フルコンポジションのレンダリング。
Chrome が RAM または一時ディスクを使い果たした場合、アプリケーションコードを変更する前にレンダリング同時実行数を減らします。
最終コンテナの期間、ビデオストリーム、および必要なオーディオストリームを検査します。

エクスポート後、バンドルされた検証ツールを使用します。

node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio

出力先にファイルが存在していても、部分的な出力や失敗した出力は無効として扱います。

8. リクエスト時に公開コピーを準備する

カバープロンプトとビデオの説明は、最終的なコンポジション、検証された被写体、教育ポイント、ビジュアルスタイル、期間、および視聴者に基づいて作成します。これらの成果物は、ユーザーとの会話内に直接出力します。ユーザーから明示的に要求されない限り、プロンプトや説明のファイルを作成したり、画像生成ツールを呼び出したり、カバー画像を生成したりしないでください。

references/publishing-copy.md に従ってください。結果はコピー可能で、対象プラットフォーム向けに簡潔で、ユーザーの言語で記述されている必要があります。

完了基準

以下の条件が満たされるまで、完了を主張しないでください。

アニメーションがフレームから決定論的に導出されている。
被写体の境界がループ全体で完全かつ視覚的に安定している。
説明の座標がレンダリングされたスプライトフレームとともに更新される。
シーンカットが透明またはチェッカーボードのアーティファクトを露出しない。
メディアアセットがレンダリングハンドルのリークなしにロードされる。
フルレンダリングが安定した同時実行数で成功する。
エクスポートされたファイルが期待される期間、必要なオーディオ/ビデオストリームを持ち、音楽が要求された場合は非無音のオーディオを持つ。
要求されたカバーとエンディングのシーンが、完全な状態、トランジション境界、および最終フレームで視覚的にチェックされている。
スタンドアロンカバーアートワークには独自の不透明な背景が含まれ、ビデオ階層と一致している。
要求されたカバープロンプトと公開説明文が最終ビデオを正確に反映し、会話内で直接提供されている。

出力パス、レンダリングコマンド、検証結果、および意図的に削減された同時実行数を報告します。

解説動画：Remotion で仕上げ、表紙、書き出し検証