Elastic Card Stack

Add a physics-driven 3D card stack and interactive image deck with elastic drag-and-throw motion, smooth WebGL rendering, and fluid multi-card momentum.

Features

• Smooth physics-driven 3D card stack interaction

• Fluid drag, release, and throw dismissal mechanics

• Multi-card depth perspective and layering

• Support for both images and looping videos

• Real-time WebGL rendering with automatic fallback

• Fully responsive layout scaling and resize handling

• Keyboard navigation support (Arrow keys and Enter)

• High-performance GPU memory management

• Customizable card dimensions, border padding, and corners

• Clean layered visual architecture with soft drop shadows

Customization Options

• Card width and height dimensions

• Side and top/bottom image padding borders

• 3D stack depth and perspective distance

• Auto-fit scaling for smaller frames

• Release and auto-throw distance thresholds

• Animation duration and spring easing feel

• Second and third card follow-along drag percentages

• Paper background color, corner radius, and shadow toggle

• Dynamic media array supporting images and direct video URLs

How to Use

• Drag and drop the component onto your Framer canvas

• Add your images or video files into the media property control

• Adjust card width, height, and border padding to fit your layout

• Customize depth and perspective for subtle or dramatic 3D stacking

• Tune the drag release and spring duration for your preferred feel

• Publish your site to give visitors an engaging interactive card experience

Use Cases

• Modern landing page hero sections

• Interactive photo and portfolio galleries

• Product feature showcases

• Testimonial and review carousels

• Creative agency portfolios

• Interactive card decks and swipe portfolios

• Mobile app feature previews

• Immersive dark mode interfaces