Draggable Card Stack

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

Soft Elegance

Graceful pose with gentle tones

→ send to back · ← bring to front · drag to fling

Card Size

Width300

Height420

Radius24

Shadow1

Stack

Offset (px)0

Max Rotation14

Depth Scale0.04

Hover & Overlay

Show Overlay

Hover Scale1.03

Transition s0.25

Auto Play

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.

Installation