Vel-Labs/app-demo-video

アプリデモビデオ

コアアイデア

華やかさはアプリに宿る。ダークでシネマティックなUIを構築し、それがティックし、パルスし、実際の結果を発表するようにします。そしてそのUIを録画し、編集で控えめなキャプションバー、パンチイン、タイポグラフィックなタイトルカードとエンドカードを追加します。

コンテンツがまだアプリでない場合（パイプライン、スコア付きデータセット、コストモデル、CLIなど）、まずは小さなカメラ対応フロントエンドとして立ち上げます（FRONTEND_STYLE.md と theme.css を参照）。タイポグラフィックなスライドやビデオモデルに直接飛びつかないでください。

デモを動画生成モデル、画像生成モデル、またはTTSで生成しないでください。タイトルカードとエンドカードはタイポグラフィです。デフォルトの映像は無音です。サウンドが必要という指示がない限り、ストックミュージックやナレーションを追加しないでください。

3つのカット（オーバーレイキャプション vs. スライドデッキ vs. ライブセッションの予約バー）の実際の匿名化された例は REFERENCE_CASE.md にあります。

アセット

すべてのパスはこのスキルフォルダからの相対パスです。

• FRONTEND_STYLE.md — デザイントークン、コンポーネントパターン、コピーボイス、モーション仕様、録画前チェックリスト
• theme.css — ドロップインCSS変数、オーロラ/ガラス/グロー、キーフレーム
• tailwind-theme.css — Tailwind v4 @theme スニペット
• ./record_demo_template.py — パラメータ化されたPlaywrightレコーダー
• ./edit_demo.py / ./edit_demo.sh — タイトル、キャプション、パンチイン、エンドカード、エンコード
• example_timeline.json — エディターが読み取るビートリスト
• REFERENCE_CASE.md — 匿名化された実際の例と3つのカットからの教訓

ビジュアルスタイル（クイックリファレンス）

アプリ内テーマ（FRONTEND_STYLE.md と theme.css にも記載）:

役割	16進数
ページインク	#05060A / #0A0C14 / #11131F / #1A1D2E
本文テキスト	#E5E7F0
シアン（スコープ内/ライブ）	#22D3EE / #67E8F9
バイオレット（高負荷/有料エンジン）	#A855F7 / #A78BFA
フクシア（グラデーション端）	#F0ABFC
エメラルド（一致/完了/合計）	#10B981
ローズ（脅威/ハードストップ）	#F43F5E
アンバー（ギャップ、仮定、未承認）	#F59E0B
ゴールド（達成バースト）	#FBBF24

オーロラウォッシュ、フェードする48pxグリッド、ガラスカード、色分けされたグロー。UIにはInter、クロックとフィードにはJetBrains Mono、表形式の数字を使用します。フォントを読み込んでください。テーマで名前を指定するだけでは不十分です（theme.css にインポートが含まれています）。ヒーローは font-black tracking-tight で約48～60px、1つの単語が #67E8F9 → #A78BFA → #F0ABFC のテキストグラデーションになります。キッカーは11～13pxの大文字で、0.14～0.25emの文字間隔です。

キャプションバー/タイトルカードテーマ（編集レイヤー、アプリではない）:

役割	16進数
背景	#08070C
ゴールドルール/キッカー	#E1A01D
見出し	#F3ECE3
サブテキスト	#9A958C

エディターの見出し書体は、太字のイタリックグロテスク体です。./edit_demo.py は ./fonts、または APP_DEMO_FONT / APP_DEMO_FONT_ITALIC、またはシステムのDejaVu / Liberationフォントを使用します。Geist Italic 900があれば、良い代替品になります。

モーション

共通イージング: cubic-bezier(0.16, 1, 0.3, 1)。カウンターは前の値からティックします（デフォルト1.1秒、KPIタイルでは1.6秒、予測では1.8秒）。アクティブなステップはパルス（1.4秒）し、拡大するリング（1.3秒）を伴います。完了はスプリングチェックとパーティクルバーストです。達成トーストは約1.7秒保持されます。CTAとアクティブステップはきらめきます（1.6秒ループ）。

各パスが読み取れるように、着信イベントのペースを調整します（ステップ終了後約1.5秒）。サーバー時間とカウントは実際のままにします。表示が遅れるのは、それらが出現するときだけです。実行が終了したら、約900ms待ってから、スケールインするリザルトヒーローまでスムーズスクロールします。

コピーボイス

予告編のように書き、数字で証明します。

• ヒーロー: 1つの短い比喩、1つのグラデーション単語。サブヘッドには、視聴者が何を見てアンロックするのか、そして最終的にコストと信頼度の読み取り値に到達することを書きます。
• ライブCTA: 着火の動詞。再生CTA: 再生の動詞。
• 各ステップには、具体的なタイトルと2～3語のTitle Caseの達成項目があり、完了時にトースト表示され、行に星が付きます。
• ギャップは作業であり、失敗ではありません。脅威には名前付きのシールドがあります。未承認の出力はUIにタグ付けされます。ヘッダーにはセーフティ/読み取り専用の行が残ります。
• コストは正確（サブセントの数値が$0.00にならないように十分な小数桁数）で、メータリング済みか見積もりかのラベルが付けられます。仮定はタイルに名前が付けられます。
• 全ワークフローのコストまたは価値の比較、およびその注意事項は、カメラでスクロールできるようにプロダクト内に配置します。

デモUX

• ?replay=<id>（オプションで ?speed=）は、以前に計測された実行を実際のタイミングで自動開始し、UIはそれがリプレイであることを示します。
• ?run=<id>（オプションで ?backend=）は、再課金せずにダッシュボードの再撮影のために、完了した実行を再度開きます。
• ライブパス: 実際のデータをアップロードまたは接続 → 必要に応じて有料エンジンを確認 → 着火 → ペース調整されたタイムライン + リクエストフィード → ダッシュボード、予測、コストパネル、注意事項。

ワークフロー

1. カメラ用にフロントエンドをスタイリングする。 まだUIがない場合は、立ち上げます。theme.css（およびアプリがTailwind v4を使用している場合は tailwind-theme.css）を適用します。FRONTEND_STYLE.md のチェックリストに従います。
2. 実際のデータを固定する。 ライブ実行または忠実なリプレイフィクスチャを使用します。後続のすべてのキャプションは、画面上または実行自体のメトリクスに表示される数値を引用できる必要があります。
3. Playwrightで 1920×900 で録画する。オンページのキャプションピルは使用しません。これらはUIを覆います。連続テイク（ランディング → ワークフロー → 結果）を2～4秒のホールドとスロースクロールでスクリプト化します。./record_demo_template.py を使用します。Playwrightのネイティブフレームレート（多くの場合25fps）を維持します。
4. ./edit_demo.sh で編集する。 キャンバスは1920×1080: 予約された180pxのバー（#08070C / #E1A01D / #F3ECE3 / #9A958C）の上にある1920×900のアプリペイン。約2秒のタイトルカード、ハードカット（1秒のクロスフェードではない）、アプリペインのみに約0.4秒の1.3倍パンチイン（バーは固定）。アプリ内のコストまたは価値の比較で終了し、その後約3秒の注意事項カード。目標は60～70秒。デフォルトは無音（プレーヤー互換性のために静かなAACトラックで問題ありません）。
5. フレームを確認する。 バーがUIを決して覆わず、パンチインがバーをクリップせず、キャプション付きのすべての数値が画面に表示されているか、仮定としてラベル付けされていることを確認します。
6. プロセスのウォークスルーは別のデッキに属します。 アーキテクチャ、仕組み、要点カードは、このビデオのセッションに取って代わるものではありません。

キャプションボイス

• キッカー: トラッキングされた大文字の単語（LIVE SESSION、MISSION COMPLETE、THE CATCH）。
• 見出し: 1つまたは2つの短い文。ピリオドで終え、省略記号は使いません。
• 驚くべき測定された事実を最初に置きます: カウント、時間、コスト、捕捉されたもの。
• 現在画面に表示されているものを指し、次に要点を追加します。チュートリアルをナレーションしないでください。
• アプリ内のコストパネルにカットするときは、それがスライドではなくアプリ独自のパネルであることを述べてください。

失敗モード

間違い	修正
ページ内のHTML/CSSキャプションオーバーレイ	アプリの下に常に予約バーを配置
スクリーンショットコラージュまたはタイポグラフィックな「プロセス」スライドを本文として使用	セッションを録画。プロセスカードはデッキに移動
すべてのビート間のクロスフェード	ハードカット。モーションはパンチインとアプリ自体に限定
ラベルなしで数値を創作または丸める	実行の数字をコピー。仮定にラベルを付ける
パンチインが1080pフレーム全体をズームしてバーをクリップ	1920×900のペインのみをズーム
アーキテクチャや仕組みのグラフィックで終了	プロダクトのコスト/価値比較で終了し、次に注意事項
ビデオモデルで「デモ」を生成	Playwright + ffmpegのみ
「シネマティックにするため」にナレーションや音楽を追加	デフォルトは無音。映像とキャプションがそれを伝える
フラットなUI、数値のポップイン、アプリ内コストパネルなし	最初にアプリをスタイリングする（FRONTEND_STYLE.md）。編集だけで修正しようとしない
ヒーローやCTAが設定画面のように書かれている	比喩 + グラデーション単語。ライブには着火の動詞、リプレイには再生の動詞
CSSでフォントを指定したが読み込んでいない	theme.css からInter + JetBrains Monoのインポートを追加
「アプリがない」ため、データセットやCLIをスライドとして録画	最初に華やかさのために小さなフロントエンドを立ち上げ、それを録画

クイックスタート

ffmpeg とPython 3が必要です。

python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium

# 1. アプリをスタイリングする（theme.css / FRONTEND_STYLE.md）ので、カメラで映えるようにします。
# 2. アプリが実行され、レコーダーのactions()が入力された後:
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4

オプション: Geist（または別の太字イタリックグロテスク体）を ./fonts に配置するか、APP_DEMO_FONT と APP_DEMO_FONT_ITALIC を設定します。

目的

実際のセッションから、実際のアプリの劇的なデモ、プロモーション、またはローンチビデオを作成します。カメラ対応のフロントエンドをスタイリングし、Playwrightで録画し、ffmpegで予約されたキャプションバー、パンチイン、タイポグラフィックなタイトルカード、エンドカードを合成します。パイプライン、データセット、コストモデル、CLIは、最初にそのフロントエンドとして立ち上げられます。

入力

• レコーダーのベースURL（record_demo_template.py の --base、デフォルト http://127.0.0.1:8765）で動作しているアプリ、または録画用に構築された小さなフロントエンド。
• 実際のデータ、または以前に計測された実行の忠実なリプレイ。キャプション付きの数値は、画面上または実行のメトリクスから取得されるか、仮定としてラベル付けされます。
• record_demo_template.py 内で入力された actions()。
• example_timeline.json のような形状のタイムラインJSON。
• ffmpeg、Python 3、playwright、pillow。./fonts 内のオプションのイタリックグロテスク体、または APP_DEMO_FONT と APP_DEMO_FONT_ITALIC。
• theme.css、アプリがTailwind v4を使用する場合は tailwind-theme.css、および FRONTEND_STYLE.md のチェックリスト。

出力

• record_demo_template.py からの生テイク（.webm、または --transcode で .mp4）。
• edit_demo.sh からの編集済みファイル: 1920×1080 H.264、通常60～70秒、無音のAAC。1920×900のアプリペインが180pxのキャプションバーの上に配置され、約2秒のタイトルカード、ハードカット、アプリペインへの約0.4秒の1.3倍パンチイン、約3秒の注意事項エンドカードが付きます。

非目標

• 動画生成モデル、画像生成モデル、TTS。
• サウンドが必要という指示がない限り、ストックミュージックやナレーション。
• ページ内キャプションオーバーレイ、スクリーンショットコラージュ、クロスフェードされたプロセススライドを本文として使用。
• ラベル付けされていない創作された数値、または丸められた数値。
• セッションの代わりにアーキテクチャや仕組みのデッキを使用。

チェック

• FRONTEND_STYLE.md の録画前チェックリストが合格していること。これには、読み込まれたInterとJetBrains Mono、および読み取り可能な1920×900フレームが含まれます。
• 予約バーがUIを決して覆わないこと。パンチインは1920×900のペインのみを移動するため、バーは全幅でクリップされないままになります。
• キャプション付きの各数値が画面に表示されているか、実行メトリクスに含まれているか、キャプションとエンドカードの両方でそれが仮定または予測であると呼ばれていること。
• カットはハードカット、長さは約60～70秒、トラックはエディターがマルチプレックスする静かなAACを除いて無音であること。
• bash -n edit_demo.sh と edit_demo.py および record_demo_template.py での python3 -m py_compile の両方が成功すること。

失敗モードと回復

上記の失敗モードの表を使用します。回復:

何が見えるか	何をすべきか
キャプションがボタンやグラフを覆っている	ページ内オーバーレイを削除。行をタイムラインに配置し、./edit_demo.sh を再実行
本文が静止画、コラージュ、またはクロスフェードである	./record_demo_template.py でセッションを録画し、ビート間をハードカット
パンチインがバーをクリップしている	ビートで zoom を維持。edit_demo.py はアプリペインのみをスケーリング
キャプションの数値が画面に表示されていない	ダッシュボードまたは実行メトリクスの数字をコピーするか、タイルとエンドカードでその仮定にラベルを付ける
フラットなUI、数値のポップイン、またはコストパネルがない	theme.css と FRONTEND_STYLE.md から再スタイリングし、再度録画
エディターがフォントを見つけられずに終了する	./fonts の下に .ttf を追加するか、APP_DEMO_FONT と APP_DEMO_FONT_ITALIC を設定し、./edit_demo.sh を再実行
ソースがノートブック、CLI、またはスプレッドシートである	FRONTEND_STYLE.md の小さなフロントエンドを実際のデータを中心に構築し、それを録画