Card Swap
A 3D card stack that auto-cycles the front card to the back, pausing on hover.
motionloop3D
Customize
Stack
Card width320px
Card height210px
X offset26px
Y offset22px
Rotation-5°
Scale step0.06
Motion
Swap delay3s
Pause on hover
Style
Corner radius20px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | CardSwapItem[] | gradient set | Cards in the stack, front to back ({ title, subtitle?, tag?, background? }). |
cardWidth | number | 320 | Card width in pixels. |
cardHeight | number | 210 | Card height in pixels. |
delay | number | 3 | Seconds each card stays in front before advancing. |
offsetX | number | 26 | Horizontal shift per card deeper in the stack, in pixels. |
offsetY | number | 22 | Vertical shift per card deeper in the stack, in pixels. |
skew | number | -5 | Rotation per card deeper in the stack, in degrees. |
scaleStep | number | 0.06 | Scale reduction per card deeper in the stack. |
pauseOnHover | boolean | true | Pause the rotation while the pointer is over the stack. |
radius | number | 20 | Card corner radius in pixels. |
label | string | "Auto-rotating card stack" | Accessible name for the stack. |