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.
Understanding the component
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 achieved through CSS keyframes that create a circular motion. At the start (0%), each element is rotated by its offset angle, translated outward by the radius, and counter-rotated to maintain orientation. At the end (100%), it completes a full 360-degree rotation while maintaining the same radius and orientation. The --circling-direction variable allows reversing the animation direction.
The keyframes use CSS calc() to dynamically compute the transforms based on the following variables:
--circling-offset(element's starting angle)--circling-radius(circle size)--circling-direction(1 or -1 for direction)
Examples
Easing & direction
You can set custom easings and reverse direction for the animation, as you can see in this demo.
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 |
| easing | string | linear | The easing function for the animation. Refer to the official mdn docs for more details |
| direction | "normal" | "reverse" | normal | The direction of the animation. Set to |
| pauseOnHover | boolean | false | Pause the animation on hover |
| className | string | - | Additional CSS classes for the container |
Credits
Inspiration for the demo from Bakken & Bæck