CardStack3D

3D vertical card stack with drag nav

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. Features 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 Card Depth States 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 Property Controls 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) Technical Details 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 Default Settings 5 sample cards with images Rounded card shape · 20px border radius Autoplay enabled · 3000ms interval Dots, counter and instructions visible Use Cases 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

3D vertical card stack with drag nav