{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orbiting-circles",
  "type": "registry:ui",
  "title": "Orbiting Circles",
  "description": "A collection of circles which move in orbit along a circular path",
  "files": [
    {
      "path": "registry/magicui/orbiting-circles.tsx",
      "content": "import React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface OrbitingCirclesProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n  reverse?: boolean\n  duration?: number\n  delay?: number\n  radius?: number\n  path?: boolean\n  iconSize?: number\n  speed?: number\n}\n\nexport function OrbitingCircles({\n  className,\n  children,\n  reverse,\n  duration = 20,\n  radius = 160,\n  path = true,\n  iconSize = 30,\n  speed = 1,\n  ...props\n}: OrbitingCirclesProps) {\n  const calculatedDuration = duration / speed\n  return (\n    <>\n      {path && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          version=\"1.1\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n        >\n          <circle\n            className=\"stroke-black/10 stroke-1 dark:stroke-white/10\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            fill=\"none\"\n          />\n        </svg>\n      )}\n      {React.Children.map(children, (child, index) => {\n        const angle = (360 / React.Children.count(children)) * index\n        return (\n          <div\n            style={\n              {\n                \"--duration\": calculatedDuration,\n                \"--radius\": radius,\n                \"--angle\": angle,\n                \"--icon-size\": `${iconSize}px`,\n              } as React.CSSProperties\n            }\n            className={cn(\n              `animate-orbit absolute flex size-(--icon-size) transform-gpu items-center justify-center rounded-full`,\n              { \"[animation-direction:reverse]\": reverse },\n              className\n            )}\n            {...props}\n          >\n            {child}\n          </div>\n        )\n      })}\n    </>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-orbit": "orbit calc(var(--duration)*1s) linear infinite"
    }
  },
  "css": {
    "@keyframes orbit": {
      "0%": {
        "transform": "rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))"
      },
      "100%": {
        "transform": "rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))"
      }
    }
  }
}