Orbiting Circles
Items spread evenly on a circle that turns around a centre, for showing what connects to a product on a marketing page. Each orbit is one component; stack several with different radii and directions.
Examples
Two orbits
Three sources on a quick inner orbit, five on a slower outer one turning the other way.
Pause
Avatars on one orbit, with a button that pauses them where they are.
AD
LM
TI
NH
IM
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-orbiting-circles.jsonComponent API
OrbitingCircles
Draws one orbit centred in its container, which needs position: relative, a height and overflow: hidden. Every child becomes one item on the orbit.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The items, spread evenly around the circle. | |
| radius | number | 120 | The radius of the orbit, in px. |
| duration | number | 24 | Seconds for one full turn. |
| speed | number | 1 | A multiplier on the speed: 2 turns twice as fast. |
| reverse | boolean | false | Whether the orbit turns anticlockwise. |
| startAngle | number | -90 | Where the first item sits, in degrees. -90 is the top of the circle. |
| iconSize | number | 40 | The width and height of each item slot, in px. |
| path | boolean | true | Whether the orbit is drawn as a hairline circle. |
| paused | boolean | false | Whether the orbit stops where it is. |
| className | string | Classes for the orbit circle. |
Accessibility and motion
- The orbit turns with a CSS animation, so it keeps running smoothly while the page is busy. Each item turns the other way at the same pace and stays upright.
- With reduced motion the items stay where they are, evenly spread on the circle.
- Orbiting items are usually decorative: give the container
role='img'and anaria-labelthat says what the picture shows.
Credits
Inspired by the orbiting circles of Magic UI, rebuilt on our materials and icon set.