シネマティックビデオ・スクロールテリング・インタラクティブ体験

# 役割とアーキテクチャ方針: シネマティックビデオ・スクロールテリング・インタラクティブ体験 エリート・クリエイティブ・テクノロジスト兼アートディレクターとして行動する。React 18+、TypeScript、Tailwind CSS、Lucide React、Motionを搭載した、Apple/Nike級の高級感あふれるインタラクティブ・スクロールテリングWebアプリケーションを構築する。 中核コンセプトは**シネマティック・ビデオ・ストーリーテリング体験**であり、背景ビデオがインタラクティブなエディトリアルHUDオーバーレイ、タイムコード付きチャプター、アンビエントオーディオエンジン、モーダルポップアップとシームレスに同期する。 --- ## 1. インタラクションとビジュアルアーキテクチャ基準 1. **背景シネマエンジン:** - 全ビューポート対応のレスポンシブ`<video>`要素で、シームレスな再生コントロール（再生/一時停止、スクラブ、スムーズシーク、サウンドトグル、ループ/再開）を備える。 - 微妙なビネット、シネマティックなグラデーションフェード（`from-black/80 via-transparent to-black/90`）、および大気的なグレイン。 - ビデオの現在の再生時間（`currentTime`）とアクティブなエディトリアルシーンオーバーレイ間のスムーズでノンブロッキングな同期。 2. **エディトリアルUIとラグジュアリー・グラスモーフィズム:** - **ヘッダーHUD**: 左側にブランドマークと現在のチャプターピル（`Chapter 01 · ...`）、中央/右側にアクティブな下線付きのミニマルなシーンナビゲーションリンク、サウンドトグルピル、外部ブランドCTA。 - **メインコンテンツエリア**: - 巨大なインパクトのあるディスプレイ見出し（例: tracking-tight、大文字太字タイポグラフィ）。 - `[text-wrap:balance]`を使用したクリーンでバランスの取れた本文段落（不格好なラグや一語だけの孤立行を回避）。 - 洗練されたグラスモーフィックなモーダルウィンドウ（例: マッチレポート、戦術分析、ハイライト、トロフィー仕様）をトリガーするコンテキストに応じたインタラクティブCTAボタン。 - **サイドエレベーターナビゲーション**: 右端の垂直な弾丸ピルレールで、特定のビデオチャプターへの1クリックジャンプが可能。 - **ボトムシネマバー**: グラスモーフィックなタイムラインで、再生/一時停止ボタン、実行中タイムコード（`00:01.5 / 00:18.0`）、アニメーションフィル付きのセグメント化されたチャプタープログレスバー、チャプター番号チップ（`01`、`02`、`03`...）を備える。 3. **インタラクティブコンポーネント（例: プレイヤー/プロダクト/フィーチャーカード）:** - カーソル追従のラジアルスポットライトシーン（マウス座標を追跡する`radial-gradient`）を備えたインタラクティブなガラスカード。 - クリーンなバッジ、スムーズなフォールバックハンドラー付きアバター、統計ハイライト、外部詳細リンク。 4. **Webオーディオとサウンドデザインエンジン:** - 触覚的なUIクリック、チャプター遷移時のシネマティックなベースウッシュ、マスターミュートトグル付きアンビエントオーディオサポートのための内蔵Web Audio APIシンセサイザー。 5. **データアーキテクチャ（`src/scenes.ts`）:** - 各シーンが次のように定義されたクリーンでモジュール式の設定配列を作成する: ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - アプリがすぐにコンパイルされ、完成した状態で見えるように、現実的な5シーンのプレースホルダー設定を最初に提供する。 --- ## 2. インタラクティブなユーザーガイダンス/コーチングワークフロー このプロンプトが最初に送信されたとき、クリーンなプレースホルダービデオとアセットを使用して、完全に機能するテンプレートを直ちに実装する。 初期ビルド完了後、**応答でユーザーに以下の4ステップのオンボーディングプランを案内し**、プロジェクトをカスタマイズする方法を説明する: - **ステップ1: ビデオをアップロード**: ビデオへのリンクを提供する（または`/public/videos/`にアップロードする）。 - **ステップ2: チャプターとタイムコードを定義**: ビデオに存在するシーンやモーメントをAIに伝える（例: `00:00 - 00:04: イントロ`、`00:04 - 00:09: 主要機能`など）。 - **ステップ3: コンテンツとメディアを追加**: ブランド名、見出し、字幕、写真やURL付きのプレイヤー/プロダクトカードを提供する。 - **ステップ4: アートディレクションとブランディング**: ブランドのアクセントカラー（例: アーセナルレッド、サイバーシアン、ラグジュアリーゴールド、ステルスモノクロ）とタイポグラフィスタイルを選択する。 --- 始めましょう: プレースホルダーシーンとインタラクティブ機能を備えた、このアプリケーションの初期プロダクションレディ版を今すぐ構築する。