3D Orbit

Add motion, depth, and visual intrigue to your designs with 3D Orbit.

Add motion, depth, and visual intrigue to your designs with 3D Orbit. This component animates your icons or images in a smooth elliptical orbit around a center object, giving you a dynamic way to showcase features, partners, tech stacks, or just pure visual flair.

🔧 Customization & Controls:

Orbit Behavior

• Radius X / Radius Y — Control the width and height of the elliptical path.

• Tilt Angle — Tilt the entire orbit for a 3D-like effect.

• Direction — Choose clockwise or counter-clockwise motion.

• Speed — Fine-tune the animation speed via Speed (ms).

• Easing — Pick from multiple easing options including a springy cubic-bezier.

Icons & Content

• Orbit Icons — Upload custom images or use built-in icon sets (emoji or Material Icons).

• Number of Orbits — Set how many items appear around the center.

• Visibility Toggle — Show or hide individual orbiting icons.

• Slot Support — Use custom Framer content (text, emojis, components) in orbiting items.

• Spacing in between orbits

Center Icon

• Image Upload — Upload a central image or use a fallback URL.

• Alt Text — Set descriptive labels for accessibility.

• Size & Radius — Customize the central object’s size and border radius.

• Adjust shadow of orbit

Style & Layout

• Icon Background — Add a semi-transparent background to icons.

• Icon Shadows — Enable or disable and customize the shadow color.

• Icon Size — Adjust orbiting icon size individually.

• Responsive Layout — Built to work in fixed-width frames.

💡 Perfect For:

• Feature highlights

• Tech stacks

• Partner logos

• User avatars

• Playful loading or intro animations