Card Swap Animation

A 3D animated card stack that cycles through multiple cards with configurable depth, skew, distance, and animation easing.

Pumki UI

Card stacks have never looked so goood

Just look at it!

Smooth

Reliable

Customizable

Installation

Usage

1import CardSwap , { Card } from '@/components/pumki-ui/CardSwap';

Wrap multiple <Card> elements inside <CardSwap> to create a rotating stack effect.

1<CardSwap width={300} height={400} cardDistance={50} verticalDistance={60} delay={3000}>
2  <Card customClass="bg-red-500">Card 1</Card>
3  <Card customClass="bg-blue-500">Card 2</Card>
4  <Card customClass="bg-green-500">Card 3</Card>
5</CardSwap>

Props

CardSwap Props

Prop	Type	Default	Description
`width`	`number \| string`	`500`	Width of each card in pixels or CSS units.
`height`	`number \| string`	`400`	Height of each card in pixels or CSS units.
`cardDistance`	`number`	`60`	Horizontal offset distance between cards in the stack.
`verticalDistance`	`number`	`70`	Vertical offset distance between cards in the stack.
`delay`	`number`	`5000`	Delay in milliseconds between card swaps.
`pauseOnHover`	`boolean`	`false`	Pauses the card swap animation when hovered.
`onCardClick`	`(idx: number) => void`	`-`	Callback triggered when a card is clicked, passing its index.
`skewAmount`	`number`	`6`	Skew value applied to cards for perspective effect.
`easing`	`”linear” \| “elastic"`	`"elastic”`	Animation easing style for swaps.
`children`	`ReactNode`	`-`	List of `<Card>` elements to display in the swap animation.

Card Props

Prop	Type	Default	Description
`customClass`	`string`	`-`	Additional custom class names for the card element.
`className`	`string`	`-`	Optional extra class names passed directly to the card element.
`…rest`	`HTMLDivElement props`	`-`	Any other standard `div` attributes.