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

Studio Light
Minimal Mood
Golden Hour
Urban Edge
Soft Elegance

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.

Animation effects

springhovergesture

Copy-paste ready

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