3D Image Stack is a dynamic Framer component with vertical or horizontal 3D cards, smooth drag and scroll navigation, depth animations, and fully customizable styling.
Made with Workshop
Build your own component with AI
3D Image Stack is a premium Framer component designed to showcase images in a layered, three-dimensional stack with smooth physics-based animations. It combines drag, scroll, wheel, and click navigation with realistic depth, scale, and perspective to create an engaging browsing experience.
The component supports both vertical and horizontal orientations, allowing you to switch layouts instantly with a built-in toggle. Cards animate forward and backward with depth awareness, subtle rotation, opacity falloff, and scale changes, creating a polished 3D illusion without WebGL or heavy dependencies.
Everything is fully customizable—from spacing, card radius, borders, shadows, hover effects, and navigation dots to fonts, colors, and interaction timing. It’s optimized for Framer’s canvas, preview, and live environments and works seamlessly with both uploaded images and external URLs.
Vertical and horizontal 3D stack modes
Smooth drag, scroll, wheel, and dot navigation
Physics-based spring animations with depth and perspective
Fully customizable card radius, border, shadow, and spacing
Built-in orientation switch button with full style control
Image hover effects with zoom, grayscale, and duration control
Optional image counter and navigation dots
Supports Framer Responsive Images and external image URLs
Optimized for canvas, preview, and production builds
Accessibility-friendly with keyboard focus and ARIA labels
Product showcases and e-commerce hero sections
Portfolio image galleries
Editorial or storytelling layouts
Fashion, footwear, or lifestyle collections
Landing pages that need interactive visual depth
Concept presentations and design case studies
Homepage hero sections
Feature highlights
Portfolio pages
Campaign or product launch pages
Interactive visual sections in marketing sites
Add 3D Image Stack to your Framer canvas
Upload images or paste image URLs in the Images array
Choose vertical or horizontal orientation
Adjust spacing, depth, and card styling from properties
Customize hover effects, navigation dots, and counters
Style colors and fonts to match your brand
Publish and enjoy smooth, interactive 3D motion