Draggable Card Stack — React Component

Shuffled deck of portrait cards on a dark surface. Drag or fling the top card to send it to the back; press ← to pull the bottom card to the front. Supports images and videos, hover overlay, auto-play, and fully configurable stack geometry.

Cardsspringhovergesturedragcardsstackframer-motioninteractivegesturespring3d

Draggable Card Stack

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

cardWidth

Card width in px.

cardHeight

Card height in px.

borderRadius

Card corner radius in px.

shadowStrength

Drop-shadow intensity from 0 (none) to 1 (full).

stackOffset

Vertical Y offset in px per depth level — fans out the stack.

maxRotation

Maximum resting rotation in degrees for stack cards.

depthScale

Scale reduction per depth level (e.g. 0.04 = 4% smaller per card behind).

showOverlay

Show a gradient overlay with title and subtitle on hover over the top card.

Generated JSX

Copy this into your page.

<DraggableCardStack
  cardWidth={300}
  cardHeight={420}
  borderRadius={24}
  shadowStrength={1}
  stackOffset={0}
  maxRotation={14}
  depthScale={0.04}
  showOverlay={true}
/>

Animation effects

springhovergesture

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Draggable Card Stack

The Draggable Card Stack renders a pile of cards with physics-based drag and fling gestures. Cards can be picked up and thrown using Framer Motion gesture recognition, with spring physics determining throw trajectory and snap-back behavior. Releasing a card above a threshold dismisses it; below the threshold, it snaps back to the stack. Use it for onboarding card flows, testimonial carousels, or any UI that benefits from tactile, physical-feeling interaction.

Common use cases

Onboarding and tutorial card flows
Testimonial and quote carousels
Feature discovery interactions
Swipeable content and review decks

Installation