bluemountain1231/cinematic-web-promo

video-shotcraft：映画感的な製品プロモーションビデオ制作

自己完結型の制作能力ライブラリ：152枚のレンズレシピカード（デモ実装コードと動的サンプルギャラリー付き）、承認済みの完全なプロモーションテンプレート、再利用可能なコンポーネントとオーディオアセット、6段階ワークフローを提供。 現在の焦点はWeb/デスクトップ製品のプロモーションビデオですが、レンズカード自体は汎用的な動きのボキャブラリです——個別にカードを抽出して任意のビデオ内の単一ショットとしても使用できます。

呼び出し時にモードを判断

完全なプロモーションビデオには、互いに排他的な3つのモードがあります。素材収集、絵コンテ、または実装を開始する前に、ユーザーが既に明確に選択しているかどうかを判断してください。選択済みの場合は直接実行し、再度質問したり別のモードに切り替えたりしないでください。

1. テンプレートを直接使用：Ink Pressの既存の置き換えフローを維持します。template/TEMPLATE.mdを読み込み、既存のショット構成に従って、対象製品のスクリーンショット、コピー、ブランド情報を置き換えます。
2. 自律創作：references/pipeline.mdを読み込みます。エージェントはユーザーの要求とプロジェクト内容に基づき、視覚的方向性、ショットマッピング、絵コンテ、素材、オーディオを自律的に決定し、完成まで連続的に進めます。製品ブリーフ、スタイルフレーム、ショットマッピング、絵コンテの段階でユーザーの確認を待つことはありません。
3. 共同創作：references/guided-free-creation.mdを読み込みます。エージェントは根拠のある判断と計画を提示し、ユーザーが製品ブリーフ、要件決定、視覚的方向性、ショットマッピング、最終絵コンテを順次確認します。絵コンテが承認された後、references/pipeline.mdの最終素材収集と制作段階に進みます。

ユーザーがプロジェクトパス、URL、画面録画、またはページスクリーンショットを提供したがモードを選択していない場合は、最初に最小限の、読み取り専用の製品チェックを実行します。製品の位置づけ、主要機能、ページビジュアル、表示可能な状態、素材リスクを理解します。ビジネスプロジェクトを変更したり、機密データを収集したり、ビデオコードを書いたりしません。チェック後、3つのモードを提示し、以下を説明します：

• Ink Pressがその製品に適しているか、適している/適していない具体的な根拠；
• 自律創作と共同創作がそれぞれ適しているか、どの製品ビジュアルの手がかりが保持される見込みか；
• エージェントが推奨するモードとその根拠、トレードオフ。

その後、明確に質問します：「上記の製品チェックに基づき、私は××モードを推奨します。このモードで続けますか？」 同時にユーザーに伝えます：動的サンプルは https://vincentwei1021.github.io/video-shotcraft/ で閲覧でき、ビデオで使用したい動きのショットを選べます。

ユーザーがチェック可能なプロジェクトやページをまだ提供していない場合は、3つのモードを簡単に説明してから質問します。Ink Pressが既存のテンプレートだからといってデフォルトで推奨しないでください。

• ユーザーがテンプレートを選択：template/TEMPLATE.mdを完全に読み、元のテンプレートフローに従って実行。
• ユーザーが自律創作を選択：references/pipeline.mdを完全に読み、エージェントが自律的に進め、段階ごとに確認を待たない。
• ユーザーが共同創作を選択：references/guided-free-creation.mdを完全に読み、その中の確認ポイントに沿って協力。
• ユーザーが未決定：ここで停止し、選択を待つ。デフォルトでユーザーに代わって選択したり、制作を開始したりしない。

例外1：ユーザーが既にInk Pressテンプレートを指名している場合、テンプレートモードが選択されたと見なします。 例：「Ink Pressテンプレートを使って私の製品のプロモーションビデオを作って」。この場合、再度質問せず、直接template/TEMPLATE.mdを完全に読み、テンプレートルートに従って実行します。

例外2：ユーザーが既に特定のレンズカードの使用または参照を明確に指定している場合、ショットの制約は既に選択されています。 例：「deck-deal-flyinとrow-embedを使ってこのビデオを作って」または「spotlight-hero-cardの効果を参考にして」。この場合、テンプレートを紹介したり、テンプレートの使用を質問したりしないでください。ギャラリー名解決ルールに従って指定されたショットを確認し、各カードを完全に読み、カードの「参考実装」に従って正確なデモソースコードを特定します。単一ショットは対象素材が明確になった後に実行できます。完全なプロモーションビデオで自律創作か共同創作かがまだ説明されていない場合は、これら2つのモードのみを質問し、指定されたショットは後続の制作制約として扱い、自動的に共同創作と見なさないでください。

4つの使用方法

1. 完全なプロモーションビデオ（テンプレートルート）：テンプレートビデオと非常に似た効果を望む場合 → template/TEMPLATE.mdを読み、「製品置き換え再現ガイド」に従って素材をショットごとに置き換えます。
2. 完全なプロモーションビデオ（自律創作）：新しいスタイルを望み、エージェントに自律的な決定を委ねる場合 → references/pipeline.mdを読み、製品理解から最終検査まで連続的に進め、途中で段階ごとに確認を待ちません。
3. 完全なプロモーションビデオ（共同創作）：重要な意思決定に参加したい場合 → references/guided-free-creation.mdを読み、製品ブリーフ、要件決定、視覚的方向性、ショットマッピング、最終絵コンテを確認します。承認後、パイプラインの最終素材収集から続行します。
4. 単一ショット/単一エフェクト：references/shots/からカードを選び（またはユーザーにgallery/ギャラリーから選ばせ）、カード全文を読み、「参考実装」に従って正確なデモソースコードを特定し、対象素材に適用します。

自律創作と共同創作の境界

自律創作はクリエイティブおよびエンジニアリングの決定をエージェントに委ねます。エージェントはプロジェクト内容から製品の重点、視覚的方向性、ショットマッピング、絵コンテ、素材処理、オーディオプランを動的に導き出し、重要な判断を記録した後、直接実行します。安全に推論できない必須入力を欠く場合を除き、質問せず、段階ごとに一時停止せず、中間成果物の確認を要求しません。ユーザーの既存の明確な要求は常に制約であり、エージェントのデフォルト選択で上書きすることはできません。

共同創作でのみ段階ごとの確認を使用します。デフォルトでreferences/guided-free-creation.mdを読み、毎回1～3の最も手戻りを減らせる質問をし、製品ブリーフ、要件決定、視覚的方向性、ショットマッピング、最終絵コンテで停止してユーザーの確認を待ちます。ユーザーはビジネスとクリエイティブの方向性を確認します。エージェントは収集方法、実装パラメータ、SFXピンフレーミング、Remotionプロジェクト、レンダリング、技術QAを自律的に完了します。

共同創作中、ユーザーが明確に「あなたに全て任せる」または「確認をスキップして直接実行」と言った場合、自律創作に切り替え、その選択を記録します。自律的に進めると主張しながら、段階ごとに確認を要求し続けないでください。

機能からショットへのマッピングは単に「どの動きの文法を採用するか」であり、完全な絵コンテではありません。共同創作でマッピングを確認した後、エージェントはショットの順序、長さ、具体的な画面、ページ状態、素材ソース、字幕、トランジション、SFXを提示しなければなりません。完全な絵コンテが確認された後にのみ最終素材収集に入ります。ユーザーがギャラリーからショット名をコピーする場合、カード名または「カード名 · スタイル名」を提供するだけでよく、エージェントがローカルのレシピカードとデモソースコードを読みます。

核心理念

1. 既存ページの再現には実際のスクリーンショットを使用すること。UIの手作りは非再現シナリオに限定され、品質と表現の明確性は厳格な要件。 製品の実際のページを表示する場合、最初のステップでローカル開発サーバーを起動し、ヘッドレスブラウザで全ページ2xテクスチャ＋要素レベルの切り抜き＋layout.json座標表を取得します。非再現シナリオ（抽象的なオープニング/ブランドセクション/独立したコンポーネントの表示）ではUIの手作りが許可されますが、出版品質の質感に達しないか、視聴者が何を表現しているか理解できない場合は、スクリーンショットルートに戻ります。ページデータはリスクに応じて処理：公開デモデータは製品ブリーフで明確に確認された場合のみ保持可能。顧客、個人、内部、秘密鍵、リアルタイムなどその他の機密データは架空または匿名化された内容を使用し、収集前にフリーズする必要があります。

2. ビデオ全体の視覚言語は製品自体から成長しなければならず、無関係な「プロモーションビデオ用スキン」を別途作成してはいけない。 スタイルフレームを作成する前に、製品/ウェブサイトのデザインシステム、ソースコード、またはcomputed stylesから抽出し、デザインスペックを書き出します：フォントファミリーとウェイト、フォントサイズの階層、行間/字間、グリッド、スペーシング、配置、情報密度、角丸、背景/サーフェス/本文/強調/状態色、グラデーション、マテリアル。ビデオ内のすべてのタイトル、字幕、数字、テキストカード、タイポグラフィ、トランジション、パーティクル、光エフェクト、その他のエフェクトの配色は、これらのトークンを再利用または抑制的に拡張し、同時に製品のトーン、センス、質感に一致させる必要があります。テンプレートやレンズカードルートを使用する場合、ショット構造、動きの文法、リズム、調整済みパラメータのみを継承します。フォント、タイポグラフィ、配色、マテリアルは対象製品に合わせて再スキニングする必要があります。ナラティブの必要性から製品ビジュアルから逸脱する場合、共同創作では最初に理由を説明し、ユーザーに確認させます。自律創作では理由とトレードオフをデザインスペックに記録して続行します。

3. 映画感はカメラワーク、光と影、リズム、サウンドの協調から生まれ、派手なアニメーションからは生まれない。 繰り返し認められているのは：単一主人公の完全な動作弧（スポットライト→プッシュイン→ホバー→定位置）、物理的メタファーによって駆動される加速度（カードディール）、傾斜軌道のオービットクローズアップ、ライザー→インパクト→スパークルのサウンドフレーズ。バルク要素の入場は動き自体に依存し、個別に発光させるのではない——装飾的なグリント/フラッド発光は安っぽく、単一ポイントの高品質な光エフェクトは許容される。

4. 各ショットは1つの動きだけを語る。重要な情報が落ち着いた後は呼吸が必要。 1つのアニメーション技法（フライイン/スタック/ページめくり）はビデオ全体で1回だけ主人公にできる。重複ショット、重複タグラインは全て削除。リズムの好みは一方向：過去のフィードバックは全て「遅く/停止」を指し、「速すぎる」は一度もない——ブランドロゴの定位置ホールドは1秒以上、バルクエフェクトの終了後に0.5秒の静止、オープニングの主体動作には3秒の余裕を持つ。タイムラインを組む際に事前にホールド/レストのフレーム予算を確保する。

5. 強いリズムのBGMが付いたビデオでは、全てのトランジションとエフェクトがビートに同期しなければならない。 ユーザーが既に音楽を選んでいる場合 → 制作開始前にリズム分析を実行（librosaグリッドフィッティングで真のBPM/位相＋キック/スネア/ハイハットの3分類ドラムヒット検出）。グリッドが過渡カバレッジで承認された後にのみ絵コンテを作成。タイムラインは拍記号beatF(n)を使用し、疎なアクセントはグリッド補間点ではなく実際の過渡にピン留め。レンダリング後、完成ビデオからオーディオトラックを抽出し、カットポイント誤差が3フレーム以内であることを確認。方法論はreferences/music-beat-sync.mdを参照。BGMが付いたビデオの最終レンダリングは必ず2バージョンで納品：BGMありバージョン＋BGMなしバージョン（SFXは保持）。bgm inputPropを使用して同じタイムラインからレンダリングし、ユーザーが後で自分で音楽を追加できるようにする。

6. レンズカードエフェクトを使用する前に、必ずギャラリーインデックスを解析し、正確なデモ実装コードを読むこと。 最初にgallery/api/library.jsonを使用してカード名とstyle-keyを検証し、次にカードドキュメントの「参考実装」に従って具体的なTSXを特定する。レシピカードはセマンティクスとパラメータテーブルを提供する。正確なデモソースコードこそが調整済みパラメータの真実（イージング、タイミング配分、マスク解除のタイミング、既知の落とし穴の回避方法）である。適応的な変更は許可されるが、カード上の「既知の落とし穴/命綱」と注記されたパラメータは品質を低下させてはならない——品質基準は引き上げのみ、引き下げは禁止。カード名と理解だけで新しく書くことは、全ての調整の蓄積を放棄することを意味する。

7. 共同創作は安価な確認を前倒しし、自律創作は同じ判断を実行記録として残す。 製品ブリーフ→要件から実行決定テーブル→テキスト方向→スタイルフレーム→ショットマッピング→絵コンテの順序は変わらない。共同創作では段階ごとにユーザーに確認を委ね、自律創作ではエージェントが自律的に選択し連続的に進める。どちらのモードでも、方向性が定まっていない状態でショットごとの実装に入ってはならない。

8. 受け入れは全工程を通じて＋納品前に独立したレビューを実施。 フェーズ5以降、各ショットをnpx remotion stillでスチルフレームを出力して自己チェック。毎回の修正後に全体をレンダリングし、ffmpegでフレームを抽出して確認。納品前には、クリーンなコンテキストのサブエージェントを派遣して独立した最終レビューを実行する必要がある。レビュー入力には、完成ビデオ、キーフレーム、製品ブリーフ、要件から実行決定テーブル、現在のモード確認または記録された視覚的方向性/スタイルフレーム、機能からショットへのマッピング、ギャラリーカード名/バリアント、正確なデモTSX、ギャラリー参考サンプル/抽出フレーム、最終絵コンテ、選択されたレンズカード、審美基準が含まれる。references/final-review.mdに従って、計画の一貫性、機能の完全性、ショットの再現度、ビジュアル/オーディオの技術品質、データセキュリティを同時にチェックし、フレーム番号付きの証拠を含むレポートを項目ごとに作成する。制作者は自分の成果物に対して確証バイアスを持つため、初回チェックは決してユーザーに委ねてはならない。

9. 確定的レンダリング：Date.now()/Math.random()を禁止。全ての擬似乱数は固定シード（mulberry32/ハッシュ、シードはindexから派生）を使用し、フレームごとに再現可能とする。

ワークフロー

自律創作はreferences/pipeline.mdに従ってフェーズ0から連続実行し、段階ごとにユーザーの確認を待たない。共同創作は最初にreferences/guided-free-creation.mdに従ってフェーズ0～3（製品理解、視覚的方向性、ショットマッピング、絵コンテ確認）を完了し、その後パイプラインフェーズ4の最終素材収集から続行する。質問を繰り返したり、再設計したりしないこと。フェーズ2～3ではreferences/shots/の各カードのfrontmatterをスキャンし、エネルギーカーブに従ってショットを選択。フェーズ5～7では継続的にreferences/aesthetic-rules.mdと照合して自己チェック。フェーズ6ではreferences/sound-design.mdを読む。ビート同期ビデオ全体でreferences/music-beat-sync.mdを適用。

どのファイルをいつ読むか

タイミング	読むファイル
プロジェクト開始、モード未定	最小読み取り専用チェック、その後3つの完全プロモーションモードを提供し推奨
自律創作	pipeline.md（エージェントがフェーズ0～7を自律的に完了、段階ごとに確認を待たない）
共同創作	guided-free-creation.md（フェーズ0～3を確認）、その後pipeline.mdのフェーズ4から続行
ユーザーがBGMを選択済み	music-beat-sync.md（分析後に絵コンテを作成）
テンプレートルート	template/TEMPLATE.md全文
絵コンテ設計	sequences/のセグメントテンプレート（ビデオ全体の骨格を先に埋める）；shots/の全frontmatter；選択したカードの全文
ショットごとの実装	該当レンズカード全文＋「参考実装」に従って特定した正確なデモソースコード全文＋assets/lib/の対応コンポーネント
サウンドデザイン	sound-design.md + assets/audio/
受け入れ	final-review.md + aesthetic-rules.mdの全文チェックリスト（独立サブエージェントが実行）

アセットの使用法

• assets/lib/ コンポーネントは新しいプロジェクトにコピーして自由に変更（このライブラリをimportしない）。 一覧：PageCam（2.5Dページカメラ——全ての「実際のページ」ショットの基盤）、DigitRoll、 FlashCut、Caption、FlatPanel、VerticalTicker（3D無限スクロールウォール）、 helpers(rand/shake/camera/motion)。FlatPanelとhelpers/cameraは three + @react-three/fiber + @remotion/threeの依存が必要。その他はremotionのみで可。
• assets/scripts/capture-template.mjsをコピーし、上部のCONFIG（BASE/ルート/セレクタ）を変更。
• assets/audio/の効果音は直接コピーして使用可能（無料商用ライセンス、詳細はaudio/ATTRIBUTION.mdを参照）： audio/bgm/はリズミカルなBGMの選択肢；audio/sfx/<カテゴリ>/に149の効果音が16カテゴリ （transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter）。効果音を探す際は最初にカテゴリディレクトリを確認。一覧はsound-design.mdを参照。 ボキャブラリ「sparkle」のディレクトリ名はlight/（sparkle/は無し）。S1では音色を禁止するが動作は禁止しない—— 画面に実際のクリックやスイッチがある場合は擬音を付けるべきだが、ui/の半分は合成フィードバック音（tone/bleep/ notification）のため、一つずつ試聴する必要があり、ディレクトリ全体を許可してはならない（リストはsound-design 3.3を参照）； 長サンプルと軽音素材にはそれぞれ特別な処理が必要なリストあり（sound-design 4.1を参照）。
• demos/の各カード実装ソースコード：ほとんどが自己完結型のグレースケールデモ（一部は demos/_fixtures/Fixtures.tsxのダミーUIシーンコンポーネントをimport、一部は demos/_textures/の実際のページテクスチャをimport）。Remotionプロジェクトにコピーして実行可能。 一部のデモは@remotion/motion-blur（CameraMotionBlur）を使用しており、 npm i @remotion/motion-blurが必要。リストはdemos/README.mdを参照。
• template/：完全にレンダリング可能なプロジェクト。npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4。
• gallery/：静的ギャラリー。可能であればユーザーにオンラインバージョン https://vincentwei1021.github.io/video-shotcraft/library.html を直接提供。 ローカルで実行する場合は、最初にgallery/fetch-media.shでサンプルビデオを取得し（mp4はgitに含まれていない）、 次にcd gallery && python3 -m http.server 4178を実行。152カード209の動的サンプルビデオを 閲覧/検索/複数選択でカード名をコピー可能——ユーザーがサンプルを見ながらショットを選ぶのに適している。