Docs
→Circling Elements
Circling Elements
A component that creates a circling effect on its children.
Inspiration from Bakken & Bæck
Installation
npx shadcn@latest add "https://fancycomponents.dev/r/circling-elements.json"Usage
You only need to wrap your elements with the CirclingElements component, everything else is taken care of by the component itself.
Under the hood, the component wraps all the children in a relative container, then sets all children to absolute to allow the circling movement.
The animation is done with only a few animation keyframes, as you can see in the tailwind config above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | The elements to be circled |
| radius | number | 100 | The radius of the circle in pixels |
| duration | number | 10 | The duration of one complete rotation in seconds |
| className | string | - | Additional CSS classes for the container |
Credits
Inspiration for the demo from Bakken & Bæck