Orbiting Circles
Items evenly distributed on rotating orbital rings.
- 1.0 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/orbiting-circles.jsonAdds components/velora/orbiting-circles.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
durationSeconds per revolution | number | 20 |
radiusOrbit radius in px | number | 160 |
reverse | boolean | false |
pathShow the orbit ring | boolean | true |
iconSizeDiameter of each orbiting item in px | number | 32 |
speed | number | 1 |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The rotation stops; the items rest evenly spaced on the ring.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- The orbit ring is aria-hidden; the orbiting children are read as-is.