Card Swap
A deck of cards stacked in depth. On a timer the front card drops away and slides in at the back.
import { CardSwap } from "pleate/effects/card-swap";Highlights
Customizable
Every token, radius and color follows your palette.
Props
- children
One child per card.
ReactNode- width / height
Card size in px.
numberdefault 320 / 220- distanceX / distanceY
Offset between stacked cards in px.
numberdefault 40 / 36- interval
Time each card stays in front, ms.
numberdefault 4000- pauseOnHover
Stop the timer under the pointer.
booleandefault true- label
Accessible name.
stringdefault "Cards"
Accessibility
- Only the front card is exposed to assistive tech.
- A pause button stops the timer; hover and focus pause it too.
- Reduced motion stops the timer and the button steps through the cards.