Orbiting Circles
A collection of circles which move in orbit along a circular path.
config
About
The <OrbitingCircles /> component comes from magicui.design.
Installation
Run the following command:
npx ever-ui-clx@0.2.1 add demo-orbiting-circlesUpdate tailwind.config.ts
Modify your tailwind.config.ts as follows:
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
orbit: {
"0%": {
transform: "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
},
"100%": {
transform:
"rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
},
},
},
animation: {
orbit: "orbit calc(var(--duration)*1s) linear infinite",
},
},
},
};Usage