Orbiting Circles
Icons that orbit a center point on a configurable ring, staying upright as they travel.
GodUI
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/orbiting-circles.json"Children are spread evenly around a ring of radius. A single ring animation
carries every slot in lockstep while each slot counter-rotates so its content
stays upright. The orbit pauses entirely under prefers-reduced-motion.
Usage
tsx
import { OrbitingCircles } from "@/components/godui/orbiting-circles";tsx
<OrbitingCircles radius={120} duration={20}>
<Icon />
<Icon />
<Icon />
</OrbitingCircles>Reversed inner ring
Stack two rings with different radius, duration, and reverse for a layered
ecosystem diagram.
1
2
3
4
5
Props
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 120 | Orbit radius in pixels. |
duration | number | 20 | Seconds per full revolution. |
delay | number | 0 | Delay before the orbit starts, in seconds. |
reverse | boolean | false | Reverse the orbit direction. |
showPath | boolean | true | Render the faint circular track. |
iconSize | number | 40 | Size of each orbiting slot in pixels. |
OrbitingCircles also forwards every standard <div> attribute to the root element.