XOrbit 3D Pulse
Responsive 3D XOrbit UI with smooth auto rotation, pulsing center, magnetic interaction, custom icons, orbit ring upload, glow effects, and advanced sizing controls. ✨
Make it with Workshop
Build your own component with AI
Overview
🪐XOrbit is a modern, ultra-smooth 3D orbit animation component designed to showcase brands, features, icons, or avatars in an interactive layout. With precise motion, glowing visuals, and deep customization, it adds a refined futuristic presence to any interface.
Core Features
Smooth Auto-Rotation
Continuous circular rotation powered by Framer Motion. Rotation speed is adjustable to match subtle ambient motion or more dynamic visual energy.
Pulsing Center Element
The center element features a soft glow pulse animation, creating a strong visual focal point. Supports logos, product images, or brand graphics.
Customizable Orbit Ring
Upload a custom orbit border image or use the built-in ring style. Ideal for glass, metallic, neon, or branded orbit designs.
Orbiting Icons & Avatars
Supports up to four orbiting items, including avatars, each with its own image. Icons rotate smoothly while maintaining correct upright orientation.
Advanced Sizing Control
Fine-tune all visual proportions, including:
Base orbit radius
Orbiting icon or avatar size
Center element size
Global component scale
Glow Color Control
Set a custom glow color for the pulsing center element to match your brand palette.
Magnetic Center Interaction
The center element can subtly follow the cursor with a magnetic hover system:
Adjustable magnetic strength
Configurable magnetic area
Smooth spring-based motion
Global Controls
Responsive scale
Layer entrance animation toggle
