Página webConstruye un show tipográfico donde letras 3D reaccionan a la música y a un video atmosférico de fondo. El usuario puede seleccionar stems de audio que alteran la animación y el…

Construye una escena 3D cinematográfica inmersiva donde un cortometraje por capítulos controla en tiempo real la iluminación, cámara y partículas a través de un timeline interactivo. **Entregables:** index.html, styles.css, cinema.js, carpeta assets/ con cortometraje en capítulos, pistas de audio stem, modelos y LUTs. **Stack:** Three.js, video HTML5, postprocessing (bloom, color grading), GSAP para timeline. **Descripción:** Un cortometraje se integra en una escena 3D: paneles flotantes reproducen capítulos y la iluminación, cámara y partículas reaccionan en tiempo real a la pista de audio y marcadores del video, generando una narrativa audiovisual inmersiva. **Organización del timeline:** El cortometraje se divide en capítulos (cap1, cap2…). Cada capítulo tiene metadatos JSON con start, end, cameraCue, lightingCue, particleCue. Un timeline interactivo permite scrubbing; el scrubber interpola suavemente cámara y efectos entre cues. **Scrubbing y salto de capítulos:** GSAP interpola cámara y parámetros de postprocessing (exposición, bloom) hacia los valores del capítulo destino. Crossfade de audio entre stems al cambiar capítulo. Subtítulos y notas sincronizados. **Integración de video y texturas:** Videos como texturas en planos 3D; overlays HTML para subtítulos y accesibilidad. Versiones proxy de baja resolución durante scrubbing; alta calidad al detenerse. **Controles y microinteracciones:** Play/Pause, Capítulos, Modo Cinemático (dolly automático), Modo Explorador (control libre). Marcadores de capítulo con previews en miniatura; compartir enlace con timestamp. **Accesibilidad y fallback:** Transcripción completa y versión lineal con capítulos navegables. prefers-reduced-motion desactiva movimientos no esenciales y ofrece cortes directos entre capítulos. **Calidad visual y rendimiento:** LUTs para color grading en postprocessing; HDRI para iluminación realista. LOD y culling agresivo; pausar render fuera de viewport. Preload de stems; AudioContext para sincronización precisa. **Pruebas y métricas:** Latencia de scrubbing, tiempos de carga por capítulo, tasa de abandono. Pruebas en desktop y móviles con perfiles de red variados.
«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.
Página webConstruye un show tipográfico donde letras 3D reaccionan a la música y a un video atmosférico de fondo. El usuario puede seleccionar stems de audio que alteran la animación y el…
Página webAula virtual en light mode con madera pálida y acentos en azul marino. Cada lección combina un video tutorial con una simulación 3D sincronizada. El video actúa como master…
Página webConstruye un aula 3D elegante donde videos tutoriales y simulaciones 3D están completamente sincronizados, con ejercicios interactivos sandbox. **Entregables:** index.html…
Página webCrea una landing Premium en Next.js para “Aura Skin”, una marca de cosméticos. La experiencia debe usar scroll 3D cinematográfico, imágenes de producto reales, hero sticky…
Página webCrea una landing Premium en Next.js para “Nébula Beauty”, una marca de cosméticos. La experiencia debe usar scroll 3D cinematográfico, imágenes de producto reales, hero sticky…
Página webCrea una landing Premium en Next.js para “Ritual Lab”, una marca de cosméticos. La experiencia debe usar scroll 3D cinematográfico, imágenes de producto reales, hero sticky…
Página webCrea una landing Premium en Next.js para “Savia Derm”, una marca de cosméticos. La experiencia debe usar scroll 3D cinematográfico, imágenes de producto reales, hero sticky…
Página webCrea una landing Premium en Next.js para “Luma Care”, una marca de cosméticos. La experiencia debe usar scroll 3D cinematográfico, imágenes de producto reales, hero sticky…