Orbiting Circles

A collection of circles which move in orbit along a circular path.

config
Description of the SVG image Loading...

About

The <OrbitingCircles /> component comes from magicui.design.

Installation

Run the following command:

npx ever-ui-clx@0.2.1 add demo-orbiting-circles

Update 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
IconIcon Cloud Orbiting Items 3D*Icon