ONONC

Bounce Cards

An overlapping card fan that springs in and spreads apart on hover or focus.

motionhoverspring
Hover or focus to spread the cards apart.
Calm

Aurora

Warm

Ember

Cool

Tide

Vivid

Nova

Soft

Dusk

Customize

Cards

Card width200px
Card height260px
Corner radius20px

Fan

Fan rotation
Resting overlap48px
Spread spacing150px

Props

PropTypeDefaultDescription
itemsBounceCardItem[]gradient setCards in the fan ({ title, subtitle?, background? }).
cardWidthnumber200Card width in pixels.
cardHeightnumber260Card height in pixels.
rotatenumber8Fan rotation applied per card away from the center, in degrees.
stackGapnumber48Horizontal overlap between cards while resting, in pixels.
spreadGapnumber150Horizontal spacing between cards while spread (hover/focus), in pixels.
radiusnumber20Card corner radius in pixels.
labelstring"Bounce cards"Accessible name for the fan.