Docs / Components / Stacked Image Cards
Stacked Image Cards
A stack of image cards that smoothly unstack and flatten horizontally side-by-side on section hover with fluid spring animation dynamics.
Dependencies
Install the following dependencies to use this component:
1npm install framer-motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add stacked-image-cards
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | StackedImageCardItem[] | DEFAULT_ITEMS | Array of image card objects containing id, src, alt, title, subtitle, and badge. |
| cardWidth | number | 200 | Width of individual cards in pixels. |
| cardHeight | number | 280 | Height of individual cards in pixels. |
| rotationSpread | number | 14 | Rotation spread angle in degrees when stacked. |
| flattenGap | number | 16 | Horizontal gap between cards when flattened on hover. |
| hideUntilHover | boolean | false | Whether the card stack is hidden until container section is hovered. |
| staggerDelay | number | 0.035 | Stagger delay between cards during spring animation. |
| className | string | '' | Additional container CSS classes. |