起動ビデオ

あなたはディレクターであり、製品のストーリーテラーです。編集者は二の次です。すべてのショットは、視聴者を「なるほど、欲しい」に一歩近づけることで、その存在価値を証明しなければなりません。

ビデオは単一のクロックを持つウェブページです。window.seek(T) でグローバル秒 T を描画します。Playwright が 30fps でスクリーンショットを撮り、ffmpeg がフレームをボイスオーバーと音楽とともにエンコードします。ウォールクロック時間に依存しないため、どのフレームも単独で再レンダリングできます。これにより、他の部分に影響を与えずに 1 つのシーンを修正できます。

スターターファイルは template/ と scripts/ にあり、README に実行方法が説明されています。

1. まずストーリー（画を描く前に）

スクリプトを A、B、C のようにキー付きの文で書きます。各文が 1 つのキャプションと 1 つのビートになります。次の 4 ビート構造を使用します：

フック（0〜8秒） 視聴者の言葉で課題を挙げます。ロゴの壁や「ご紹介します」は不要です。最初の 8 秒で、残りを見るかどうかが決まります。
製品の動作（8〜45秒） 1 つの問題、それを解決する機能、そして結果。実際の製品が実際のことをしているところを見せます：プロンプトを入力し、回答を得て、公開をクリックする。機能のパレードは避け、最大 4〜5 の機能に絞ります。
違い（45〜75秒） アーキテクチャまたは統合ストーリーを、できれば動く図で示します。誰が何をするかを説明します。例：「私たちは X を担当。Stripe が決済と税金を担当。」
オファーとクローズ（最後の10〜15秒） 価格またはプランを示し、1 つのブランドラインで終えます。最後のラインは短く記憶に残るものにします。

合計 80〜95 秒を目指します。30 秒の広告カットと 9:16 カットは、後で同じタイムラインから作成できます。

2. ビジュアルルール（厳格な制約）

ブラウザのクロームは表示しない。 タブ、URL バー、ブックマークは絶対に表示しません。製品画面はクリーンな HTML カードとして再構築し、実際の録画は参考としてのみ使用し、すべてのデータは匿名化します。
製品画像は浮かせる。 角丸（16〜18px）とソフトな長い影をつけます。カードがフレームを埋め尽くさないように余白をたっぷり取り、幅は最大でも約 75% にします。
製品画像の上に文字を重ねない。 説明は UI の横のコールアウトか、画像の下のキャプションに入れます。スクリーンショットの上には決して置きません。
アクセントカラーは暗い背景にのみ使用する。 製品画像には決して使用しません。ブランドラインにアクセントカラーが必要な場合は、エンドカードを暗いブランドカラーの背景に配置します。
すべてを単一の色相にしない。 1 つか 2 つの補色のポップを使用します。たとえば、アラートドットには #C8323C の赤、パートナーブランドには紫を控えめに使います。
一度に 1 つの領域に焦点を当てる。 機能を強調するには、カーソルをそこに移動し、ダブルクリックし、カメラがズームインし、UI の残りはグレーアウトまたはぼかします。
コールアウト は小さな白いピル型で色付きのドットが付き、実際の DOM 要素に固定されます。わずかにオーバーシュートしながら現れ、画面上には最大 3 つまでで、ショットが終了する前に消えます。
背景： ゆっくりとドリフトする、ぼかしたブランドカラーのブロブに 6% のグレイン。落ち着いており、製品と競合しないようにします。バナーデザインをそのままコピーしないでください。

3. モーション語彙

ショット遷移 = ブラーモーフ。 ショットはスケール 0.92、ブラー 18px で入り、約 0.7 秒かけてイーズアウトでブラーが 0 になります。出るときはスケール +5%、ブラー 18px、不透明度 0 で 0.55 秒かけてフェードアウトします。ショット間のオーバーラップは約 0.1 秒。ピクセルワイプや布引きなどの凝ったトランジションは避けます。安っぽく見えます。
スロープッシュイン 各ショットで 3〜5% ズームインし、静止状態をなくします。
要素の出現 300〜650ms のイーズアウト、80〜150ms のずれ（stg()）で行われます。
カーソル： 滑らかなイーズ移動、クリック時の押下アニメーション（スケール 0.82、120ms）、クリック前の約 0.3 秒のホールド。
Dock イントロ（0〜2.5秒）： 本物の Apple アプリアイコン（手描きではなく iOS/macOS UI キットから取得）と、中央にあなたのアプリアイコンを配置した、曇りガラスの macOS Dock。アプリのスロットが拡大し、カメラがそれに向かってズームし、カーソルがクリックし、アイコンがバウンスして実行ドットが表示され、シーンがブラーモーフでアプリに移行します。
テンポ： 各ビートに呼吸の余地を与えます。VO の文の後、次のアイデアの前に 0.8〜2 秒の視覚的ホールドを残します。急いでいると感じたら、それは急ぎすぎです。ビジュアルをカットする前に、VO の間隔を再調整します。

4. オーディオ

VO： 創業者の ElevenLabs ボイスクローンを使用して、スクリプト全体を 1 テイクで生成します。文字起こし（Scribe）を行い、単語レベルのタイミングを取得した後、再スペーシングします：文間の無音部分でカットし、ビートに余裕が必要な場所に追加の無音を挿入します。文の開始時間と終了時間を timeline.js に TL={A:[開始,終了,テキスト],...} として書き込み、すべてのアニメーションをハードコードされた秒数ではなく TL に基づいてキーイングします。
1 行を変更するには、 その行だけを生成し、無音部分でスプライスし、対応する TL エントリを更新します。
音楽： インストゥルメンタルのバックグラウンドミュージック。文字起こしが空であることを確認して、ボーカルがないことを確認します。音量 0.3 でミックスし、VO の下でサイドチェインダッキングをかけ、最後の 3〜4 秒でフェードアウトします（scripts/mix.sh 参照）。

5. ウェブサイトからアニメーションを引き出す

スクロール駆動のサイトアニメーションは、フレームごとにキャプチャできます（scripts/capture-scroll.js）：

ナビゲーション、クッキーバナー、セクションのテキストを非表示にして、ビジュアルのみを残します。
高密度にキャプチャ し、4px のスクロールステップを使用します。16px ステップを 10 秒で再生すると約 6fps になり、カクカクに見えます。
キャンバスでは、隣接するフレームを小数インデックスでブレンドし、サブフレームの滑らかさを実現します。
キャプチャを並列ブラウザで分割する場合は、最初に同じ開始位置からスクロールして各ブラウザをウォームアップします。スクロールアニメーションはステートフルであるため、ページの途中で新しくロードすると継ぎ目でジャンプします。
連続フレーム間の平均絶対差をスキャンして継ぎ目をチェックします。中央値を大幅に超えるスパイクはジャンプを意味します。

6. パイプライン

スクリプトを書き、VO を生成し、文字起こしをして再スペーシングを行い、timeline.js を書きます。
scenes.js でシーンを構築します。各シーンは S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}}) です。
node scripts/preview.js page.html out.png T ... で主要なビートの静止画を確認します。
scripts/render-parallel.sh でレンダリングします。変更した時間範囲のみを再レンダリングします。
scripts/mix.sh でミックスし、scripts/encode.sh でエンコードします（libx264 crf 17、yuv420p、AAC 192k、faststart）。
QA： エンコードされた mp4 からすべてのシーンのフレームを取得し、ブランドライン、コールアウト、継ぎ目をチェックします。送信前に 1 回フルスピードで聴きます。

7. 苦労して学んだ落とし穴

レンダリングは、ワーカーを待機する単一の追跡されたバックグラウンドジョブとして実行する。 切り離された nohup ジョブは強制終了され、部分的なフレームを残します。
ページごとに数百の大きな画像をプリロードすると、Chromium が「Target crashed」でクラッシュする可能性がある。 ページが大きな画像シーケンスをプリロードする場合、最大 2 つの並列ワーカーのみを使用します。エンコード前に、常にフレーム数とワーカーログを再確認します。クラッシュしたワーカーは、古いフレームを静かに残すからです。
クラス名がアプリの CSS と衝突する可能性がある。 たとえば、アプリのスタイルシートの .dark がカードを 1080px の高さにしたので、シーンクラスにはプレフィックスを付けるか、珍しい名前を使用します。
コールアウトはショットの終了時間にクランプする必要がある。 そうしないと、次のシーンに残ります。
コールアウトで技術的な主張を誇張しない。 「0 ms」ではなく「No API round trip · decided in-process」と書きます。
アウトロの行を変更するときは、エンドカードに同じ単語がすでに表示されている場合は、そのキャプションも削除します。

Launch Video（起動ビデオ生成スキル）