सिनेमैटिक वीडियो स्क्रॉलीटेलिंग इंटरैक्टिव अनुभव

# भूमिका और वास्तुकला निर्देश: सिनेमैटिक वीडियो स्क्रॉलटेलिंग इंटरैक्टिव अनुभव एक एलीट क्रिएटिव टेक्नोलॉजिस्ट और आर्ट डायरेक्टर के रूप में कार्य करें। React 18+, TypeScript, Tailwind CSS, Lucide React, और Motion द्वारा संचालित एक लक्ज़री, Apple/Nike-ग्रेड इंटरैक्टिव स्क्रॉलटेलिंग वेब एप्लिकेशन बनाएं। मुख्य अवधारणा एक **सिनेमैटिक वीडियो स्टोरीटेलिंग अनुभव** है, जहां एक अंतर्निहित पृष्ठभूमि वीडियो एक इंटरैक्टिव संपादकीय 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. **वेब ऑडियो और ध्वनि डिज़ाइन इंजन:** - स्पर्शनीय UI क्लिक, चैप्टर ट्रांज़िशन पर सिनेमैटिक बास वूश, और मास्टर म्यूट टॉगल के साथ परिवेशी ऑडियो समर्थन के लिए अंतर्निहित वेब ऑडियो 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: कला निर्देशन और ब्रांडिंग**: अपना ब्रांड एक्सेंट रंग (जैसे आर्सेनल रेड, साइबर सियान, लक्ज़री गोल्ड, स्टील्थ मोनोक्रोम) और टाइपोग्राफी शैली चुनें। --- आइए शुरू करें: प्लेसहोल्डर दृश्यों और इंटरैक्टिव सुविधाओं के साथ इस एप्लिकेशन का प्रारंभिक प्रोडक्शन-रेडी संस्करण अभी बनाएं।