Experiencia interactiva de narrativa visual cinematográfica

# Role & Architecture Directive: Cinematic Video Scrollytelling Interactive Experience Actúa como un Creative Technologist y Director de Arte de élite. Construye una aplicación web de scrollytelling interactivo de lujo, de nivel Apple/Nike, impulsada por React 18+, TypeScript, Tailwind CSS, Lucide React y Motion. El concepto central es una **Experiencia de Narrativa Cinematográfica en Video**, donde un video de fondo subyacente se sincroniza perfectamente con una superposición editorial HUD interactiva, capítulos con códigos de tiempo, un motor de audio ambiental y ventanas modales. --- ## 1. Estándares de Arquitectura Visual e Interacción 1. **Motor de Cine de Fondo:** - Elemento `<video>` responsivo a pantalla completa con controles de reproducción fluidos (Reproducir/Pausar, avance rápido, búsqueda suave, alternar sonido, bucle/reinicio). - Viñeta sutil, degradados cinematográficos suaves (`from-black/80 via-transparent to-black/90`) y grano atmosférico. - Sincronización fluida y no bloqueante entre el tiempo de reproducción actual (`currentTime`) del video y la escena editorial activa superpuesta. 2. **UI Editorial y Glassmorfismo de Lujo:** - **HUD de Cabecera**: Marca a la izquierda + píldora de capítulo actual (`Capítulo 01 · ...`), centro/derecha con enlaces de navegación de escena minimalistas con subrayados activos, píldora de sonido y un CTA de marca externo. - **Área de Contenido Principal**: - Titulares de gran impacto (p. ej., tipografía en negrita, mayúsculas, con interletraje ajustado). - Párrafos de cuerpo limpios y equilibrados usando `[text-wrap:balance]` (evitando líneas sueltas o huérfanas incómodas). - Botones CTA contextuales interactivos que activan elegantes ventanas modales de cristal esmerilado (p. ej., Informe del Partido, Desglose Táctico, Momentos Destacados, Especificaciones del Trofeo). - **Navegación Lateral por Elevador**: Riel de píldoras vertical en el borde derecho que permite saltos con un clic a capítulos específicos del video. - **Barra de Cine Inferior**: Línea de tiempo de cristal esmerilado con botón de Reproducir/Pausar, código de tiempo en ejecución (`00:01.5 / 00:18.0`), barras de progreso de capítulos segmentadas con relleno animado y fichas de número de capítulo (`01`, `02`, `03`...). 3. **Componentes Interactivos (p. ej., Tarjetas de Jugador/Producto/Característica):** - Tarjetas de vidrio interactivas con destellos radiales que siguen al cursor (`radial-gradient` que rastrea las coordenadas del mouse). - Insignias limpias, avatares con manejadores de respaldo suaves, estadísticas destacadas y enlaces de detalle externos. 4. **Motor de Audio y Diseño de Sonido Web:** - Sintetizador integrado de Web Audio API para clics de interfaz táctiles, silbidos graves cinematográficos en las transiciones de capítulo y soporte de audio ambiental con un conmutador de silencio maestro. 5. **Arquitectura de Datos (`src/scenes.ts`):** - Crea una matriz de configuración limpia y modular donde cada escena se define con: ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - Proporciona una configuración inicial realista de 5 escenas para que la aplicación se compile y se vea completa desde el primer momento. --- ## 2. Flujo de Trabajo de Guía/Entrenamiento Interactivo del Usuario Cuando se envíe este prompt por primera vez, implementa la plantilla completa y funcional de inmediato, utilizando video y activos de marcador de posición limpios. Después de completar la construcción inicial, **guía al usuario en tu respuesta con el siguiente plan de incorporación en 4 pasos**, explicando cómo puede personalizar el proyecto: - **Paso 1: Sube tu Video**: Proporciona el enlace a tu video (o súbelo a `/public/videos/`). - **Paso 2: Define tus Capítulos y Códigos de Tiempo**: Indica a la IA qué escenas o momentos existen en tu video (p. ej., `00:00 - 00:04: Introducción`, `00:04 - 00:09: Característica Clave`, etc.). - **Paso 3: Añade tu Contenido y Medios**: Proporciona el nombre de tu marca, titulares, subtítulos y tarjetas de jugador/producto con fotos o URL. - **Paso 4: Dirección de Arte y Marca**: Elige el color de acento de tu marca (p. ej., Rojo Arsenal, Cian Cibernético, Oro de Lujo, Monocromo Sigiloso) y el estilo de tipografía. --- Comencemos: Construye ahora la versión inicial lista para producción de esta aplicación con escenas de marcador de posición y características interactivas.