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