Locomotive Infinite Scroll
Design an immersive infinite scroll landing page inspired by Locomotive Scroll v5 and Lenis. Ideal for landing pages imersivas, storytelling digital, portfolios criativos, sites de agências, apresentações de produto premium, one-page narrativas. AI-ready template.
Use case: Landing pages imersivas, Storytelling digital, Portfolios criativos, Sites de agências, Apresentações de produto premium, One-page narrativas
Historical Context
Locomotive Scroll nasceu no estúdio canadense Locomotive.ca como solução para scroll suave e detecção de viewport. A v5 (2024) é uma reescrita completa baseada em Lenis, com apenas 9.4kB gzipped, dual IntersectionObserver, parallax via data-attributes e progress tracking via CSS variables. Representa a evolução do scroll-hijacking para scroll-enhancement acessível.
Technical Specs
Colors
Primary
Secondary
Effects
Smooth scroll via Lenis (lerp: 0.1, duration: 1.2), parallax layers com data-scroll-speed (0.1 a 0.8), scroll progress como CSS variable (--progress 0-1), viewport detection com IntersectionObserver, fade-in/slide-up on scroll (translate3d + opacity), staggered reveal (delay incremental 100ms), horizontal scroll sections, scroll-triggered counters, kinetic typography com velocidades diferentes, sticky sections com scroll progress, easing customizado (exponential ease-out)
Light/Dark
✓ Full / ✓ Full
Related
Last synced: 4/1/2026