LumaOrbit

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