ティーザー動画
ティーザー動画は、1つの機能を複数のビートで紹介し、各ビートは1つの明確な焦点を持ち、音楽に合わせて展開します。すべての画面は製品の実際のスクリーンショットです。動きはカメラ、スクリーンショットから切り抜かれた行がそれぞれの位置に着地する様子、そして音楽に合わせたカットによって生まれます。動画全体はコード（1つのHTMLページと1つのタイミングテーブル、HyperFramesでレンダリング）であるため、新しいキャプチャ、キャプションの変更、異なる音楽クリップはすべて再実行で対応します。
担当者はセンスを指示し、数回の反復を行います。フルレンダリング前にコンタクトシートを表示し、すべてのレンダリングを保存し、何を変更したか、その理由を書き留めてください。references/taste.mdのデフォルト設定から開始してください。これらは最初のレビューで収束した設定です。
セットアップ
- Node 22+とnpx（HyperFramesは
npx [email protected]で実行。インストールは不要）、ffmpegがPATHに存在すること（HyperFramesはスナップショットとレンダリングにも必要）、uv（Pythonツールは自身の依存関係を宣言）、そして製品のプロジェクト内にPlaywrightとChromiumがキャプチャ用に必要。レンダリングはCDNからGSAPとInterフォントを読み込むため、ネットワーク接続が必要です。 SK=<このスキルのディレクトリ>/scripts。- リポジトリの追跡ファイル外のフォルダ（gitignoreされた
.logs/<video>/、またはスクラッチフォルダ）で作業します：
<work>/
assets/<theme>/ キャプチャとboxes.json（キャプチャパスごと）
capture/ この製品のキャプチャスクリプト
video/ index.htmlとtimeline.js（例からコピー）、assets/にはキャプチャ、ブランドアイコン、音楽
NOTES.md すべてのバージョンと変更理由、再構築コマンド
1. 概要
1回の短いやり取りで、デフォルトを提示しながら確認します：
- 長さ：特に指示がなければ10秒。ハードキャップを超えない範囲で、ビートを削減し、動きを速くしない。
- ビート：3つまたは4つ。各ビートは1つの画面で1つのジョブ（URLを入力する、見つかったものをレビューする、結果を確認する、ブランド）。各ビートには2～3単語のキャプションが付き、数字は使用しません。
- 一目で読み取れるサンプルデータ：よく知られたサイトを使用し、結果（競合他社名、ファビコン）が認識できるようにします。
- ルック：製品独自のテーマトークン（ティーザーではダークモードが適切なデフォルト）と、実際のブランドアイコン。アイコンは描いたものではなく、製品のライブウェブサイトから取得します。
- 音楽：ファイルと、任意の10秒でよいかどうか（ステップ5を参照）。
- 各画面の最新のUIが存在するブランチまたはワークツリー。キャプチャ前にリモートより遅れていないか確認します。
2. キャプチャ
1440x900、2xで実際のスクリーンショットを$SK/capture.mjs（narrated-videoと同じヘルパー）を使用して取得：入力されたものはタイピングフレーム、カメラがパンするものは高さ2400pxのキャプチャ、シーンがフレームする、行を切り抜く、またはクリックするすべての要素は測定済みのボックス。ダークモードの場合はcap.page()に{ colorScheme: 'dark' }を渡します。UIを描画したりピクセルを編集したりしないでください。アニメーションフレームのフリーズや、リクエストコストをかけずにローディング状態をキャプチャする方法など、詳細はreferences/capture.mdを参照。使用前にすべてのキャプチャを確認します。
3. 構成
examples/openseo-ai-visibility/video（index.html、timeline.js）を作業フォルダにコピーし、キャプチャ、ブランドアイコン、音楽をvideo/assets/に配置し、timeline.jsを書き換えます：タイミングテーブル、キャプション、パレット、キャプチャパスと高さ、測定済みボックス、各シーンのカメラキー、ポインター。index.htmlはそのファイルからすべてのシーンを構築します。行は測定済みボックスを使用してキャプチャから切り抜かれます。各要素の仕組みと重要な数値についてはreferences/composition.mdを参照。
4. ドラフトと確認
cd video
npx --yes [email protected] lint # エラー0を確認
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end # snapshots/に出力
スナップショットは数秒で完了するため、ドラフトレンダリングの代わりに使用します。すべてのシーンの開始、クリック、キャプションの登場、各ディゾルブの中間をスナップショットし、確認します（各実行でコンタクトシートも出力）：フレームごとに1つの焦点が中心にあること、キャプションが焦点と重ならないこと、ページがフラットなときに空白のページ端がないこと、行の表示が終わった時点で欠けている行がないこと。その後、各シーンのフル解像度フレームでテキストが鮮明であることを確認します。
5. 音楽
uv run $SK/beats.py song.mp3 # テンポ、秒ごとのラウドネス、すべてのビート
uv run $SK/beats.py song.mp3 --window 51.9 10 # 候補クリップのビデオ時間内のビート
クリップを選択し、その開始時間をindex.htmlの<audio>要素に書き込み、ビート時間をタイミングテーブルに書き込み、カットをそれらに合わせます：ドロップのメインクリック、各シーンチェンジをビートに、ロゴを最も強いビートに。クリップの選択とマッピングについてはreferences/music-sync.mdを参照。
6. レンダリングと検証
npx --yes [email protected] render -o renders/<video>-vN.mp4 --fps 60 --crf 14 \
--video-frame-format png --experimental-fast-capture=false # 10秒の動画で約15秒
uv run $SK/verify-sync.py renders/<video>-vN.mp4 <計画したビート時間...> # すべてのビートが1フレーム以内、そうでなければ終了コード1
uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <時間...>
レンダリングにはバージョン名を付け、すべて保存します。担当者が比較します。共有用の静止画（SNS画像、サムネイル）は選択した瞬間の4Kスナップショット：npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stillsで3840x2160のPNGが出力されます。
7. レビューと反復
mp4のパス（および開き方）、ビートとその時間、リクエストと異なる点を伝えます。各ラウンドをNOTES.mdに記録します。サンプル事例の最初のバージョンは7ラウンドを要しました。各ラウンドの変更内容はexamples/openseo-ai-visibility/NOTES.mdにあります。
厳格なルール
- 実際の画面のみ。行の表示中は、テーブルの背景（キャプチャからサンプリング）で行が一時的に覆われることがありますが、行が着地した後はフレームはキャプチャのままです。
- レンダリング前にキャプチャに秘密情報や個人データ（キー、メール、他人の名前、localhost URL）がないか確認します。
- 音楽とキャプチャは担当者のマシンに留め、指示がない限り公開しません。
- 製品のビルドやプレビューによってリポジトリ内で再生成される追跡ファイルは、元に戻します。
最も時間を浪費するミスはreferences/gotchas.mdにまとめられています。