कर्सर-स्क्रब्ड वीडियो बैकग्राउंड के साथ इंटरैक्टिव लैंडिंग पेज

एक फुलस्क्रीन हीरो सेक्शन बनाएं React + TypeScript + Vite + Tailwind CSS v4 + `motion` (framer-motion उत्तराधिकारी) में। `Inter Tight` Google Font (केवल weight 500) का उपयोग करें। पेज की पृष्ठभूमि सफेद है। --- ## वीडियो पृष्ठभूमि (कर्सर-स्क्रब की गई) दो वीडियो व्यूपोर्ट को फिक्स्ड बैकग्राउंड के रूप में भरते हैं (`position: fixed; inset: 0; object-fit: cover`)। इन्हें डेस्कटॉप पर ऑटो-प्ले नहीं किया जाता - इन्हें कर्सर X स्थिति द्वारा स्क्रब किया जाता है। **वीडियो URLs:** - वीडियो 1 (जब कर्सर केंद्र के दाईं ओर जाता है तो दिखाया जाता है): `d8j0ntlcm91z4. cloudfront. net/user_39ca84eAE` - वीडियो 2 (जब कर्सर केंद्र के बाईं ओर जाता है तो दिखाया जाता है): `d8j0ntlcm91z4 .cloudfront.net/user_39ca84eAE` दोनों `<video>` तत्व: `muted`, `playsInline`, `preload="auto"`। `overflow: hidden` के साथ कंटेनर div में लपेटें। दोनों वीडियो के `loadeddata` फायर होने के बाद `opacity 0.3s ease` ट्रांज़िशन के साथ फेड इन करें। **डेस्कटॉप स्क्रबिंग लॉजिक (requestAnimationFrame लूप):** - माउस X स्थिति ट्रैक करें। - व्यूपोर्ट का केंद्र कैलकुलेट करें। केंद्र के दोनों ओर `max(30px, व्यूपोर्ट चौड़ाई का 5%)` का डेड ज़ोन परिभाषित करें। - यदि कर्सर डेड ज़ोन के भीतर है, तो सक्रिय वीडियो को `currentTime = 0` पर रखें। - यदि कर्सर डेड ज़ोन से बाईं ओर बाहर निकलता है, तो वीडियो 2 दिखाएं और उसे स्क्रब करें: `progress = (centerX - deadZone - cursorX) / (centerX - deadZone)`, फिर `video.currentTime = progress * video.duration`। - यदि कर्सर डेड ज़ोन से दाईं ओर बाहर निकलता है, तो वीडियो 1 दिखाएं और उसे स्क्रब करें: `progress = (cursorX - centerX - deadZone) / (viewportWidth - centerX - deadZone)`, फिर `video.currentTime = progress * video.duration`। - महत्वपूर्ण: `currentTime` केवल तभी अपडेट करें जब `!video.seeking` - यह ब्राउज़र द्वारा पिछले सीक के रेंडरिंग को पूरा करने की प्रतीक्षा करके जिटर-युक्त प्लेबैक को रोकता है। - एक समय में केवल एक वीडियो दिखाई देता है (`display: block` / `display: none`)। रेफ़ के माध्यम से ट्रैक करें कि कौन सा साइड "सक्रिय" है; केवल तभी साइड बदलें जब कर्सर डेड ज़ोन को पार कर जाए। **मोबाइल/टैबलेट व्यवहार (< 1024px):** - वीडियो को वैकल्पिक रूप से ऑटो-प्ले करें। वीडियो 1 चलाना शुरू करें। जब यह समाप्त हो जाए, इसे छिपाएं, वीडियो 2 दिखाएं, शुरुआत से चलाएं। जब वीडियो 2 समाप्त हो जाए, वापस स्विच करें। निरंतर लूप। --- ## कस्टम कर्सर (केवल डेस्कटॉप, टच पर छिपा हुआ) - नेटिव कर्सर छिपाएं (रैपर पर `cursor: none`)। - एक 48x48px SVG सर्कल कर्सर रेंडर करें जो माउस का अनुसरण करता है सीधे DOM स्टाइल अपडेट के माध्यम से (`mousemove` पर `left`/`top`)। `position: fixed; pointer-events: none; z-index: 50; transform: translate(-50%, -50%); mix-blend-mode: exclusion` का उपयोग करता है। - SVG में एक सफेद सर्कल होता है (स्ट्रोक 2.5px, त्रिज्या 22.75) जिसके अंदर एक कस्टम जापानी/स्टाइलाइज़्ड ग्लिफ़ पाथ होता है, जो सफेद भरा होता है। --- ## लेआउट तत्व (सभी `position: fixed; pointer-events: none; z-index: 20; mix-blend-mode: exclusion`) सभी टेक्स्ट सफेद है। फ़ॉन्ट: `Inter Tight`, पूरे में weight 500। ### 1. लोगो (ऊपर-बाएँ) - फिक्स्ड `top: 32px; left: 32px` (डेस्कटॉप), `top: 16px; left: 16px` (मोबाइल)। - SVG वर्डमार्क "prmpt" जिसमें एक सर्कल वाला R आइकन है। ViewBox `0 0 355 110`, प्रतिक्रियात्मक रूप से स्केल करता है: `w-[355px]` डेस्कटॉप, `w-[266px]` टैबलेट, `w-[124px]` मोबाइल। - एंट्रेंस एनीमेशन: `motion.div` फेड अप, `opacity: 0 -> 1, y: 12 -> 0`, अवधि 0.6s, इज़िंग `[0.25, 0.1, 0.25, 1]`, देरी 0s। ### 2. नेविगेशन (ऊपर-दाएँ) - फिक्स्ड `top: 32px; right: 32px` (डेस्कटॉप), `top: 16px; right: 16px` (मोबाइल)। - डेस्कटॉप: "ABOUT" टेक्स्ट (15px अपरकेस), हैमबर्गर आइकन (30x30 SVG, दो क्षैतिज रेखाएं), और "[ CART ]" टेक्स्ट (15px) के साथ पंक्ति। बर्गर और कार्ट के बीच गैप: 50px। - मोबाइल: हैमबर्गर (24x24) + "[ CART ]" (13px), गैप 20px। "ABOUT" छिपा हुआ है। - एंट्रेंस एनीमेशन: लोगो के समान लेकिन देरी 0.15s। ### 3. कैप्शन टेक्स्ट (बाईं ओर, लोगो के नीचे) - फिक्स्ड `left: 32px; top: 244px` (डेस्कटॉप), `left: 16px; top: 118px` (मोबाइल), `top: 180px` (टैबलेट)। - अधिकतम चौड़ाई: 692px (डेस्कटॉप), `calc(50vw - 48px)` (टैबलेट), `calc(100vw - 32px)` (मोबाइल)। - फ़ॉन्ट: 12px, लाइन-ऊंचाई 140%, लेटर-स्पेसिंग -0.04em।