OrbitingCircles
v1.0.1NewUpdated 21 Jul 2026Elements 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
Preview
Live · 8 storiesDefaultOpen ↗
▸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.
Usage
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
radiusOrbit radius in px (default 160)
—durationSeconds per revolution (default 20)
—delayStart delay / stagger in seconds (default 0)
—reverseRotate counter-clockwise
—speedSpeed multiplier on duration (default 1)
—pathDraw the faint orbit ring (default true)
—iconSizeSize of each orbiting item in px (default 30)
—