product-film

プロダクトフィルム

プロダクト自身が作ったように見えるフィルムです。プロダクトの色、書体、コンポーネント、ロゴ、声を使い、音楽に合わせて編集します。プロダクトのコードベース内、またはその隣で Remotion を使って制作するため、実際のコンポーネントを再利用でき、編集も続けられます。

必ず守ること

• そのプロダクトのデザインを最優先します。 すべてのルールはプロダクトに由来します。トークン、コンポーネント、ルールファイル、ランディングページ、コピーを確認します。このスキル内の内容を含め、そのプロダクトのデザインに反する別のプロダクトのテイストを持ち込んではいけません。
• 決めつけずに尋ねます。 フィルムに何を映し、どう制作するかはユーザーが決めます。ストーリーを書く前にヒアリングします（reference/interview.md）。調査で見つけた内容をもとに選択肢を提示し、汎用的な選択肢は提示しません。
• すべてのフレームは時間の純粋関数です。 CSS のトランジションやキーフレーム、タイマー、Date.now()、フレーム間で保持される状態は使いません。独自の時計を動かすコンポーネントには、フレーム駆動の代替版を用意します。
• 推測せず、計測します。 ビートは音声から、位置は DOM から（デバッグオーバーレイ）、色は最終ファイルのデコード済みピクセルから取得します。
• 主張には根拠を持たせます。 プロダクトが実際にできることだけを見せます。文章を書く前に、主張に関するルールと承認済みの文言を確認します。
• コミット、プッシュ、公開の前に必ず確認します。 レンダリング済みの各バージョン（out/<film>/v1、v2、...）をすべて残します。

ワークフロー

1. 簡単な事前調査。 質問に答えるために必要な情報だけを確認します。ルールファイル、トークン、コンポーネント、ロゴ（マスコットやアニメーションするマークがあればそれも）、ランディングページ、主な機能を調べます。reference/discovery.md を参照してください。
2. ヒアリング。 AskUserQuestion を2回に分けて行います。1回目は概要、2回目は素材について尋ねます。必要な場合のみ3回目を行います。reference/interview.md を参照してください。
3. ブランドキット → videos/BRAND.md。 選ばれた内容に基づく調査を終え、templates/BRAND.md を埋めます。
4. ストーリー → videos/<film>-prompt.md。 reference/story.md と reference/ingredients.md を読み、templates/film-prompt.md を埋めます。ユーザーに確認するチェックポイントとして、ビートシートと3つのスタイルフレームを提示します。
5. 音楽。 フィルムが無音の場合はスキップします。reference/music.md を参照してください。scripts/beats.py、小節ごとのステムマップ、scripts/audio-edit.py、計測したピークに合わせた SFX を使います。
6. エンジンとシーン。 reference/engine.md を読みます。
   • templates/kit/ を videos/src/kit/ にコピーします。
   • フィルムごとにフォルダーを1つ用意します。cues.ts（データとしてのビートシート）、layout.ts、acts/、コンポジションを配置します。
7. レビューの反復。 reference/review.md を参照してください。
   • 引き継ぎのたびに静止画を作成します（計測には scripts/stills.ts と --debug を使用）。
   • コンタクトシートと引き継ぎ用シートを作成し、その後、半解像度のドラフトを作成します。
   • 修正を繰り返し、作業の進行に合わせてフレームをユーザーに見せます。
8. 最終レンダリング、検証、納品。 reference/render.md を参照してください。scripts/render.ts を実行し、続いて scripts/verify.py を実行してから、ファイルを送ります。

品質の最低基準（素材にかかわらず常に適用）

• プロダクト独自の面、色、境界線、色合いだけを使います。 プロダクトで使われていないカード背景、アウトライン、色合いを作り出してはいけません。
• 納品サイズでも読めるようにします。 小さな文字にするより、言葉を減らします。画面の内容を言い直すだけのラベルは削除します。
• テキストがカーソル、チップ、テクスチャに隠れてはいけません。 動きの中でほかのテキストと交差させません。文字が表示されていく間に行を再センタリングしてはいけません。各単語の位置を固定します。
• ローディング状態の幅を変えません。 プロダクト独自のローディングパターンを使います。
• すべてのビートで何かが起こります。 何も動かない小節は、間延びして感じられます。
• シーンの境目は小節に合わせます。 ループの最終フレームは最初のフレームと一致させます。ランディングループはミュート状態に見えるようにします。
• プロダクトの表現にないエフェクトは使いません。 グロー、パーティクル、クリックリング、弾むイージング、シェーダーは使用しません。

実際に時間を取られる落とし穴

• Remotion の静止画では、コンソールログは転送されません。フレーム内に測定値を表示してください（templates/kit/debug.tsx）。
• npx remotion still は呼び出すたびに再バンドルします。scripts/stills.ts を使い、バンドルは一度だけ行って複数のフレームをレンダリングしてください。
• Remotion にバンドルされた ffmpeg には tmix、select、tile がありません。フル版の ffmpeg を使ってください（uv run --with imageio-ffmpeg）。
• 色範囲： Remotion のマスターはリミテッドレンジ、BT.601、タグなしです。これをフルレンジとしてブレンドすると、#0a0a0a が #171717 まで明るくなり、暗いページ上で灰色のボックスになります。すべての成果物についてフレーム 0 をデコードし、数値を確認してください。
• interpolateColors は color-mix() を解析できません。アニメーションする色には、16 進数のトークンを使ってください。
• 非同期の画像コンポーネント（Radix または base-ui のアバター）は、フレーム内で空のままレンダリングされることがあります。Remotion の <Img> も併用してください。
• ターゲットが変わるスプリングでは、キーごとに閉形式のステップを一つずつ加算し、キーは時間順に並べてください。
• CSS の破線ボーダーは、ボックスのサイズ変更中にずれて見えます。一定の間隔で SVG のストロークとして破線を描画してください。
• 独自のクロックで動作する WebGL やシェーダーのエフェクトは、実行するたびに異なる映像になります。フレームごとに描画したテクスチャを使ってください。
• モノレポでは：
  • すべての remotion と @remotion/* のバージョンを、単一の特定バージョンに固定してください
  • ビデオのワークスペースで、アプリの Tailwind が再解決されないようにしてください
  • webpack のオーバーライドで、アプリのパスインポートをエイリアス化してください
• 自分が起動したプロセスだけを停止してください。他のセッションがマシンの空きを待っている場合があります。