Card Spread

A fanned deck of cards that spreads open on hover

card-spread-tw

Customize

Arc

Radius

440

Card Width

168

Card Height

252

Card Radius

Card Padding

Shadow

0.28

Lift

Push

3.6

Push Reach

Rest Opacity

1.00

Stiffness

150

Damping

Mass

1.0

Stagger

0.06

Max Scale

1.00

Card Color

Border Color

FitInteractive

Props

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.

Default7 images

cardWidthnumber

Width of a single card in pixels.

Default168

cardHeightnumber

Height of a single card in pixels.

Default252

cardRadiusnumber

Corner radius of a card in pixels.

Default12

radiusnumber

Radius of the invisible circle the cards hang from. Larger values flatten the fan.

Default440

arcnumber

Total angle the fan covers, in degrees.

Default88

cardColorstring

Frame colour behind each image.

Default"#ffffff"

cardPaddingnumber

Padding between the frame edge and the image, in pixels.

Default0

borderColorstring

Hairline border drawn around each card.

Default"transparent"

shadownumber

Drop shadow strength. Set to 0 to remove it.

Default0.28

liftnumber

How far a hovered card slides outward along its own axis, in pixels.

Default26

pushnumber

Degrees the nearest neighbour is pushed aside on hover.

Default3.6

pushReachnumber

How many neighbours on each side react to a hover.

Default3

restOpacitynumber

Opacity applied to the cards that are not hovered.

Default1

stiffnessnumber

Spring stiffness of the fan and hover motion.

Default150

dampingnumber

Spring damping. Lower values overshoot further.

Default16

massnumber

Spring mass of the fan and hover motion.

Default1

staggernumber

Seconds between each card fading in on mount.

Default0.06

fitboolean

Scale the whole fan down so it always fits the container.

Defaulttrue

maxScalenumber

Upper bound applied to the fit scale.

Default1

interactiveboolean

Enable pointer and keyboard interaction.

Defaulttrue

classNamestring

Optional className applied to the root.

Default-

styleCSSProperties

Optional inline style applied to the root.

Default-

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.