---
title: "Orbit Depth Carousel — Framer component · Best of Framer"
description: "$2.00 · Framer component · by Iaroslav · Carousels. 3D orbit image carousel with focus blur"
canonical: "https://framer.elliotli.dev/component/orbit-carousel"
---

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

# Orbit Depth Carousel

3D orbit image carousel with focus blur

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

![Orbit Depth Carousel preview image 1](https://framer.elliotli.dev/og/component/orbit-carousel/c7771f803f594c4a/1600x1200.jpg)

## Summary

3D orbit image carousel with focus blur

## Description

## Details

OrbitCarousel is a 3D image carousel that places items on a circular orbit in perspective, creating a “wheel” depth effect: images take turns moving toward the viewer (sharp and prominent), then recede into the background (softer and less dominant), looping continuously.

### 3D scene (no WebGL)

The component uses CSS perspective and 3D transforms (translate3d) to simulate depth — lightweight and easy to embed in Framer without any WebGL setup.

### Orbit & depth controls

-   **Orbit radius** — the size of the orbit. Higher values create a larger “wheel” and wider item travel.
    
-   **Depth** — how strongly items move along the Z axis. Increase it to amplify the near/far contrast.
    
-   **Perspective** — the intensity of perspective distortion. Lower values feel more dramatic; higher values feel calmer and flatter.
    

### Camera & orientation

-   **Tilt X (-90…+90)** — tilts the camera angle so you can view the orbit from above, below, or closer to edge-on.
    
-   **Orbit yaw Y (-90…+90)** — rotates the wheel around its own Y axis (yaw) to set the best viewing angle.
    
-   **Twist Z (-90…+90)** — rotates the scene around Z for composition (a subtle diagonal framing, etc.).
    

### Motion

-   **Speed** — rotation speed.
    
-   **Reverse** — toggles rotation direction.
    
-   **Pause on hover** — hovering any item smoothly eases the rotation down to a full stop, and eases back to the original speed on mouse leave (**0.2s** easing in both directions). Great for browsing and clicking links.
    

### Focus & depth styling

-   **Fade back + Min opacity** — background items fade out to keep attention on the front.
    
-   **Focus blur** — progressive depth blur: the farther an item is, the blurrier it becomes; the front stays crisp.
    
-   **Max blur / Blur curve** — controls blur strength and the falloff curve across depth.
    

### Items & links

-   **Items** is an array of objects. Each item supports:
    
    -   **Image** — the carousel image
        
    -   **Link** (optional) — an external URL. Clicking opens in a new tab.
        

### Item styling

-   **Item W / Item H** — item dimensions.
    
-   **Item radius** — corner rounding.
    

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

-   All · #7908

## Details

- **Author**: Iaroslav
- **Price**: $2.00
- **Published**: 2026-02-19
- **Updated**: 2026-04-06
- **Added**: 2026-02-16
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow