---
title: "3D Orbit — Framer component · Best of Framer"
description: "$34.00 · Framer component · by Snoweirdo · Backgrounds. Add motion, depth, and visual intrigue to your designs with 3D Orbit."
canonical: "https://framer.elliotli.dev/component/3d-orbit"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/3D Orbit

# 3D Orbit

[View on Framer](https://framer.com/marketplace/components/3d-orbit/?via=elliot-li)

![3D Orbit preview image 1](https://framer.elliotli.dev/og/component/3d-orbit/27dbad68c72313c4/1600x1200.jpg)

## Summary

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

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10800

## Details

- **Author**: Snoweirdo
- **Price**: $34.00
- **Published**: 2025-08-14
- **Updated**: 2025-08-24
- **Added**: 2025-08-08
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background