Aurora Shimmer
Buttons
Lumen Orbit Carousel
A 3D orbit carousel of glassy cards that spins with drag momentum.
Customize
ADVERT
Overview
Lumen Orbit Carousel wraps a ring of cards around a cinematic, interactive stage. Drag to spin the orbit with smooth inertia, then let the active card lift forward with a glowing sweep and parallax tilt. Use it for feature showcases, product tours, or premium navigation moments that feel tactile and alive.
Props
Use the props below to customise the lumen orbit carousel in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| items | { id: string; eyebrow: string; title: string; description: string; meta: string }[] | No | [{ id: "ion-stream", eyebrow: "Signal", title: "Ion Stream", description: "Live telemetry for every orbital pass.", meta: "Realtime" }] | Cards rendered around the orbit. Each item includes short copy used inside the glassy card surface. |
| activeId | string | No | undefined | Optional controlled active card id. When provided, the orbit will ease to the matching card. |
| onChange | (id: string) => void | No | undefined | Callback fired when the user clicks a card or finishes a drag gesture. |
| colors | string[] | No | ["#020617", "#38bdf8", "#a855f7"] | Array of up to three hex colors used for the backdrop, glow accents, and highlight sweep. |
| intensity | number | No | 0.9 | Overall glow strength for the orbit ring and active card highlights. |
| tilt | number | No | 1 | How much the orbit tilts in 3D as you move the pointer across the component. |
| parallax | number | No | 1 | How strongly the active card responds with parallax shift and light sweep. |
| radius | number | No | 260 | Radius of the orbit ring in pixels, controlling how far cards sit from the center. |
| orbitSpeed | number | No | 0.12 | Idle rotation speed applied when the carousel is not being dragged. |
| minHeight | number | string | No | 380 | Minimum height for the carousel container. Accepts a number (pixels) or any valid CSS height string. |
| className | string | No | undefined | Optional custom class name merged onto the root container for layout tweaks. |
Related React components
More components from the same category or sharing similar tags.
