Circles
Installation
Run the following command:
npx magicui-cli add orbiting-circlesUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
orbit: "orbit calc(var(--duration)*1s) linear infinite",
},
keyframes: {
orbit: {
"0%": {
transform:
"rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
},
"100%": {
transform:
"rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
},
},
},
},
},
};Props
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | The class name for the component | "" |
| children | React.ReactNode | The children nodes of the component | null |
| reverse | boolean | If true, the animation plays in reverse | false |
| duration | number | The duration of the animation in seconds | 20 |
| delay | number | The delay before the animation starts in seconds | 10 |
| radius | number | The radius of the orbit in pixels | 50 |