3D Image Stack

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.

Key Features

• 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

Best Use Cases

• 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

Where to Use

• Homepage hero sections

• Feature highlights

• Portfolio pages

• Campaign or product launch pages

• Interactive visual sections in marketing sites

How to Use

• 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