Deal Stack Cards Scroll
A pinned deck where each card rises from below, lands on the pile at its own fixed tilt, then gets pushed off toward the top left as the cards behind it arrive. Departure speed is scaled per card, so the earliest card travels furthest and the stack fans out diagonally instead of leaving as one block. Each card only starts moving once the previous one has fully landed.
npx shadcn@latest add https://ui.aryank.space/r/deal-stack-cards-scroll.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | DealStackCard[] | Six BLANK cards | Image and label per card. The pin length and per-card slice both follow the array length. |
| rotations | number[] | [-12, 10, -5, 5, -5, -2] | Resting tilt for each card, applied on arrival. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
cardstextCard images and their reference labels.
rotationstextPer-card resting tilt in degrees.
gsaplenis