launch-video
プロダクトローンチ動画をコード（Remotion → MP4）として生成します。このスキルは シーンライブラリ + ワークフロー であり、固定テンプレートではありません。 プロダクトごとに語るべきストーリーは異なります。CLIツールのストーリーはターミナルで起こり、 SaaSアプリのそれはブラウザで、モバイルアプリのそれはスマートフォンで、 ライブラリのそれはエディタで展開されます。 まずは「このプロダクト」のためのアークを設計し、その後シーンパレットから組み立てます。 tdocの例の形にプロダクトを無理やり当てはめないでください。
絶対的なルール
コードに触れる前にストーリーアークを設計すること。 尋ねてください：このプロダクトは 何をするのか、ユーザーは誰か、単一の「aha」モーメントは何か？ ビートリスト（5～9ビート、各ビートのフレーム数は@24fps）を作成し、ユーザーと確認します。 その後でのみシーンを組み立てます。ローンチ動画はストーリーであり、機能のツアーではありません。
ワークフロー
- プロダクトを理解する。 それは何か？ユーザーはどこで操作するのか （ターミナル / ブラウザ / 電話 / エディタ / 混在）？ ビフォー→アフターは？誰かに欲しいと思わせる瞬間は？
- ビートリストを書く。 各ビート：名前、画面に表示される内容、 フレーム数。合計 ≈ 30～45秒（720～1080フレーム）。 AskUserQuestionを使用して構築前にユーザーに確認します。
- パレットからシーンを選ぶ（下記）。ほとんどの動画は1～3種類の シーンタイプとオプションのアウトロを使用します。すべてのタイプが必要なわけではありません。
- アセットを集める。 モックアップよりも実際のスクリーンショットを優先。
<project>/public/に配置します。UIを鮮明なコンポーネントとして再作成するのは、 スクリーンショットが低解像度だったり、1:1のアニメーションが必要な場合のみ。 - リポジトリの下にプロジェクトをスキャフォールディングする
（
examples/tdocを開始用スケルトンとしてコピー — 内容ではなく構造）か、 隣接ディレクトリに作成します。ビート期間の合計を継続時間とする単一の<Composition>を 配線し、ビートごとに1つの<Sequence>を持たせます。 - ビートを構築し、SFXを追加し（
scripts/make-sfx.sh <public>）、 レンダリングし、変更されたすべてのビートを視覚的に確認し、反復します。 - 検証ループが合格した後にのみMP4をハンドオフします。
シーンパレット（src/）
ライブラリからインポートし、ストーリーに必要なものだけを組み立てます。
| シーン | 用途 | 主なプロパティ |
|---|---|---|
Terminal | CLIツール、エージェント、開発ツール — シェル内のストーリー | lines（入力されたプロンプト、ツール呼び出し、結果、アラート、URL）、spinner、title。入力されたプロンプトの先頭にあるスラッシュコマンド/slash-commandは自動的に太字で強調表示されます。 |
BrowserWindow | Webアプリ、ドキュメント、ダッシュボード、SaaS | 子要素としてスクリーンショット/HTML、`chrome="bar" |
MobileFrame | モバイルアプリ | スマートフォンのシェル。子要素としてスクリーンショット/UI |
CodeEditor | ライブラリ、SDK — 「これを書く→あれを得る」 | code行、タイプ表示 |
Outro / LogoCard | サインオフ（オプション） | 見出し/小見出し、または回転するロゴ+ワードマーク |
WaveBackground | どのウィンドウの後ろでも落ち着いたブランド背景 | 色 |
Cursor | アーティファクト/リンク/ボタンをクリック | 開始/終了座標、clickAt |
PixelPet | ウィンドウの上のフレンドリーなマスコット | crown/baseのピクセル行、color。目は上下に動きます（白目なし — 小さくてもきれいに読めます）。 |
Caption | ウィンドウの下の一行キャプション | at、text |
これらは独立しています。ライブラリのローンチは単にCodeEditor + Terminal + LogoCardかもしれません。
SaaSのローンチはBrowserWindow + Outroかもしれません。
ペーシングとトランジションのルール（苦労して学んだこと）
- @24fps。 ビートの長さはフレーム数で指定。合計時間はタイトに保つ： 静的なホールドではなく、アクションを短縮。ビートがほとんど静止フレームの場合は短くします。
- シャープなトランジション。 シーン間のクロスディゾルブは最大5フレーム； ビートのフェードインは約4フレーム。「スナップ」して開くウィンドウ（スケール0.35→1を約12フレームで）は、 ゆっくりした30+フレームのスケールよりも見栄えが良い。
- 可能な限り1つの連続したビートに。 「入力→クリック→結果」を1つのSequenceに統合し、 アクションの途中でフラッシュ/カットが入らないようにします。
- カーソルは移動して押すこと。 テレポートさせず、ターゲットにアニメーションし、 クリック時にスケールダウン。すべてのクリックに、押したフレームでクリックSFXを付けます。
- クロームを二重にしない。 スクリーンショットにすでにヘッダーがある場合は、
chrome="none"を使用。焼き込まれたウィンドウバーの上にさらに重ねない。 - ブランドカードで挟む。 1つのブランドカード（ロゴ/マスコット + 製品名
- 一行のバリュープロップ）をオープニングとクロージングの両方のフレーム（それぞれ
≈1.5～2.5秒）で再利用。ストーリーをフレーム化し、別途アニメーションロゴの
エンドカードを用意するよりもコストが低い。すべてのビートオフセットは
at()アキュムレータで 駆動し、イントロカードを追加すると自動的に下流（SFX含む）のすべてをシフトします。
- 一行のバリュープロップ）をオープニングとクロージングの両方のフレーム（それぞれ
≈1.5～2.5秒）で再利用。ストーリーをフレーム化し、別途アニメーションロゴの
エンドカードを用意するよりもコストが低い。すべてのビートオフセットは
オーディオルール
scripts/make-sfx.sh <project>/publicを実行してsfx-typing.mp3+sfx-click.mp3を合成します。これらはgit-ignoredな生成アーティファクトです — 常に（再）生成し、新しいクローン後にそれらが存在することに依存しないでください。- タイピングSFXは人間が入力している間のみ再生（プロンプト、コメント）。 自動ストリーミング/エージェント出力では決して再生しない。
- クリックSFXは各カーソルクリック（リンク、ボタン、アーティファクト）の押したフレームで
発火。
<Sequence from>をクリックフレームに一致させます。 - オーディオは正確なフレームウィンドウにスコープされた短い
<Sequence>内で<Audio src={staticFile(...)} volume={0.3}>を使用してレイヤー化します。
検証ループ（ハンドオフ前に必須）
PNGを読み取る画像プロキシはOCRノイズが多いです — 位置揃え/色の確認には テキスト記述ではなく、ピクセル測定（Python/PIL/numpy）を信頼してください。
scripts/verify.sh <entry> <CompId> <public-dir> <frame> ...は 静止画を取得 + オーディオウィンドウを表示。プロジェクトのpublic/を<public-dir>として渡します（ない場合は-）—--public-dirルールは レンダリングと同じで、そうしないと静止画のアセットが404になります。- 各静止画を読みます。変更されたすべてのビートについて確認：内容が正しいこと、
overflow:hiddenによるクリッピングがないこと、トランジションが適切であること、 カーソルがターゲットにあること、SFXウィンドウが表示されるクリック/タイピングフレームと 一致していること。 - 修正 → 再レンダリング → 再検証。インテントで「完了」と報告せず、実際のフレームを確認します。
レンダリング
npx remotion render <entry> <CompId> out/<name>.mp4 \
--public-dir=<project>/public
# 静止画： npx remotion still <entry> <CompId> out/x.png --frame=N \
# --public-dir=<project>/public
<entry> はプロジェクトの src/index.ts（registerRoot を呼び出します）。
エントリがサブディレクトリにある場合は常に --public-dir を渡します —
そうしないと staticFile() はリポジトリルートの public/ を基準に解決され、
アセットが404になります。
リファレンス例
examples/tdoc/ は正規の実例です（約39秒）：ブランドカードのイントロ、
エンジニアがエージェントに /tdoc … プロンプトを入力し（ターミナル、スラッシュコマンド自動強調表示）、
リンクを取得、ドキュメントが開き（BrowserWindow）、チームメイトがコメント、
エージェントがv2をリリース、そして同じブランドカードで締めくくります —
実際のタイピングにスコープされたタイピング/クリックSFXと、目をぱちぱちさせるPixelPetがあります。
ライブラリの使用法を確認するために読んでください。そのストーリーをコピーしないでください。
新しいプロダクト独自のアークを構築してください。