Launch video
Renderer: launch-video-skills npmパッケージ。完全なシーン契約: https://github.com/anudeepadi/launch-video-skills#scene-contract
npx launch-video-skills setup: マシンごとに一度だけ実行（ヘッドレスChromium + Python音声パッケージ）。Node 18以上、Python 3.10以上、ffmpegが必要。初回の音声実行時にKokoroウェイト（約350 MB）とwhisper small.en（約480 MB）が~/.cache/lvkにダウンロードされます。npx launch-video-skills new <name>:launch-videos/scenes/<name>/index.htmlをスキャフォールドし、その横にlaunch-videos/kit/を作成します。npx launch-video-skills render <scene.html> [flags]:./out/に出力します。- Chromiumのダウンロードが停止する場合 →
export LVK_CHROME=/path/to/chrome-headless-shell（ローカルビルドでも可）。 - macOSでpython.orgのPythonがSSLエラーになる場合 →
export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())')。
良いローンチビデオと「AIスロップ」を分けるものはreferences/craft.mdにあります。ストーリーボードを作成する前に読んでください。
手順
- ライブプロダクトからのブランドと事実。 Playwrightでサイトを取得します。見出し、サブ見出し、機能名、サイト自身のサンプルコンテンツ（デモスレッド、プロンプト、コード、課題リスト）、CTAをそのまま記録します。フォントファミリー/ウェイト/レタースペーシングの計算済みスタイルと、背景/テキスト/アクセントのサンプルピクセルカラー（CSS変数は古くなる可能性があります）を読み取ります。ロゴのSVGと画像は
launch-videos/scenes/<name>/assets/に保存します。ライセンスが再配布を許可している場合のみサイトのフォントを使用し、それ以外の場合は最も近いバンドルフォント（Inter, JetBrains Mono, Space Grotesk）を使用します。指標、顧客、統合、UIを決して捏造してはいけません。何かが計画中/プレビューとマークされている場合は、除外するか、そのようにラベルを付けます。実際のUI例を取得できない場合は、停止してその旨を伝えます。ソースURLと日付をシーンの先頭にコメントとして記述します。 - スクリプト、次にストーリーボード。 各ショットはサイトのコピーから引用した1〜2行の短い行で、合計20〜40秒。話し言葉が異なる場合（ドット、頭文字語の場合）は
sayを使用します（例：say: 'Build A.I. agents'）。5〜6ショット、各ショット1つのアイデア：フック（2秒以内に製品または見出しを画面に表示）→ 最初の使用瞬間 → 実際のUIをHTMLで再構築した製品の動作（スクリーンショットではなく、サイト自身のサンプルから）→ 2番目の機能 → 3本柱または仕組み → CTAとロゴ。落ち着いたブランド：music.style: 'ambient'、ソフトなSFX（0.2〜0.6）。開発者ツール：'pulse'とビート。音声はオプションです。音楽のみのものはXで一般的です。 launch-videos/scenes/<name>/index.htmlを作成し、../../kit/kit.cssとkit.jsに対して記述します。スキャフォールドされたテンプレートから始めます。ショットにはdata-shot="id"をマークし、ハードコードされた--in/--outは使用しません。音声行はSCENE.voice.linesに記述します（key, shot, text/say, at/after,pauseビート）。ビートを音声にピン留めするには、data-on="key"、data-on="key:word"、data-edge="e"を使用します。SCENEを定義した後でK.layout()を呼び出し、K.at/K.end/K.shotからJSビートを導出します：タイピング速度 = テキスト長 / 読み上げ時間、キーワードでのカーソルクリック、同じ定数からのタイプ音の手がかり。onFrame(t)はtに関して純粋でなければなりません。JS変換はCSSアニメーションクラスを持たないラッパーに適用します。大きなfilter: blur、backdrop-filter、全画面ブレンドモードは使用しません。- レビューループ。
npx launch-video-skills render launch-videos/scenes/<name>/index.html --sheet 1を実行します。すべての<- ASR heard:行は発音ミスの可能性があります：sayで再綴りして再確認します（whisperは時々正しい音声を誤認識します；人間が聞くためにフラグを立てます）。シートPNGを確認：忙しい画像の上のテキスト、小さなテキストの可読性、空のフレーム、トランジション中の衝突、ショット終了前に終わるタイピング、壊れたシンタックスハイライト。フル解像度チェックには--stills t1,t2。一発で仕上げるのではなく、味見ノート（「速すぎる」「何が起こったか不明」）で反復します。 - レンダリングと確認。
npx launch-video-skills render launch-videos/scenes/<name>/index.html --workers 4を実行します。その後：ffprobe: h264 + aac、期待される長さ。volumedetect: 平均約-19〜-17 dB、最大-1 dB未満。- 同期：faster-whisper small.enの単語タイムスタンプで最終MP4を文字起こし；各行の最初の単語がログに出力されたタイムラインから約0.2秒以内。キーワードが視覚的なビートに合っていること。
- 連続性：ワーカー境界をまたいでフレームを比較（フレーム数 / ワーカー数）。
- 納品。 MP4のパスを渡します。以前のカットを決して上書きしないでください（
mv -nまたは新しい--outを使用）。音声と音楽は合成されており、耳でチェックされていないことを率直に伝えます。「1プロンプトで作られた」という主張を避けるポストコピーを提供します。有料音声（ElevenLabs、OpenAI、Google）はパッケージ内のlib/tts.pyでの交換です；ユーザーがより人間らしい読み上げを望む場合のみ言及します。