Kinetik

Una homepage de scroll largo para una marca ficticia de calzado de rendimiento. La zapatilla (modelo 3D) rota mientras haces scroll, el menú ocupa toda la pantalla con previews al pasar el ratón, y añadir un producto lanza una micro-animación hasta la bolsa.

Next.js 15 con App Router y TypeScript. Cada efecto es un componente React cliente con su lógica GSAP o Three.js encapsulada y con limpieza completa. Un único ticker compartido de Lenis y GSAP mantiene el scroll suave, y todo el WebGL se carga de forma perezosa.

Con prefers-reduced-motion activo, el smooth scroll y el fondo animado se desactivan. Los pins de ScrollTrigger se recalculan en orden de documento y el render 3D solo dibuja cuando hay movimiento.