---
title: "Depth Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by hagenplug · Carousels. Depth Carousel — Cinematic 3D image carousel Turn a plain row of images into a cinematic 3D cover-flow."
canonical: "https://framer.elliotli.dev/component/depth-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Depth Carousel

# Depth Carousel

Scroll-driven 3D coverflow

[View on Framer](https://framer.com/marketplace/components/depth-carousel/?via=elliot-li)

![Depth Carousel preview image 1](https://framer.elliotli.dev/og/component/depth-carousel/fbfdec7752bba7a0/1600x905.jpg)

## Summary

Depth Carousel — Cinematic 3D image carousel Turn a plain row of images into a cinematic 3D cover-flow.

## Description

**Depth Carousel — Cinematic 3D image carousel**

Turn a plain row of images into a cinematic 3D cover-flow. The focused image sits sharp and forward while the rest curve back into space with real perspective, depth blur and soft edge fades — the kind of motion that makes a landing page feel expensive.

It's driven the way people expect: **scroll the wheel or drag** to move through the deck. Spring physics smooth every transition, and cards **snap into place with natural momentum** when you let go. One shared motion value powers all slides, so it stays buttery even with large images.

**Features**

-   True 3D depth — `rotateY`, `translateZ` and adjustable perspective
    
-   Scroll-, wheel- and drag-driven, with spring snapping & momentum
    
-   Progressive depth blur + soft backdrop-blur edges
    
-   Editorial index counter and per-slide captions
    
-   Fully responsive, works on any section width
    
-   Respects `prefers-reduced-motion`; clean static preview on the canvas
    

**Fully customizable** Card size, spacing, side scale, depth, curve angle, perspective, spring stiffness & damping, blur amount, edge fade, corner radius, colors and label font — all from the property panel. No code required.

**Perfect for** Portfolios, photography, product showcases, hero galleries, case studies and agency sites.

**How to use** Drop it on any page, open the **Slides** control, add your images — done. Preview or publish to interact (drag & scroll run live, not on the static canvas).

## Rank history [How rankings work →](/terms#rankings)

-   All · #196

## Details

- **Author**: hagenplug
- **Published**: 2026-07-05
- **Updated**: 2026-07-05
- **Added**: 2026-07-05
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view