Bounce Cards
An overlapping card fan that springs in and spreads apart on hover or focus.
motionhoverspring
Customize
Cards
Card width200px
Card height260px
Corner radius20px
Fan
Fan rotation8°
Resting overlap48px
Spread spacing150px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BounceCardItem[] | gradient set | Cards in the fan ({ title, subtitle?, background? }). |
cardWidth | number | 200 | Card width in pixels. |
cardHeight | number | 260 | Card height in pixels. |
rotate | number | 8 | Fan rotation applied per card away from the center, in degrees. |
stackGap | number | 48 | Horizontal overlap between cards while resting, in pixels. |
spreadGap | number | 150 | Horizontal spacing between cards while spread (hover/focus), in pixels. |
radius | number | 20 | Card corner radius in pixels. |
label | string | "Bounce cards" | Accessible name for the fan. |