Expérience interactive de scrollytelling vidéo cinématographique

Voici la traduction en français, en préservant tous les éléments demandés : # Directive d'Architecture & de Rôle : Expérience Interactive de Scrollytelling Vidéo Cinématographique Agissez en tant que Technologue Créatif et Directeur Artistique d'élite. Construisez une application web interactive de scrollytelling de luxe, de qualité Apple/Nike, propulsée par React 18+, TypeScript, Tailwind CSS, Lucide React et Motion. Le concept central est une **Expérience de Narration Vidéo Cinématographique**, où une vidéo de fond se synchronise de manière transparente avec une superposition éditoriale HUD interactive, des chapitres avec timecodes, un moteur audio ambiant et des fenêtres modales. --- ## 1. Normes d'Architecture Visuelle et d'Interaction 1. **Moteur Cinéma de Fond :** - Élément `<video>` responsive plein écran avec contrôles de lecture fluides (Lecture/Pause, défilement, recherche fluide, bascule du son, boucle/redémarrage). - Vignettage subtil, dégradés cinématographiques (`from-black/80 via-transparent to-black/90`) et grain atmosphérique. - Synchronisation fluide et non bloquante entre le temps de lecture actuel de la vidéo (`currentTime`) et la superposition éditoriale de la scène active. 2. **UI Éditoriale & Glassmorphisme de Luxe :** - **HUD d'En-tête** : Marque à gauche + pilule de chapitre actuelle (`Chapitre 01 · ...`), navigation minimale de scènes au centre/droite avec soulignements actifs, pilule de bascule du son et CTA de marque externe. - **Zone de Contenu Principal** : - Titres d'affichage géants à fort impact (par ex. tracking-tight, typographie grasse en majuscules). - Paragraphes de corps propres et équilibrés utilisant `[text-wrap:balance]` (évitant les lignes orphelines ou les coupures maladroites). - Boutons CTA interactifs contextuels déclenchant des fenêtres modales élégantes en glassmorphisme (par ex. Rapport de Match, Analyse Tactique, Moments Forts, Spécifications du Trophée). - **Navigation Latérale par Ascenseur** : Rail de pilules vertical sur le bord droit permettant des sauts en un clic vers des chapitres vidéo spécifiques. - **Barre Cinéma Inférieure** : Chronologie en glassmorphisme avec bouton Lecture/Pause, timecode en cours (`00:01.5 / 00:18.0`), barres de progression de chapitres segmentées avec remplissage animé et pastilles de numéros de chapitres (`01`, `02`, `03`...). 3. **Composants Interactifs (par ex. Cartes Joueur/Produit/Fonctionnalité) :** - Cartes en verre interactives avec reflets radiaux suivant le curseur (`radial-gradient` suivant les coordonnées de la souris). - Badges propres, avatars avec gestionnaires de repli fluides, points forts statistiques et liens de détail externes. 4. **Moteur Audio Web & Conception Sonore :** - Synthétiseur intégré utilisant l'API Web Audio pour les clics UI tactiles, les whooshes de basse cinématographiques lors des transitions de chapitres et le support audio ambiant avec une bascule de coupure du son maître. 5. **Architecture des Données (`src/scenes.ts`) :** - Créez un tableau de configuration propre et modulaire où chaque scène est définie avec : ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - Fournissez une configuration de 5 scènes réalistes en placeholder au départ afin que l'application compile et paraisse complète dès la sortie de la boîte. --- ## 2. Flux de Travail Interactif de Guidance / Coaching Utilisateur Lorsque cette invite est soumise pour la première fois, implémentez immédiatement le modèle complet et fonctionnel en utilisant des vidéos et des ressources placeholder propres. Après avoir terminé la construction initiale, **guidez l'utilisateur dans votre réponse avec le plan d'intégration en 4 étapes suivant**, expliquant comment personnaliser le projet : - **Étape 1 : Téléversez votre vidéo** : Fournissez le lien vers votre vidéo (ou téléversez-la dans `/public/videos/`). - **Étape 2 : Définissez vos chapitres et timecodes** : Dites à l'IA quelles scènes ou moments existent dans votre vidéo (par ex. `00:00 - 00:04 : Introduction`, `00:04 - 00:09 : Fonctionnalité clé`, etc.). - **Étape 3 : Ajoutez votre contenu et vos médias** : Fournissez votre nom de marque, titres, sous-titres et cartes joueur/produit avec photos ou URL. - **Étape 4 : Direction artistique et image de marque** : Choisissez votre couleur d'accent de marque (par ex. Rouge Arsenal, Cyan Cyber, Or de Luxe, Monochrome Furtif) et votre style typographique. --- Commençons : Construisez maintenant la version initiale prête pour la production de cette application avec des scènes placeholder et des fonctionnalités interactives.