AnimationsNew
Circling Elements
Items are spread evenly on a circle and orbit the center while staying upright. Good for logos, avatars and icons.
Customize
color
accentColor
highlightColor
Based on Circling Elements (MIT license) ยท Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | โ | The items that orbit. |
| radius | number | 100 | Circle radius, in pixels. |
| duration | number | 10 | Time for one full turn, in seconds. |
| easing | string | "linear" | CSS easing of the rotation. |
| direction | 'normal' | 'reverse' | "normal" | Direction of rotation. |
| pauseOnHover | boolean | false | Pause the rotation on hover. |
| color | string | "#ffffff" | Main colour. Children read it as var(--circling-c1). |
| accentColor | string | "#525252" | Second colour. Children read it as var(--circling-c2). |
| highlightColor | string | "#e5e5e5" | Light highlight colour. Children read it as var(--circling-c3). |
| className | string | โ | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge