Kinematisches Video-Scrollytelling Interaktive Erfahrung

# Rollen- & Architektur-Direktive: Kinematische Video-Scrollytelling-Interaktive-Erfahrung Agieren Sie als Elite Creative Technologist und Art Director. Bauen Sie eine luxuriöse, Apple/Nike-würdige interaktive Scrollytelling-Webanwendung, betrieben mit React 18+, TypeScript, Tailwind CSS, Lucide React und Motion. Das Kernkonzept ist eine **Kinematische Video-Storytelling-Erfahrung**, bei der ein zugrunde liegendes Hintergrundvideo nahtlos mit einem interaktiven redaktionellen HUD-Overlay, zeitcodierten Kapiteln, einer Ambient-Audio-Engine und modalen Popups synchronisiert wird. --- ## 1. Interaktions- & Visuelle Architektur-Standards 1. **Hintergrund-Kino-Engine:** - Vollbildschirm-responsives `<video>`-Element mit nahtlosen Wiedergabesteuerungen (Play/Pause, Scrub, sanftes Seek, Sound-Toggle, Loop/Neustart). - Subtile Vignette, kinematische Gradient-Fades (`from-black/80 via-transparent to-black/90`) und atmosphärisches Korn. - Sanfte, nicht blockierende Synchronisierung zwischen der aktuellen Wiedergabezeit des Videos (`currentTime`) und dem aktiven redaktionellen Szenen-Overlay. 2. **Redaktionelle UI & Luxus-Glassmorphismus:** - **Header-HUD**: Linke Marken-Kennung + aktuelle Kapitel-Pille (`Kapitel 01 · ...`), mittige/rechte minimalistische Szenen-Navigationslinks mit aktiven Unterstreichungen, Sound-Toggle-Pille und ein externer Marken-CTA. - **Hauptinhaltsbereich**: - Riesige, hochwirkungsvolle Display-Headlines (z. B. tracking-tight, Großbuchstaben, fette Typografie). - Saubere, ausgewogene Absätze mit `[text-wrap:balance]` (vermeidet unschöne Ausfransungen oder einzelne Waisen-Wörter in Zeilen). - Kontextbezogene interaktive CTA-Buttons, die elegante glassmorphe Modal-Fenster auslösen (z. B. Spielbericht, Taktische Aufschlüsselung, Highlights, Trophäen-Spezifikationen). - **Seitliche Aufzugs-Navigation**: Vertikale Bullet-Pillen-Schiene am rechten Rand für 1-Klick-Sprünge zu bestimmten Video-Kapiteln. - **Untere Kino-Leiste**: Glassmorphe Timeline mit Play/Pause-Button, laufendem Timecode (`00:01.5 / 00:18.0`), segmentierten Kapitel-Fortschrittsbalken mit animierter Füllung und Kapitelnummern-Chips (`01`, `02`, `03`...). 3. **Interaktive Komponenten (z. B. Player-/Produkt-/Feature-Karten):** - Interaktive Glaskarten mit cursorfolgenden radialen Spotlight-Scheins (`radial-gradient`, die Mauskoordinaten verfolgen). - Saubere Badges, Avatare mit sanften Fallback-Handlern, Statistik-Highlights und externe Detail-Links. 4. **Web-Audio- & Sound-Design-Engine:** - Integrierter Web-Audio-API-Synthesizer für taktile UI-Klicks, kinematische Bass-Whooshes bei Kapitelübergängen und Ambient-Audio-Unterstützung mit einem Master-Stummschalt-Toggle. 5. **Datenarchitektur (`src/scenes.ts`):** - Erstellen Sie ein sauberes, modulares Konfigurationsarray, in dem jede Szene definiert ist mit: ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - Stellen Sie ein realistisches 5-Szenen-Platzhalter-Setup bereit, damit die App sofort kompiliert und vollständig aussieht. --- ## 2. Interaktiver Benutzerleitfaden / Coaching-Workflow Wenn dieser Prompt zum ersten Mal eingereicht wird, implementieren Sie sofort die vollständige, funktionierende Vorlage mit sauberen Platzhalter-Videos und -Assets. Nach Abschluss des ersten Builds **führen Sie den Benutzer in Ihrer Antwort mit dem folgenden 4-Schritte-Onboarding-Plan**, der erklärt, wie das Projekt angepasst werden kann: - **Schritt 1: Video hochladen**: Geben Sie den Link zu Ihrem Video an (oder laden Sie es in `/public/videos/` hoch). - **Schritt 2: Kapitel & Zeitcodes definieren**: Teilen Sie der KI mit, welche Szenen oder Momente in Ihrem Video existieren (z. B. `00:00 - 00:04: Intro`, `00:04 - 00:09: Hauptfunktion` usw.). - **Schritt 3: Inhalte & Medien hinzufügen**: Geben Sie Ihren Markennamen, Headlines, Untertitel und Player-/Produktkarten mit Fotos oder URLs an. - **Schritt 4: Art Direction & Branding**: Wählen Sie Ihre Marken-Akzentfarbe (z. B. Arsenal-Rot, Cyber-Cyan, Luxus-Gold, Stealth-Monochrom) und den Typografie-Stil. --- Los geht's: Bauen Sie jetzt die erste produktionsreife Version dieser Anwendung mit Platzhalter-Szenen und interaktiven Funktionen.