3D Stack Gallery

3D Stack Gallery is a visually captivating component that showcases images or videos in a layered 3D stack with realistic depth and smooth animated transitions. Each card elegantly cycles to the back of the stack while the next one takes the spotlight, creating an endless loop of motion and perspective. It feels premium, interactive, and perfect for hero sections, portfolios, product showcases, or storytelling.

This component is fully responsive, lightweight, and highly customizable—so you can easily create unique galleries without writing a single line of code.

What Makes It Stand Out (Features)

• Realistic 3D depth and perspective animations

• Endless auto-switching card transitions

• Supports both images and videos

• Smooth performance & lightweight build

• Fully responsive across all devices

• Beautiful stack motion with scaling and fading

• Video playback control (play all or only active card)

• Perfect for hero sections, portfolios, sliders & product highlights

• Highly flexible for creative animations

Customisations (Unlimited Possibilities)

• Add unlimited cards (image or video content)

• Transition effect

• Card switch interval

• Card offset from the stack

• Card depth (3D depth effect)

• Active card scale

• Card radius

• Fading (inactive cards reduce opacity with depth)

• Video playback: All vs Active

• Enable/disable border

• Border thickness

• Border color

• Card shadow intensity

• Card rotation X-axis

• Card rotation Y-axis

• Card rotation Z-axis

• Stack rotation X-axis

• Stack rotation Y-axis

• Stack rotation Z-axis

Usage (Super Simple)

1. Copy and paste the component into your Framer project.

2. Resize the component to fit your layout.

3. In the properties panel, open 'Cards' to add/remove cards and set image/video content.

4. Adjust the settings to match your style.

5. Done! Your unique 3D Stack Gallery is ready to impress.