XOrbit — Bring your icons to life with XOrbit
🪐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.
Continuous circular rotation powered by Framer Motion. Rotation speed is adjustable to match subtle ambient motion or more dynamic visual energy.
The center element features a soft glow pulse animation, creating a strong visual focal point. Supports logos, product images, or brand graphics.
Upload a custom orbit border image or use the built-in ring style. Ideal for glass, metallic, neon, or branded orbit designs.
Supports up to four orbiting items, including avatars, each with its own image. Icons rotate smoothly while maintaining correct upright orientation.
Fine-tune all visual proportions, including:
Base orbit radius
Orbiting icon or avatar size
Center element size
Global component scale
Set a custom glow color for the pulsing center element to match your brand palette.
The center element can subtly follow the cursor with a magnetic hover system:
Adjustable magnetic strength
Configurable magnetic area
Smooth spring-based motion
Responsive scale
Layer entrance animation toggle
OceanDevs
