Sticky Scroll Cards
A sequence of images
Images pin and scale into a layered stack. This component uses page scrolling and includes its own smooth-scroll wrapper.
Preview & install Sticky Scroll CardsReact scroll animations
Explore stacking cards, perspective image grids, and full-page galleries driven by scrolling. Each example links to its React source, installation command, and API.
Choose the right scroll structure
A card stack tells a sequential story, a tilted grid shows a collection, and a full-page gallery creates an immersive browsing experience. Decide how much page space the interaction should occupy before choosing an effect.
Scroll Tilted Grid
A gallery with perspective
Images tilt as they move through the viewport. The smoothScroll option lets you avoid adding another Lenis root when your app already has one.
Preview & install Scroll Tilted GridCollection Surfer
A dedicated gallery route
A fixed 3D scene advances with page scroll. It reserves a long scroll area, so give it a dedicated route rather than a small card container.
Preview & install Collection SurferCase Study Flip Stack
An editorial case-study sequence
Cards fold upward to reveal the next story. Choose this when each item needs more editorial context than an image alone.
Preview & install Case Study Flip StackWhy can sticky effects behave differently inside a layout?
An ancestor with overflow can change the scrolling context used by sticky positioning. Check the component in the actual page layout, with its intended scroll space, before embedding it in a constrained panel.