XOrbit

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