127 Components
Accordion Stack Cards
CardsSpatial 3D card deck that fans out into a vertical cascade on pointer hover or focus and cycles card order with spring layout projection.
01 // PHYSICS ENGINE120 Hz
Hooke's Law Solver
Continuous velocity-preserving spring interpolation
02 // COMPOSITOR0.0 ms
Zero React Re-Renders
Direct MotionValue & CSS mask-image projection
03 // DISTRIBUTION1-Click
Shadcn Registry v2
Copy-paste source ownership with strict TypeScript
Hover to fan out deck • Click any card to cycle stack
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/accordion-stack-cards.json"
Props
TypeScript props supported by <AccordionStackCards />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | StackCardItem[] | — | Array of card items containing id, badge, title, metric, and subtitle. |
| stiffness | number | 300 | Spring stiffness coefficient for deck expansion and card cycling. |
| damping | number | 25 | Spring damping coefficient controlling stack oscillation decay. |
Key Features
- Depth-scaled 3D card stack that smoothly fans out into an inspectable vertical cascade on hover or keyboard focus.
- Click or press Enter/Space on any card to cycle the front card to the back with Hooke's Law layout springs.
- Zero external dependencies beyond Framer Motion and Lucide icons.
Keyboard & Accessibility
- Each card is keyboard-focusable and automatically expands the stack when focused via Tab.
- Supports Enter and Space keys to cycle cards through the deck.
- Disables scale depth transformations when prefers-reduced-motion is enabled.