Card Spread
A fanned deck of cards that spreads open on hover
Customize
Props
23| Name | Type | Default | Description |
|---|---|---|---|
cards | CardSpreadCard[] | 7 images | Images laid out along the arc, left to right. Each entry takes src, alt and an optional id. |
cardWidth | number | 168 | Width of a single card in pixels. |
cardHeight | number | 252 | Height of a single card in pixels. |
cardRadius | number | 12 | Corner radius of a card in pixels. |
radius | number | 440 | Radius of the invisible circle the cards hang from. Larger values flatten the fan. |
arc | number | 88 | Total angle the fan covers, in degrees. |
cardColor | string | "#ffffff" | Frame colour behind each image. |
cardPadding | number | 0 | Padding between the frame edge and the image, in pixels. |
borderColor | string | "transparent" | Hairline border drawn around each card. |
shadow | number | 0.28 | Drop shadow strength. Set to 0 to remove it. |
lift | number | 26 | How far a hovered card slides outward along its own axis, in pixels. |
push | number | 3.6 | Degrees the nearest neighbour is pushed aside on hover. |
pushReach | number | 3 | How many neighbours on each side react to a hover. |
restOpacity | number | 1 | Opacity applied to the cards that are not hovered. |
stiffness | number | 150 | Spring stiffness of the fan and hover motion. |
damping | number | 16 | Spring damping. Lower values overshoot further. |
mass | number | 1 | Spring mass of the fan and hover motion. |
stagger | number | 0.06 | Seconds between each card fading in on mount. |
fit | boolean | true | Scale the whole fan down so it always fits the container. |
maxScale | number | 1 | Upper bound applied to the fit scale. |
interactive | boolean | true | Enable pointer and keyboard interaction. |
className | string | - | Optional className applied to the root. |
style | CSSProperties | - | Optional inline style applied to the root. |
cardsCardSpreadCard[]Images laid out along the arc, left to right. Each entry takes src, alt and an optional id.
7 imagescardWidthnumberWidth of a single card in pixels.
168cardHeightnumberHeight of a single card in pixels.
252cardRadiusnumberCorner radius of a card in pixels.
12radiusnumberRadius of the invisible circle the cards hang from. Larger values flatten the fan.
440arcnumberTotal angle the fan covers, in degrees.
88cardColorstringFrame colour behind each image.
"#ffffff"cardPaddingnumberPadding between the frame edge and the image, in pixels.
0borderColorstringHairline border drawn around each card.
"transparent"shadownumberDrop shadow strength. Set to 0 to remove it.
0.28liftnumberHow far a hovered card slides outward along its own axis, in pixels.
26pushnumberDegrees the nearest neighbour is pushed aside on hover.
3.6pushReachnumberHow many neighbours on each side react to a hover.
3restOpacitynumberOpacity applied to the cards that are not hovered.
1stiffnessnumberSpring stiffness of the fan and hover motion.
150dampingnumberSpring damping. Lower values overshoot further.
16massnumberSpring mass of the fan and hover motion.
1staggernumberSeconds between each card fading in on mount.
0.06fitbooleanScale the whole fan down so it always fits the container.
truemaxScalenumberUpper bound applied to the fit scale.
1interactivebooleanEnable pointer and keyboard interaction.
trueclassNamestringOptional className applied to the root.
-styleCSSPropertiesOptional inline style applied to the root.
-