A tight pile of rotated cards that fans out with an overshooting bounce on hover or focus and settles back on leave.
npx shadcn@latest add https://hyperblur.dev/r/card-bounce-stack.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-bounce-stack.tsx.
import { CardBounceStack } from "@/components/hyperblur/card-bounce-stack"
<CardBounceStack cards={[{ title: "Kyoto", meta: "Oct 12" }, { title: "Lisbon", meta: "Nov 03" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| cards | { title: string; meta?: string; color?: string }[] | 4 sample cards | Cards in the pile, bottom first. |
| open | boolean | Controlled fanned state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial fanned state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when hover, focus, tap or keyboard toggles the stack. | |
| ratio | number | 1.9 | Width divided by height of the area the cards fan across. |
| idle | boolean | true | Open and close the stack on a timer until the pointer arrives. Uncontrolled only. |