---
title: "XOrbit — Free Framer component · Best of Framer"
description: "Free Framer component · by OceanDevs · Effects. Overview🏷️ 🪐XOrbit is a modern, ultra-smooth 3D orbit animation component designed to showcase brands, features, icons, or avatars…"
canonical: "https://framer.elliotli.dev/component/xorbit-3d-pulse"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/XOrbit

# XOrbit

Bring Icons to Life with XOrbit UI

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

![XOrbit preview image 1](https://framer.elliotli.dev/og/component/xorbit-3d-pulse/cce206fce4d86865/1600x1200.jpg)

## Summary

Overview🏷️ 🪐XOrbit is a modern, ultra-smooth 3D orbit animation component designed to showcase brands, features, icons, or avatars in an interactive layout.

## Description

## 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
    

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

-   All · #2506

## Details

- **Author**: OceanDevs
- **Published**: 2026-01-07
- **Updated**: 2026-07-13
- **Added**: 2025-12-15
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows