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

PropertyTypeDefault
cards

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

StickyScrollCardItem[]—
hint

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

string"scroll down to see card stack"
className

Additional CSS classes applied to the outer container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

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 />
}