Swipe Stack
0
Used by 0Controls
Swipe Stack
Flick through a fanned 3D stack of image cards that tilt, scale, and cycle to the back on every swipe.
KEY FEATURES
- — Draggable top card that flicks to the back of the stack
- — Adjustable minimum swipe distance before a card cycles
- — Fanned layout with configurable start and end tilt angles
- — Horizontal spread controlled by an X offset value
- — 3D depth stacking with perspective and per-card scaling
- — Custom card width, height, and corner radius
- — Spring transition control for all card motion
- — Short swipes snap the card back to center
- — Placeholder cards shown until images are added
- — Static, drag-disabled preview inside the Framer canvas
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
images
array
[...]
Images displayed on the cards; empty shows a placeholder prompt.
cardWidth
number
300
Width of each card in the stack, in pixels.
cardHeight
number
400
Height of each card in the stack, in pixels.
cardRadius
number
4
Corner rounding of the cards, from square to fully rounded.
swipeThreshold
number
50
Drag distance in pixels needed to flick the top card to the back.
tiltAngleStart
number
0
Tilt of the front card where the fan's rotation begins.
tiltAngle
number
-45
Tilt of the back card where the fan's rotation ends.
xOffset
number
10
Horizontal spread of the cards across the fanned stack.
transition
transition
{"..."}
Spring motion applied as cards shift, tilt, and cycle.
