Visuals
3
5
0.05
-10
Physics
15
Auto-swipe
Why We're Better
True Physics
Spring-based interactions with framer-motion, not just CSS transitions. Native-feel drag and release.
Smart Audio
Persistent volume state across the entire feed. Unmute once, all subsequent cards honor it.
Liquid Depth
Background cards react continuously to gestures. They scale and move as you drag the top card.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
| data | CardItem[] | — | Array of card items (id, image, video?, title?). |
| stackDepth | number | 3 | Max cards rendered in DOM (active + next N−1). |
| scaleRatio | number | 0.05 | Scale step between stacked cards. |
| yOffset | number | -10 | Vertical offset (px) per stack level. |
| cardMaxWidth | number | 380 | Max width (px) of the card stack. |
| messyStack | boolean | true | Random rotation on background cards. |
| scatterRandomness | number | 5 | Max rotation (deg) for messy stack. |
| animateRotation | boolean | true | Map drag to rotation. |
| animateScale | boolean | true | Map drag to scale. |
| swipeThreshold | number | 150 | Min drag (px) to trigger swipe. |
| maxRotation | number | 15 | Max rotation (deg) at threshold. |
| endless | boolean | false | Recycle swiped cards to end so deck never empties. |
| autoSwipe | boolean | false | Slideshow mode. |
| autoSwipeDirection | 'alternating' | 'right' | 'left' | 'alternating' | Direction for auto-swipe. |
| autoSwipeInterval | number | 4000 | Interval (ms) between auto-swipes. |
| disableAudioControls | boolean | false | Hide custom audio overlay on video cards. |
| hideMuteButton | boolean | false | When true, hides the mute button on video cards. |
| initialMuted | boolean | true | Videos start muted. |
| onSwipe | (direction: string, item: CardItem) => void | — | Called when a card is swiped. |
| onClick | (item: CardItem) => void | — | Called when the active card is clicked/tapped (minimal drag, no swipe). |
| renderCard | (item, { depth, isActive }) => ReactNode | — | Custom render per card; overrides image/video when provided. |