Orbiting Circles

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

Circles

Installation

npx nyxbui@latest add orbiting-circles

Add the following animations to your tailwind.config.ts file:

// tailwind.config.ts
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