Card Swap

Cards animate position swapping with smooth layout transitions.

Default

Every prop is wired to the controls underneath. The front card drops, the rest move up, and it returns to the back of the stack.

Card stacks have never looked so good

Just look at it go!

Smooth

Reliable

Customizable

Pause On Hover

Card Distance60

Vertical Distance70

Delay (ms)5000

Skew Amount6

Easing

Prop	Type	Default	Description
`width`	`number \| string`	`500`	Width of the card container.
`height`	`number \| string`	`400`	Height of the card container.
`cardDistance`	`number`	`60`	X-axis spacing between cards.
`verticalDistance`	`number`	`70`	Y-axis spacing between cards.
`delay`	`number`	`5000`	Milliseconds between card swaps.
`pauseOnHover`	`boolean`	`false`	Whether to pause animation on hover.
`skewAmount`	`number`	`6`	Degree of slope for top/bottom edges.
`easing`	`'linear' \| 'elastic'`	`'elastic'`	Animation easing type.

Prop	Type	Default	Description
`customClass`	`string`	`''`	Extra class added to the card. Put one CardSwapCard per card in the default slot of CardSwap.

Prop	Type	Default	Description
`card-click`	`(idx: number) => void`	-	Emitted when a card is clicked, with its index in the slot.

Keyboard shortcuts and ARIA behavior.

The swap runs on a timer and pointer hover only. Keep any essential content outside the stack, and turn on pauseOnHover for content people need time to read.