CardStack3D

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