Motion / component

Orbiting Circles

Upright icons trace quiet circular paths, with independently controlled rings and responsive spacing.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Adapted from Magic UI’s MIT-licensed Orbiting Circles, preserving its counter-rotation geometry so children remain upright.
Place OrbitingCircles in a positioned parent with sufficient width and height. It fills that parent. Radius is explicit in the primitive; Demo.tsx fits both rings to the available width.
Import Demo.tsx for the complete two-ring composition and original geometric icon artwork. The inner ring counter-rotates at 1.6 times the chosen speed and 60% of the radius.
Pause holds the current pose. Hidden/offscreen animation stops without accumulating wall time. Reduced motion uses evenly spaced stationary children. Replay resets phase without remounting children.
React and modern SVG/ResizeObserver are sufficient. No Tailwind or animation-library dependency is needed. Use --orbit-path-color to customize the guide stroke.

React 19.2Modern browsers

Magic UI · MIT. See bundled notice.

Prop	Type	Default	Description
`children` (required)	ReactNode	`—`	Elements distributed evenly around the circle.
`radius`	number	`160`	Orbit radius in pixels; primitive range 0–1000.
`duration`	number	`20`	Seconds per revolution at speed 1; bounded to 0.1–3600.
`speed`	number	`1`	Playback multiplier, bounded to 0–10. Zero stops scheduling.
`iconSize`	number	`30`	Square wrapper size; 40 in the gallery demo.
`reverse`	boolean	`false`	Reverse travel while retaining phase.
`path`	boolean	`true`	Show the circular SVG guide.
`paused`	boolean	`false`	Stop decorative motion while keeping content usable.
`replayToken`	number	`0`	Change to reset decorative motion without remounting primitive children.