स्क्रॉल-संचालित वीडियो के साथ एनिमेटेड 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, italic वेरिएंट) - 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), bg काला, रंग सफेद, कोई margin/padding नहीं, overflow-x छिपा हुआ, overflow-y ऑटो - 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.4s में क्यूबिक ईज़-आउट के साथ स्केल 1.0, ओपेसिटी 1 पर एनिमेट होता है। 3.5s सेफ्टी टाइमआउट फॉलबैक है। **स्क्रॉल-ड्रिवन विज़ुअल इफेक्ट (React स्टेट के माध्यम से नहीं, बल्कि ref के माध्यम से सीधे DOM पर लागू):** - प्रोग्रेसिव ब्लर: स्क्रॉल के आधार पर 0-55px (पहले आधे में सूक्ष्म बेस 0-5px, फिर दूसरे आधे में आक्रामक 5-55px)।