DocsSticky Scroll Cards

Sticky Scroll Cards

A scroll-driven card stack where images pin in place and scale down as you scroll, creating a satisfying layered depth effect.

Installation

pnpm dlx shadcn@latest add @componentry/sticky-scroll-cards

Dependencies: framer-motion lenis

Usage

API Reference

PropTypeDefault
cardsStickyScrollCardItem[]

Array of card objects. Each item requires a title (string) and src (image URL). Defaults to 5 Unsplash landscape photos.

—
hintstring

Short hint label shown above the card stack before scrolling begins.

"scroll to explore"
classNamestring

Additional CSS classes applied to the outer container.

—

Working with this component

Using your own cards

Pass cards as an array of objects with title and src. Each title is used for the image alternative text and the visible caption, so describe the image rather than numbering the cards.

Page layout

The component uses viewport-height sticky sections, page-scroll progress, and a Lenis root wrapper. Give it room in a scrolling page. If your application already manages smooth scrolling, adapt the copied source to share that instance rather than mounting competing roots.

Reduced motion

The source checks the reduced-motion preference and removes the card scale and rotation transforms, as well as its Lenis wrapper. The images and captions remain in the scroll sequence.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousSplit Flap DisplayNextWheel Carousel
import { StickyScrollCards } from "@/components/ui/sticky-scroll-cards"
 
export default function Page() {
  return (
    <StickyScrollCards
      hint="Explore the landscapes"
      cards={[
        { title: "Misty Alps", src: "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=1200&q=85" },
        { title: "Sunlit Grove", src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&q=85" },
        { title: "Turquoise Shore", src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&q=85" },
      ]}
    />
  )
}