A 3D vertical card stack for images and videos with drag, scroll, and dot navigation. Cards are layered with realistic depth and rotation — active card full size, adjacent cards scaled and offset behind. Spring animations, four card shapes, ambient glow, and text overlays. Built for product showcases, portfolio galleries, feature highlights, and video presentations that need an immersive stacked card experience.
3D perspective card stack with realistic depth and rotation
Drag up and down to navigate through the stack
Mouse wheel and trackpad scroll navigation
Navigation dot click to jump directly to any card
Autoplay with configurable interval (1000–10000ms)
Videos play only when active — pause and reset when inactive
Video auto-advances to next card when playback finishes
Mixed media — images and videos in the same stack
Optional title and description text overlay per card
Show content always, on hover, or hidden
Clickable cards with optional URL per card
Four card shapes — rounded, circle, squircle, hexagon
Adjustable border radius for rounded and squircle shapes
Ambient glow background effect for visual depth
Show or hide navigation dots, counter and instructions
Up to 10 cards supported
Autoplay disabled in Framer canvas edit mode
No dependencies
Active (0) — full size, centered, fully opaque
Adjacent (±1) — 82% scale, 160px offset, 60% opacity, slight rotation
Far (±2) — 70% scale, 280px offset, 30% opacity, more rotation
Hidden (±3+) — 60% scale, 400px offset, invisible
Cards
Up to 10 cards · media type, image, video, title, description, link per card
Content Display
Show Card Content — hide, show always, show on hover
Card Text Color
Colors
Background · Card Background · Foreground · Muted Color · Border Color
Card Appearance
Card Shape — rounded, circle, squircle, hexagon
Border Radius — (0–50px for rounded and squircle)
UI Elements
Show Dots · Show Counter · Show Instructions toggles
Autoplay
Autoplay toggle · Autoplay Interval (1000–10000ms)
Framer Motion spring animations for all card transitions
Conditional rendering — only ±2 position cards rendered
400ms navigation cooldown prevents rapid switching
Video play and pause synced to active card state
React transitions for optimized state updates
Circular navigation — wraps from last to first card
Canvas mode detection disables autoplay in editor
280×420px card dimensions · 500px visible stack height
5 sample cards with images
Rounded card shape · 20px border radius
Autoplay enabled · 3000ms interval
Dots, counter and instructions visible
Product showcases · Portfolio galleries · Feature highlights · Video playlists · Testimonial displays · App store screenshots · Story sequences · Mixed media presentations
SEO Keywords
framer card stack · framer 3d stack · framer vertical carousel · framer card slider · framer stack component · framer drag carousel · framer video stack · framer image stack · framer depth carousel · framer 3d carousel · framer stacked cards · framer interactive stack · framer portfolio carousel · framer code component · framer card carousel
Hamim Reza
