Launch video

小さなモーションスタジオが行うように、ローンチビデオを作成します。まず、ビデオの目的を決定し、拍ごとに計画します。次に、すべてのフレームをコードで構築するため、任意のパートを変更して1分で再レンダリングできます。

結果は、実際の製品の短編フィルムとなります。UIをHTMLで再構築し、ビートグリッド上で動かし、音楽に合わせてカットし、毎秒60フレームでモーションブラーを適用します。

必要なもの

Node 18以上、libx264を含むffmpeg、Python 3.9以上。Pythonスクリプトは標準ライブラリのみを使用します。
PlaywrightとChromium。videoフォルダにインストール：npm i -D playwright && npx playwright install chromium。
このスキルの scripts/ と assets/template.html。

コマンド内で、$SKILL はこのスキルのフォルダ（例：~/.claude/skills/launch-video）です。シェルで一度設定します：SKILL=~/.claude/skills/launch-video。コマンドはvideoフォルダから実行します。

プロセス

フェーズを順に進めます。各フェーズで出力されたものが、次のフェーズで使用されます。

フェーズ	出力	参照先
1. 概要（Brief）	`brief.md`	references/1-brief.md
2. フォーマット	フォーマット、長さ、アスペクト比、プラットフォーム（brief内）	references/2-formats.md
3. ストーリー	`beatmap.md`	references/3-story.md
4. ルック	スタイルノート（brief内）	references/4-look-and-motion.md
5. 構築	`film.html`：ユーザーの承認を得るための4つのキースチル、次にフィルム全体	references/5-build.md, assets/template.html
6. 音楽とサウンド	曲のオプション、カットポイント、ミックスされたMP4	references/6-music-and-sound.md
7. レンダリングとチェック	MP4とチェック結果	references/7-render-and-check.md
8. 納品	最終ファイル、カットダウン、投稿メモ	references/8-platforms.md

フェーズに到達したときに参照資料を読み、一度にすべてを読まないでください。

1. 概要（Brief）

製品が何か、ビデオの対象者、覚えておくべきこと、そしてマジックモーメント（製品がその役割を目に見えて果たす瞬間）を把握します。まず、リポジトリ、サイト、ドキュメントを読みます。次に、ユーザーに一度に最大5つの質問をします。それ以外については、デフォルトを概要の未回答質問（open questions）に書き込み、続行します。brief.md を作成します。

2. フォーマット

製品タイプ、目的、プラットフォームから、ビデオの種類（ティーザー、ローンチフィルム、デモ、説明ビデオ、フィーチャードロップ、ファウンダービデオ、ハッカソンデモ）を選択します。長さとアスペクト比を設定します。ソフトウェアの場合、15〜30秒のXおよびLinkedIn向けローンチフィルムが通常のデフォルトです。アドバイスが競合する場合は、ユーザーの言葉が優先され、次にメインプラットフォームが優先されます。他のプラットフォームにはカットダウンを作成します。

3. ストーリー

固定テンポでビートマップを作成します。120 BPMでは1ビートが0.5秒になります。各ビートについて、何が起こるか、どの以前の要素から発展するか、カメラの動き、表示されるテキスト、聞こえる音を記述します。マジックモーメントを音楽のドロップに配置します。

4. ルック

製品自身のブランド（色、フォント、ロゴ、アイコン、コンポーネント）を使用します。デザイントークンとCSSを読みます。ブランドがない場合は、明るい2Dスタイルを使用します：暖かい白のキャンバス、ほぼ黒のUI、1つのアクセントカラー、1つのクリーンなサンセリフフォント、コード用のモノフォント。テキストはスマートフォンで読める大きさにします。

5. 構築

$SKILL/assets/template.html を video/film.html にコピーします。そのエンジンは維持し、フィルム部分を置き換えます。すべてのスタイルは seek(t) 内の時間に基づきます。CSSトランジション、タイマー、フレーム間の状態は使用しません。シェイプはフェードではなく、互いに変化します。

最初に4つのキーモーメント（フック、マジックモーメント、ペイオフ、エンドカード）を構築します。それらを静止画としてレンダリングし、ビートマップと一緒にユーザーに表示します。ここで承認を得てください。文章の変更は安価ですが、完成したシーンの変更は高価です。その後、残りを構築します。

6. 音楽とサウンド

フィルムのテンポに近い3〜4曲の候補を見つけます。それぞれに静かな部分と明確なドロップが必要です。ダウンロードする前に必ずユーザーに確認します。各曲を scripts/beats.py で測定し、scripts/loudness_plot.py を確認し、beats.py --around でドロップを確認します。速度 = 曲のBPM / フィルムのBPM でフィルムをレンダリングし、ビートが揃うようにします。次に、scripts/mux.py で各曲をカットし、ドロップがマジックモーメントに来るようにします。ユーザーに選択させます。クリック、ウィッシュ、ポップなどの実際の効果音を、最も大きなポイントに配置して追加します。

7. レンダリングとチェック

まず静止画をレンダリングし、次にビデオをレンダリングします：node $SKILL/scripts/render.mjs film.html --out out/film.mp4。その後、チェックを行い、結果をユーザーに示します。

scripts/pops.py は、1フレームだけ光るフレームを見つけます。0であるべきです。
scripts/contact_sheet.py --video は、0.5秒ごとにフレームを表示します。各タイルでフレーミング、テキストの途切れ、重なりを確認します。
ドロップのタイミングとラウドネス（-14 LUFS）を確認します。
スマートフォンサイズでミュートして視聴します。

8. 納品

各プラットフォームが必要とするマスターとカットダウンをエクスポートします（例：16:9、1:1、4:5、9:16）。ファイル、クレームとリンクを含む投稿テキスト、投稿前に確認すべき事項をユーザーに提供します。その後、ディレクターのようにメモを取ります（「中盤がだれる」「ズームがドロップに合うべき」など）、メモに関係する部分のみを変更します。

作業ルール

実際の製品、真実の主張。 製品の実際の名前、UI、言葉、データ形状を使用します。サンプルデータはもっともらしく、シーン間で合計が一致する必要があります。$120の注文が入った場合、合計は$120増えます。存在しない機能や裏付けのない数字を表示してはいけません。該当する場合は「ベータ」または「テストネット」と表記します。
ビデオごとに1つのメッセージ。 概要に3つのメッセージがある場合は、3つのビデオを作成するか、1つを選びます。
ダウンロード前に確認 音楽、効果音、映像素材をダウンロードする前に確認します。ファイル名、ソース、ライセンス、サイズを明記します。
自分の作業を確認してから表示する。 フェーズ7のチェックで、ユーザーが確認する前にほとんどの問題をキャッチします。結果は「良さそう」ではなく、数値で報告します。
好みが分かれる場合は選択肢を提示する。 特に音楽：3〜4つのバージョンをカットし、ユーザーに選択させます。
構造をコピーし、アートはコピーしない。 参照ビデオからペースとビート構造を借用することはできますが、キャラクター、アート、音楽、ブランドはコピーしないでください。

ビデオフォルダ

ユーザーが希望しない限り、ビデオは製品のソースツリーの外に置きます。

video/
  brief.md        beatmap.md
  film.html       assets/      （ロゴ、フォント、アイコン、スクリーンショット）
  music/          sfx/         （ダウンロード、ライセンスノート付き）
  stills/         out/         （レンダリング結果；使い捨て）
  package.json    node_modules/ （Playwright）

スクリプト

スクリプト	機能
`scripts/render.mjs`	静止画、またはモーションブラー付きの完全なMP4、並列ワーカーと`--speed`オプション
`scripts/contact_sheet.py`	静止画またはビデオフレームをタイル状に並べて、1枚の画像で確認できるシートを作成
`scripts/pops.py`	単一フレームのグリッチを検出
`scripts/beats.py`	曲のテンポ、ビートグリッド、ドロップ候補。`--around`で詳細確認
`scripts/loudness_plot.py`	曲のラウドネスをグリッドとドロップ候補と一緒にプロット
`scripts/mux.py`	音楽をヒットポイントにカット、効果音をピーク位置に配置、ラウドネスを設定

引数なしでスクリプトを実行すると、使用方法が表示されます。

コードで作る発表動画