実際のコンポーネントプロモーションビデオワークフロー
デフォルトスタイル = 「一条线」：プロダクトに由来するブランドモチーフが全体を貫き、余白と実際のインタラクションでトリガーされる 3 つのインパクトポイントを組み合わせます。整然とした説明書的なショットや、エフェクトを積み重ねたプレゼンテーション的なショットとの比較は、クリエイティブマニュアルを参照してください。
templates/ = 撮影シェル（汎用化、問題点を修正済み）+ v3 で確定した合成、スタイル、音楽、書き出しスクリプト。videos/<name>/ にコピー後、【必改】（必ず修正）と注記された箇所を書き換えてください。
必要に応じて参照：
references/creative-playbook.md：モチーフ、3 つのインパクトポイント、余白のルール、コピー、テンポ表。絵コンテ決定前に必読。references/compose-recipes.md：座標の計測、タイムマッピング、ショットコンテナ、ライトパネル、ライン描画、スポットライト、ワールド反転、ロゴの配置、トランジション、タイムラインの書き方。合成前に読むこと。references/pitfalls.md：撮影、レンダリング、オーディオ、デリバリーにおける現象→根本原因→対処表と検収コマンド。異常が発生したらまず参照。
技術スタック
| 工程 | 技術 | ポイント |
|---|---|---|
| 合成/レンダリング | HyperFrames（[email protected] 固定、npx --yes、業務依存関係に入れない） | check で検証、snapshot でフレーム抽出、render で出力 |
| モーション | GSAP（業務プロジェクトのインストール済みバージョンを assets/vendor/gsap.min.js にコピー） | 一時停止状態の単一タイムラインを window.__timelines[id] に登録 |
| 撮影ビルド | Vite + @vitejs/plugin-vue（createRequire でフロントエンドプロジェクトから依存関係を解決） | 独立したルート；envDir/publicDir はフロントエンドプロジェクトを指す；ベンダーは別ブロックに分ける |
| 決定論的クロック | Vite transform プラグイン | setTimeout/rAF/Date.now/performance.now（裸呼び出しと window. プレフィックス付き）をすべて window.__shoot に接続 |
| データ分離 | メモリ内 fixtureFetch（書き込み操作のシミュレーション含む）+ ネットワークホワイトリスト + 固定シード + 固定エポック + 固定位置情報 | 架空データ、業務リクエストはフィクスチャー経由、固定撮影クロック |
| インタラクションスクリプト | performActions(t) + once/byText/rowButton/typeInto | 指定秒に実際のクリック、入力、ドラッグを実行 |
| 素材 | 横画面 PROMO_RESOLUTION=4k 2 倍ピクセル；スマホ 430×932 は別ビューポート | 合成時でも大幅に拡大しても鮮明 |
| 音楽 | Python3 + NumPy（96 BPM、FFT リバーブ、シード固定） | 無音の拍、インパクトポイントに合わせたアクセント、ノード点灯に合わせたチャイム |
| ラウドネス/書き出し | FFmpeg 2パス loudnorm（−14 LUFS / TP −3）、元の音楽をラッピングしてノーマライズ、圧縮版、カバー | メイン + -share.mp4（約 11 MB）+ カバー PNG |
ディレクトリ構成
videos/<name>/
promo.config.mjs appDir/srcDir/entry/motionFile/id/duration/coverAt/hyperframes —— 唯一のプロジェクト関連設定
capture/ index.html（撮影シェル）bootstrap.ts（クロック/分離/インタラクション）fixtures.ts（架空データ、新規作成が必要）vite.config.mjs
scripts/ render-footage.mjs compose-film.mjs compose-audio.py normalize-audio.mjs render-film.mjs remux.mjs
assets/ footage/ footage-4k/ audio/score-final.wav vendor/gsap.min.js
index.html（compose 生成）film.css package.json README.md
npm scripts：capture / compose / audio / check / snap -- <秒,秒> / render / remux / dev。
フロー
- 方向性の決定：
PRODUCT.md/DESIGN.md/ブランドアイデンティティを読み、creative-playbook に従ってモチーフを見つけ、3 つのインパクトポイントを設計します。ユーザーに確認するのは 2 つのことだけ：クリエイティブのメインライン（2～3 つの方向性を提示、「一条のモチーフ」を推奨）、コピーのトーン（既存のものを使用するか新しくするか）。 - 絵コンテ：各ショット = 実際のページ + 明朝体のタイトル + キーインタラクションの秒数 + そのショットでのモチーフラインの形状；45 秒の参考テンポは playbook 参照。README の絵コンテ表に記入。
- 撮影シェル：
bootstrap.tsでwindow.__shoot、ネットワークホワイトリスト、固定位置情報、ストレージクリア（IndexedDB の下書き含む）、テーマ/ビュー/オフライントークンのプリセットを設定し、replaceStateでルーティング後に製品エントリをimport；ローディングが遅いページはwaitFor/settleで rAF をフラッシュ；非表示のカーソル/スクロールバー/キャレットのスタイルを注入。fixtures.tsのフィールドは実際のインターフェースに従い、書き込み操作はメモリ上のみ。事前にブラウザで?shot=<ショット>&liveでインタラクションをリハーサル。 - キャプチャ：
npm run capture（シングルワーカー）、拡大率の大きい横画面ショットはさらにPROMO_RESOLUTION=4k npm run captureを実行。 - 座標計測：素材からフレームを抽出（1920 座標、4K 部分クロップで正確な値を取得）し、軌跡の折れ線、ボタン、ポップアップ、ステップノードの位置を計測。
- 合成：
compose-film.mjsのショットテーブル、座標、コピー、タイムポイントを修正し、そのユーティリティ関数を再利用；ルールは compose-recipes 参照。毎回npm run compose && npm run checkを実行し、さらにnpm run snap -- <キー秒>でコンタクトシートを確認（インパクトポイントの出入り、トランジション、ラベルの位置合わせ）。 - 音楽：
compose-audio.pyのタイムポイント（インパクトポイントのアクセント、無音区間、クリック、ノードチャイム）を修正し、npm run audioを実行。 - レンダリングと検収：
npm run renderをバックグラウンドで実行；完了後、ffprobe で長さ/フレーム数/解像度/フレームレート、ebur128 でラウドネスとトゥルーピークを確認し、blackdetect（設計上の黒フレームは説明が必要）も実行、約 18 フレームをコラージュして目視チェック。カバーのみの修正ならnpm run remuxを実行。
制約
- 製品のソースコードと依存関係は変更不可；クロックの書き換えは撮影ビルド時のみ。
- 架空データのみ使用、業務バックエンド/データベースへの接続不可、実際の認証情報の読み取り不可；サードパーティのオンラインリソース（地図など）はホワイトリスト経由、Key は .gitignore 対象のビルドディレクトリにのみ配置。README に分離方法、シード、固定日付を明記。
- ラベルは画面上に実際に表示される数字のみを使用；画面やコピーに「デモ/サンプル/シミュレーション」の文字を表示しない。
- ビジュアルはプロジェクトの DESIGN.md とブランドカラーに従う；フォントはローカル宣言（Songti SC / PingFang SC / Georgia）。
- 中間生成物（
.capture-build/ .shots/ .quality/ renders/ ログ）は.gitignoreに追加；旧バージョンはそのまま残し、新バージョンは別ディレクトリを作成。 - ユーザーが明示的に要求しない限り、外部プラットフォームにコミット/公開しない。
- 合成の作成または修正前に、必要に応じて
hyperframes-core、hyperframes-animation、hyperframes-cliの現在の API を確認。
納品物一覧
- メイン動画 MP4（45.000 s / 2700 フレーム / 1920×1080 / 60 fps / H.264 yuv420p / AAC 320k 48 kHz / −14 LUFS / トゥルーピーク ≤ −1 dBTP）。
- 圧縮版
-share.mp4とカバー PNG は、現在のプラットフォームがサポートするファイル配信方法で提供。 - 編集可能な
index.html+film.css、および素材とスクリプト。 - README：ビジュアルの説明、絵コンテ表、音楽の説明、再現コマンド、撮影分離、納品チェックリスト。