Scroll inside the preview ↓

Normal scrolling resumes here.

Controls

cardYOffset%

cardScaleStep

stepInterval

stepDuration

scrollLengthPerCard

background

exitLast

Sticky Cards

A stack of same-size cards pinned on scroll. The front card lifts away, then the next, one by one.

$ pnpm dlx shadcn@latest add @tweenly/sticky-cards

import { StickyCards } from "@/components/sticky-cards"

export function Demo() {
  return (
    <StickyCards cards={cards} />
  )
}

Updates live as you change the controls. Only non-default props are included.