{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orbiting-circles",
  "title": "Orbiting Circles",
  "description": "Items evenly distributed on rotating orbital rings.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/orbiting-circles.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface OrbitingCirclesProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Seconds per revolution */\n  duration?: number;\n  /** Orbit radius in px */\n  radius?: number;\n  reverse?: boolean;\n  /** Show the orbit ring */\n  path?: boolean;\n  /** Diameter of each orbiting item in px */\n  iconSize?: number;\n  speed?: number;\n}\n\n/**\n * Evenly distributes children around a circular orbit and rotates them.\n * Place inside a `relative` container; stack multiple instances with\n * different radii for multi-ring layouts.\n */\nexport function OrbitingCircles({\n  className,\n  children,\n  duration = 20,\n  radius = 160,\n  reverse = false,\n  path = true,\n  iconSize = 32,\n  speed = 1,\n  ...props\n}: OrbitingCirclesProps) {\n  const items = Array.isArray(children) ? children : [children];\n  const calculatedDuration = duration / speed;\n\n  return (\n    <>\n      {path && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center\"\n        >\n          <div\n            className=\"rounded-full border border-dashed border-border\"\n            style={{ width: radius * 2, height: radius * 2 }}\n          />\n        </div>\n      )}\n      {items.map((child, i) => {\n        const angle = (360 / items.length) * i;\n        return (\n          <div\n            key={i}\n            data-slot=\"orbiting-circle\"\n            style={\n              {\n                \"--duration\": calculatedDuration,\n                \"--radius\": radius,\n                \"--angle\": angle,\n                // Resting position on the ring; the orbit animation overrides it\n                transform: `rotate(${angle}deg) translateY(${-radius}px) rotate(${-angle}deg)`,\n              } as React.CSSProperties\n            }\n            className={cn(\n              \"motion-safe:animate-orbit absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full\",\n              reverse && \"[animation-direction:reverse]\",\n              className\n            )}\n            {...props}\n          >\n            <div\n              className=\"flex items-center justify-center\"\n              style={{ width: iconSize, height: iconSize }}\n            >\n              {child}\n            </div>\n          </div>\n        );\n      })}\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/orbiting-circles.tsx"
    }
  ],
  "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) * -1))"
      }
    }
  },
  "type": "registry:ui"
}