スクロール駆動ビデオを使ったアニメーション3Dヒーローセクション

「SynapseX」というブランドのためのシングルページ全画面ヒーローセクションを、React、Vite、Tailwind CSS v4、Framer Motion（`motion/react`）を使って構築してください。デスクトップではスムーズスクロールに`lenis`ライブラリを使用します。このページは、ダークで映画的な全画面ビデオ背景のランディングページで、スクロール駆動アニメーションとテキストスクランブル効果を備えています。--- **技術スタック:** - React 19、Vite、TypeScript - Tailwind CSS v4（`@tailwindcss/vite`プラグイン経由） - `motion`（Framer Motion v12+、`motion/react`からインポート） - デスクトップのみスムーズスクロール用の`lenis` - フォント: Google Fontsの「Space Mono」等幅フォント（sans、serif、monoのすべてのフォントファミリーに使用） - Appleアイコン用のBootstrap Icons CDN（`bi bi-apple`）--- **フォント / CSS設定（`index.css`）:** - Google Fontsをインポート: `Space Mono`（400、700、イタリック変種） - jsdelivr CDNからBootstrap Icons CSSをインポート - `tailwindcss`をインポート - すべてのTailwindフォントテーマ変数（`--font-sans`、`--font-serif`、`--font-inter`、`--font-mono`）を`"Space Mono", monospace`に上書き - `html, body`: font-family var(--font-sans)、背景黒、文字色白、マージン/パディングなし、overflow-x hidden、overflow-y auto - Lenis互換クラス（`.lenis.lenis-smooth`、`.lenis.lenis-stopped`、`.lenis.lenis-scrolling iframe`）--- **背景ビデオ（重要 - よく読んでください）:** - URL: `https://t.co/cvkGVS5C0E` - `LiquidVideoCanvas`コンポーネントでレンダリング: 固定全画面`<video>`要素（loop、muted、playsInline、preload="auto"、object-cover）**重要 - ダークオーバーレイなし:** ビデオコンテナにはダークオーバーレイ、半透明の黒レイヤー、`bg-black/50`、不透明度付きの`::after`擬似要素、ビデオ上のグラデーションオーバーレイを一切追加しないでください。ビデオは自然な明るさで完全に見える必要があります。唯一のコンテナ背景は、ラッパーdiv自体の`bg-black`のみです（ビデオが読み込まれる前にのみ表示）。ビデオの上に暗くするフィルター、オーバーレイdiv、またはティントを追加しないでください。**重要 - Z-INDEXレイヤリング（正確に従う必要があります）:** - ビデオコンテナ: `fixed inset-0 z-[1]` - これが最下層 - プログレッシブブラー: `fixed bottom-0 z-30` - メインコンテンツ（テキスト、見出し）: `z-10`（ビデオの上、ヘッダーの下） - ヘッダー: `z-50`（最前面） - ルートラッパーは`relative`で`overflow-x-hidden`。メインコンテンツエリアには、ビデオを覆い隠す背景色を設定しないでください。ビデオはコンテンツレイヤーを通して常に表示されている必要があります。ビデオコンテナの上に配置される要素には`bg-black`を設定しないでください。**ビデオのスクロールスクラビング（重要 - フレームシークロジック）:** - ビデオは自動再生されません。その`currentTime`は、requestAnimationFrameによるLERPスムージング（係数0.12）でスクロール進行によって駆動されます。 - **`if (!video.seeking)`ガードによるフレーム正確なシーク:** ブラウザが前のフレームのレンダリングを完全に完了した場合にのみ、新しいビデオフレームシークを要求します。これにより、フレームスキップ、ジャンク、黒いフラッシュを防ぎます。パターン: ``` if (!isSeeking && !video.seeking) { isSeeking = true; video.currentTime = clampedTime; } else { nextSeekTime = clampedTime; // 現在のシーク完了後にキュー } ``` ブラウザに「前のフレームのペイントを完全に完了した場合にのみ、ビデオフレームを更新してください」と伝えます。これは、すべてのデバイスでスムーズでバターのような再生に不可欠です。このガードがないと、複数の重複するシークがビデオに黒いフレームやスタッターを表示させます。 - ビデオ要素の`seeking`および`seeked`イベントをリッスンします。`seeked`で、キューされた`nextSeekTime`があるか確認し、それを実行します。**エントランスアニメーション:** - スケール1.12、不透明度0で開始。ビデオの`readyState >= 3`で、1.4秒かけてキュービックイーズアウトでスケール1.0、不透明度1にアニメーション。3.5秒の安全タイムアウトフォールバックあり。**スクロール駆動の視覚効果（React stateではなく、refを介してDOMに直接適用）:** - プログレッシブブラー: スクロールに基づいて0-55px（前半は微妙なベース0-5px、後半はアグレッシブな5-55px）。