Componentes de Scroll Animations

Componentes de Scroll Animations listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.

ScrollTextReveal — Un titular grande cuyas palabras se revelan según el progreso de scroll (0→1): pasan de tenues, desenfocadas y desplazadas a nítidas y en su sitio, una tras otra con stagger, mientras un relleno de gradiente barre cada palabra al completarse. Auto-reproduce en bucle con easing y responde a wheel/arrastre, volviendo al auto tras una pausa. Respeta prefers-reduced-motion mostrando el titular nítido completo.
TimelineDraw — Línea de tiempo serpenteante cuyo trazo se dibuja según tu progreso de scroll (0→1): los hitos se encienden — punto, halo y etiqueta — al pasar el trazo por ellos, con un cabezal luminoso en la punta. Auto-reproduce en bucle para el preview y responde a rueda o arrastre, volviendo al automático tras un momento de inactividad. Respeta prefers-reduced-motion (línea completa y todos los hitos visibles, sin animación). Solo React + SVG/CSS, sin dependencias.
PinnedShowcase — Escena "pinned" tipo product-showcase de Apple: una tarjeta con gradiente vivo atraviesa varias etapas según el progreso de scroll (0→1) — escala, rota y su color gira mientras los títulos cambian por etapa con crossfade. En reposo auto-reproduce el recorrido en bucle; el wheel o el arrastre lo controlan a mano y retoma el auto-loop tras un momento inactivo. Auto-contenido (sin imágenes) y respeta prefers-reduced-motion mostrando una etapa fija. Solo React + CSS, sin dependencias.
HorizontalScroll — Sección 'pinned' tipo galería horizontal donde el progreso de scroll (0→1) traslada una pista de paneles con gradientes vivos y etiquetas grandes. Un progress 0→1 se auto-reproduce en bucle con easing (vaivén 0→1→0) para el preview; si el usuario hace wheel o arrastra sobre el componente controla el progreso a mano y tras ~1.2s de inactividad retoma el auto-loop. Respeta prefers-reduced-motion: sin auto-loop, progreso fijo a 0. Solo React + CSS, sin dependencias.