Drommo
Hero con Video Scrubbing al Estilo Apple iPhone
Página web

Hero con Video Scrubbing al Estilo Apple iPhone

Prompt

Hero cinematográfico en React donde un video muted/loop ocupa 100vw x 100vh como fondo y el usuario controla la reproducción con el scroll. Al bajar, el video avanza frame a frame; al subir, retrocede. La implementación mapea scrollYProgress de 0 a 1 hacia video.currentTime usando useMotionValue y useTransform, y suaviza las actualizaciones con requestAnimationFrame para lograr scrubbing fluido. Al 50% del scroll aparece el headline en Playfair Display con staggerChildren; el subtítulo entra con delay de 0.3s, opacity y translateY. Al 80%, el wrapper motion.div del video hace zoom de scale 1 a 1.15. Incluye CTA transparente con borde blanco y hover blanco/texto negro, indicador de scroll pulsante inferior, progress bar superior blanca de 2px, preload metadata y fallback gradient negro a gris oscuro si el video no carga.

Tipo
Página web
Tecnología
HTML, React, Framer Motion, @use-gesture/react
  • hero section
  • Apple style
  • iPhone
  • video scrubbing
  • scroll animation
  • React
  • Framer Motion
  • useGesture
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas

Promptstudio ExperiencePágina web

Promptstudio Experience