Draggable Cards is a flexible, motion-driven card stack component designed to feel physical and intuitive. Cards are layered with depth, rotation, and scale, creating a realistic stack that users can interact with by dragging the top card. Once dragged beyond a threshold, the card smoothly moves to the back of the stack, revealing the next one.
The component supports both images and videos, with intelligent playback control that ensures only the top video plays. Hover interactions can subtly scale media and reveal optional gradient overlays containing titles and descriptions, adding context without cluttering the design.
Customization is extensive, from card size and spacing to rotation, shadows, animation timing, and easing. You can also enable automatic cycling to create a self-running showcase or keep it fully user driven. Built natively for Framer, the component is performance friendly and easy to adapt to different layouts.
Draggable card stack with flip-to-back interaction
Smooth motion with configurable easing and duration
Supports both images and videos
Intelligent video play and pause handling
Adjustable stack offset, rotation, and depth
Optional hover overlay with gradient, title, and description
Customizable hover scale and transition speed
Auto-change mode with adjustable interval
Fully configurable sizing, radius, and shadow strength
Portfolio highlights and featured projects
Product or feature previews
Image or video storytelling sections
Interactive hero components
Compact galleries with motion
Designers and creative developers
Personal portfolios
Agencies showcasing selected work
Product marketing pages
Websites that benefit from tactile interaction
Frame Craft
