Cinematic Video Scrollytelling Interactive Experience

# Role & Architecture Directive: Cinematic Video Scrollytelling Interactive Experience Act as an Elite Creative Technologist and Art Director. Build a luxury, Apple/Nike-grade interactive scrollytelling web application powered by React 18+, TypeScript, Tailwind CSS, Lucide React, and Motion. The core concept is a **Cinematic Video Storytelling Experience**, where an underlying background video syncs seamlessly with an interactive editorial HUD overlay, timecoded chapters, ambient audio engine, and modal popups. --- ## 1. Interaction & Visual Architecture Standards 1. **Background Cinema Engine:** - Full-viewport responsive `<video>` element with seamless playback controls (Play/Pause, scrub, smooth seek, sound toggle, loop/restart). - Subtle vignette, cinematic gradient fades (`from-black/80 via-transparent to-black/90`), and atmospheric grain. - Smooth non-blocking synchronization between the video's current playback time (`currentTime`) and the active editorial scene overlay. 2. **Editorial UI & Luxury Glassmorphism:** - **Header HUD**: Left brand mark + current chapter pill (`Chapter 01 · ...`), center/right minimalist scene navigation links with active underlines, sound toggle pill, and an external brand CTA. - **Main Content Area**: - Giant high-impact display headlines (e.g. tracking-tight, uppercase bold typography). - Clean, balanced body paragraphs using `[text-wrap:balance]` (avoiding awkward ragging or single-word orphan lines). - Contextual interactive CTA buttons that trigger sleek glassmorphic modal windows (e.g., Match Report, Tactical Breakdown, Highlights, Trophy Specs). - **Side Elevator Navigation**: Vertical bullet pill rail on the right edge allowing 1-click jumps to specific video chapters. - **Bottom Cinema Bar**: Glassmorphic timeline with Play/Pause button, running timecode (`00:01.5 / 00:18.0`), segmented chapter progress bars with animated fill, and chapter number chips (`01`, `02`, `03`...). 3. **Interactive Components (e.g., Player/Product/Feature Cards):** - Interactive glass cards with cursor-following radial spotlight sheens (`radial-gradient` tracking mouse coordinates). - Clean badges, avatars with smooth fallback handlers, stats highlights, and external detail links. 4. **Web Audio & Sound Design Engine:** - Built-in Web Audio API synthesizer for tactile UI clicks, cinematic bass whooshes on chapter transitions, and ambient audio support with a master mute toggle. 5. **Data Architecture (`src/scenes.ts`):** - Create a clean, modular configuration array where each scene is defined with: ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - Provide a realistic 5-scene placeholder setup initially so the app compiles and looks complete out of the box. --- ## 2. Interactive User Guidance / Coaching Workflow When this prompt is first submitted, implement the complete, working template immediately using clean placeholder video and assets. After completing the initial build, **guide the user in your response with the following 4-step onboarding plan**, explaining how they can customize the project: - **Step 1: Upload Your Video**: Provide the link to your video (or upload it into `/public/videos/`). - **Step 2: Define Your Chapters & Timecodes**: Tell the AI what scenes or moments exist in your video (e.g., `00:00 - 00:04: Intro`, `00:04 - 00:09: Key Feature`, etc.). - **Step 3: Add Your Content & Media**: Provide your brand name, headlines, subtitles, and player/product cards with photos or URLs. - **Step 4: Art Direction & Branding**: Choose your brand accent color (e.g., Arsenal Red, Cyber Cyan, Luxury Gold, Stealth Monochrome) and typography style. --- Let's begin: Build the initial production-ready version of this application now with placeholder scenes and interactive features.