AnimationsProNew
Orbiting Circles
Icons glide around a center on one or more orbits. Handy for an integrations section.
Customize
color
accentColor
highlightColor
pathColor
Based on Orbiting Circles (MIT license) · Terms of use
Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Icons or badges that travel along the orbit. |
| radius | number | 160 | Orbit radius in pixels. |
| duration | number | 20 | Seconds for a full turn. |
| speed | number | 1 | Speed multiplier. 2 is twice as fast. |
| iconSize | number | 30 | Size of an orbiting item in pixels. |
| reverse | boolean | false | Spin counter-clockwise. |
| path | boolean | true | Show the orbit line. |
| color | string | "#ffffff" | Main colour. Children read it as var(--orbit-c1). |
| accentColor | string | "#525252" | Second colour. Children read it as var(--orbit-c2). |
| highlightColor | string | "#e5e5e5" | Light highlight colour. Children read it as var(--orbit-c3). |
| pathColor | string | "rgba(255, 255, 255, 0.1)" | Colour of the orbit line. |
| className | string | — | Classes for each orbiting item. |
Dependencies
2 required packages
npm install clsx tailwind-merge