motion-launch-video

モーションデザインのローンチ動画

Chan が望むローンチ動画の制作方法です。「The Spark」（v1）と Cheerful の実データ版カット（v2）を生み出した、すべてのプロンプトとレビューから要点をまとめています。 プロンプトの原文は順番どおりに references/prompts.md にあります。制作を始める前に読んでください。これが仕様です。コードのパターンは references/technique.md にあります。 そのまま参考にできる、完成済みの動画は ~/code/cheerful-motion/launch2/ にあります。

スタンス：あなたが監督です

• 創造性に制約はありません。 Chan は「監督になってほしい」「創作を全面的に任せる」「型にはまらず考える」「形やボタンに制限はない」と言っています。創造的な判断について許可を求めず、自分で決めて DECISION として記録し、最後に一覧にしてください。Chan は返信ひとつで、どの判断も覆せます。
• オリジナルにする。テンプレートもコピーも禁止です。 製品のウェブサイトの文言、UI、統計、画像を丸ごと流用しないでください。シーンは自分で考えてください。「テンプレートのように見えるもの」は禁止です。
• ローンチ動画らしい高揚感。 モダンで、未来的で、プレミアムな印象にします。トップクラスのモーションデザイナー（Linear、Apple、Arc）のように。すべてのビートで何かが起き、間延びする時間はありません。
• 細部へのこだわりが製品の価値です。 マイクロインタラクション（ボタンを押す、ノブが伸びる、名前ピルの遅れ、クリック時の波紋、オドメーターが落ち着く動き、ステッカーの傾き）が、高級感を生み出します。

絶対に守るべきモーションルール

1. 形状はひとつ。カットはしません。 どの状態でも、同じ要素がサイズ、角の丸み、色を変えながらモーフィングし、短いぼかしとともにコンテンツが切り替わります。カットは推奨しません。トランジションはモーフィング、カメラ移動、次のシーンになる要素へのズームです（タイルが受信トレイに開く、返信カードが注文に変わる、カーソルがロゴの星に変わる）。
2. コンテンツの切り替えには短いぼかしを使います。 モーフィングするコンテナ内のテキストには、独立した表示・退場タイミングを設定してください。退場は短く、早めにします。そうしないと、古いテキストと新しいテキストが重なります。
3. あらゆる動きにスプリングを使い、オーバーシュートはごくわずかにします。 弾むようなイージングは禁止です。閉形式の減衰スプリングのステップ応答のみを使ってください（technique を参照）。
4. 先行端と後続端には異なるスプリングを使い、伸びる動きを作ります。 タブインジケーター、トグルノブ、リキッドピルなどでは、先行端を後続端より先に動かします。
5. あらゆる変化は、実際のクリックやドラッグをするカーソルで駆動します。 ドラッグは直接操作です。押し続けている間は、カーソル位置から値を計算し、離すとその時点の位置からスプリングで戻します。製品のエージェント自身がカーソルになってもかまいません（グラデーションのマルチプレイヤーカーソル、名前ピル、短い動きの軌跡、速度に応じた傾き、クリック時の押し込みスケールと波紋）。ユーザーのカーソル（「You」）から受け渡すこともできます。
6. 各状態がフレーム全体を占めるようにカメラをズームします。 何もないフレームは不具合です。コンテンツをフレームに収めてから、プッシュ、ウィップ、または引き戻しを行います。引き戻しで規模を見せます（メールひとつから数百件のグリッドへ、投稿ひとつから壁一面へ）。
7. タイミングは音楽優先です。 約120 BPMを目安にし、numpy で曲を解析してビートグリッドを作り、ダウンビートで始めます。曲の使用範囲を調整し、ドロップが製品の大きな見せ場に重なるようにします。すべてのビートで何かを起こします。スネアのビルドではタイピングを32分音符に合わせ、強打の動きではビートから8分音符、16分音符へと加速させます。
8. UI サウンドはすべて合成し、キックのピークのグリッド上で、実測したピーク位置に合わせて配置します。
9. ループ： ループ再生では、最終フレームを最初のフレームと完全に同じにします。カーソルの位置と速度も含みます。そうでないとループ時にカクつきます。

見た目

• パレット： ブランド独自のデザインシステムを使います（Cheerful の場合：暖色系のオフホワイトのキャンバス、ブランドのグラデーション #B04ADC → #E35C91 → #FF7247 → #FFB21E、ライラック／ピーチの光だまり、インク #111827）。「黒に紫をひと色加えたもの」にはしません。UI フォントはすっきりしたものをひとつ使います。
• 禁止事項（当初のブリーフに記載。Chan が覆さない限り、引き続き有効）： 弾むようなイージング、パーティクルの爆発、グロー、UI の装飾部分へのグラデーション、アイコンの線幅の不一致、間延びする時間、テンプレートのような見た目。

コンテンツ

• 実データを使います。 Chan：「データベースにアクセスできます。画像を選ぶだけでなく、創造性を発揮できます。」実際の、根拠を示せる数値を読み取り専用で取得します（リーチしたクリエイター数、送信したギフト数、追跡した投稿数／閲覧数）。それらをローリング式のオドメーターとして表示します。クリエイター、ブランド、メッセージの短い物語は創作して構いませんが、大きな数値は実データを使い、レポートでどちらが実データか創作かを明記します。
• 顧客ロゴは一つずつ、ドン、ドン、ドンと表示します — ウェブサイト風の「信頼されている企業」ロゴ一覧にはしません。実際にキャンペーンを実施したブランドだけを使い、表示のたびに一つの図形のサイズと色を変えます。
• ライセンス取得済みのメディアのみ使います。 各アイテムのライセンスを確認した、フリーライセンスのソースからのストック動画／静止画を使います（Mixkit には制限付きのアイテムも混在しています）。手っ取り早く済ませるために、プロダクト自体のマーケティング画像を使ってはいけません。
• 本人が気に入った要素は残します： Cheerful では、見出しのイントロ、入力されるブリーフ、検索結果が並ぶディスカバリー画面、ワードマークでの締めくくりの評価が高かったため、バージョン間で印象的な見せ場は維持し、それ以外を改善します。

プロセス

1. まず入力を確認します（すでに提示されている場合、または「お任せ」と言われた場合を除く）：形が変化していく 8〜12 個の状態、カラーパレット（白黒、アクセントカラー 1 色、またはブランドシステム）、ロイヤリティフリーの約 120 BPM の楽曲です。「ディレクターズカット／ディレクターにお任せ」の選択肢を提示します — たいてい本人はこちらを選びます。
2. コードを書く前に、ビートグリッド上で状態リストを提示します（小節／拍の表：何が起きるか、どの要素が何に変化するか、どの音が鳴るか）。
3. 制作します：すべてのスタイルを seek(t) 内で時間に基づいて計算する HTML ファイルを 1 つ作ります — CSS トランジション、タイマー、フレーム間の状態保持は使いません。
4. 全体をレンダリングする前に、各拍につき 1 フレームをレンダリングし、コンタクトシートを作成します。グリッドからずれている、窮屈、空白が多い、読みにくい、重なっている箇所があれば修正します。その後、トランジションを ±0.1 秒の範囲で確認します。
5. 全体をレンダリングします。Playwright のサブフレーム → ffmpeg の tmix モーションブラー → 60 fps の H.264 ＋ミックスの順に処理します。
6. MP4 自体を検証します（1 秒ごとのストーリーボード、継ぎ目やグリッチがないかフレーム差分をスキャン）。tailnet 経由で公開し、リンク、コンセプト、シーン一覧、実データと創作データの区別、決定事項、注意事項を報告します（音声は未聴取です — その旨を明記します。ロゴ／肖像の使用許可についても記載します）。

時間を浪費する落とし穴

• カメラで拡大縮小する要素には will-change を絶対に指定しません — テキストがぼやけて表示されます。
• スプリングはイベント発生時に開始します。時刻 T に目標位置へ 到達 させるには、整定に必要な時間だけ早く指示を出します。
• 不透明度をゼロにする hide() は、描画関数で元に戻さないと、要素が非表示のままになります。
• オドメーターではプロポーショナル数字が跳ねます。各スロットを最終的な字形に合わせてサイズ調整し、縦方向だけをクリップします。
• VPS では、ディスク容量に余裕がありません（4 秒単位でレンダリングし、PNG を削除します）。Chromium は earlyoom が最初に終了させるプロセスです（自動で再試行し、再起動して、完了したら強制終了します）。/tmp/inspect.py が標準ライブラリのモジュールを隠してしまうため、プロジェクトディレクトリから Python を実行します。PreToolUse フックは、一部の ffmpeg のグロブ文字列をブロックします。

出力

serve <dir> で公開する deliver/ フォルダーに成果物を納めます（tailnet URL を使い、localhost は使いません）：MP4、1 秒ごとのストーリーボード、主要な静止画、比較用の前バージョン。