Orbit
Icons orbiting a center on dashed tracks.
Orbit spaces its children evenly on a ring that turns around a center while the items stay upright: integrations, partner logos, team avatars. Stack two Orbits for inner and outer rings; hover slows the system down.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/orbit.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/orbit.
Builds on: motion
Usage
import { Orbit } from "@/components/ui/orbit";
<div className="relative h-80">
<Orbit radius={120}>{icons}</Orbit>
</div>Motion
GSAP rotates the ring and counter-rotates items; hover eases timeScale down.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Orbit
Absolutely fills its relative parent.
| Prop | Type | Default | Description |
|---|---|---|---|
| radius | number | 110 | Ring radius (px). |
| duration | number | 24 | Seconds per revolution. |
| reverse | boolean | false | Counter-clockwise. |
| path | boolean | true | Dashed track. |
Accessibility
- Give icon items accessible names if they convey meaning.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: orbiting circles · orbit animation react · integrations animation · rotating icons · magic ui orbiting circles alternative