Docs/Sticky 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

Usage

API Reference

PropTypeDefault
cardsArray of card objects. Each item requires a title (string) and src (image URL). Defaults to 5 Unsplash landscape photos.
StickyScrollCardItem[]—
hintShort hint label shown above the card stack before scrolling begins.
string"scroll down to see card stack"
classNameAdditional CSS classes applied to the outer container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv
import { StickyScrollCards } from "@/components/ui/sticky-scroll-cards"

export default function Page() {
  return <StickyScrollCards />
}