---
title: "LumaOrbit — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Can Girgin · Effects. Luma Orbit allows you to showcase icons, logos, or features in a captivating, interactive 3D carousel."
canonical: "https://framer.elliotli.dev/component/lumaorbit"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/LumaOrbit

# LumaOrbit

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

![LumaOrbit preview image 1](https://framer.elliotli.dev/og/component/lumaorbit/51655ddabca9ebe6/1600x1200.jpg)

## Summary

Luma Orbit allows you to showcase icons, logos, or features in a captivating, interactive 3D carousel.

## Description

**Luma Orbit** allows you to showcase icons, logos, or features in a captivating, interactive 3D carousel. Its smooth, physics-based dragging provides a premium user experience, making your site feel alive and professional.

## Highlights

-   **Physics-Based Dragging:** Drag and release with realistic momentum and a satisfying, smooth slowdown.
    
-   **Auto-Rotation:** Seamlessly rotates on its own, with adjustable speed and direction.
    
-   **Glass Ring Effect:** Choose between different glassmorphism styles (Lite/Max) or turn it off completely for a minimal look.
    
-   **Full 3D Control:** Adjust **Radius X/Y** and **Tilt X/Y** to create the perfect perspective for your design.
    
-   **Deep Customization:** Control **Orb Size**, **Ring Width**, **Color**, and **Opacity** to perfectly match your brand.
    
-   **Dynamic Labels:** Show titles on hover or always, with full control over font, size, and color.
    
-   **Accessibility Ready:** Supports keyboard navigation (← →) and respects system-wide 'Reduce Motion' settings.
    

## Controls (quick map)

**Motion:** Speed, Auto-Rotate, Pause on Hover, Allow Drag, Invert Drag, **Drag Factor**, **Momentum Damping** **Orbit:** Radius X, Radius Y, Tilt X, Tilt Y

**Ring:** Glass (Off/Lite/Max), Threaded, Ring Width, Stroke, Opacity, Blur (for Max glass)

**Orbs:** Orb Size

**Labels:** Labels (Mode), Label Size, Label Offset, Label Color, Label Font

**Advanced:** Front Scale, Back Fade, Back Blur, Reduce Motion, ARIA Label

How to use

1.  Drop the **Luma Orbit** component onto the Canvas.
    
2.  In the properties panel, populate the **Items** array with your titles and optional images. For custom icons, drop your components into the **Icons** array in the same order.
    
3.  Use the controls to adjust the **Radius X/Y**, **Orb Size**, and other settings to perfectly fit your layout and style.
    

## Accessibility & Performance

-   Automatically honors the user's system preference for **Reduce Motion**.
    
-   Built with lightweight DOM and SVG for smooth performance without relying on WebGL.
    

## Included

-   1 component: **Luma Orbit**
    

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

-   All · #10240

## Details

- **Author**: Can Girgin
- **Price**: $5.00
- **Published**: 2025-09-10
- **Updated**: 2025-09-18
- **Added**: 2025-08-29
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo