build69
build69  /  Components  /  Motion — Transitions & Decorative  /  OrbitingCircles

OrbitingCircles

v1.0.2NewUpdated 22 Sept 2026

Elements orbiting a central node on a circular path (MagicUI). Children are spaced evenly around a ring of a given radius and revolve at a configurable speed / direction. Nestable to build multi-ring solar-system / brand

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedorbitcirclerotatehero+4

The default, out-of-the-box OrbitingCircles.

Recommended for+14
  • ✓Brand / integration "globe" hero sections
  • ✓Feature showcases with orbiting logos
  • ✓Decorative animated backdrops
Tags+6
orbitcirclerotateherobrandmotionmagicuidefault
Features+4
  • Children orbit a centre on a circular path
  • Configurable radius, duration, delay
  • reverse (counter-clockwise) direction
  • speed multiplier on duration
  • Optional faint orbit ring (path)
  • iconSize for each orbiting item
  • Nestable for multi-ring layouts
  • CSS @property --angle animation (respects reduced motion)
Not recommended for−2
  • ✕Functional navigation
  • ✕Anything requiring precise interactive hit targets

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "OrbitingCircles" })

Usage

import { OrbitingCircles } from '@/components/motion/orbiting-circles';

<OrbitingCircles radius={180} duration={24}>
  <img src="/a.svg" />
  <img src="/b.svg" />
</OrbitingCircles>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
radius

Orbit radius in px (default 160)

number—
duration

Seconds per revolution (default 20)

number—
delay

Start delay / stagger in seconds (default 0)

number—
reverse

Rotate counter-clockwise

boolean—
speed

Speed multiplier on duration (default 1)

number—
path

Draw the faint orbit ring (default true)

boolean—
iconSize

Size of each orbiting item in px (default 30)

number—

Related

Platform docsAll componentsSource files