{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orbiting-circles",
  "title": "Orbiting Circles",
  "description": "Icons orbiting a center on circular paths with CSS transforms; layer rings for integration graphics.",
  "registryDependencies": [
    "utils",
    "https://trytweenly.vercel.app/r/use-reduced-motion.json"
  ],
  "files": [
    {
      "path": "registry/new-york/orbiting-circles/orbiting-circles.tsx",
      "content": "\"use client\"\n\nimport { Children } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { useReducedMotion } from \"@/registry/new-york/hooks/use-reduced-motion\"\n\nexport interface OrbitingCirclesProps {\n  /** Items to orbit, spaced evenly around the circle. */\n  children: React.ReactNode\n  /** Orbit radius in px. Default: 160 */\n  radius?: number\n  /** Seconds for one full orbit at speed 1. Default: 20 */\n  duration?: number\n  /** Orbit counter-clockwise. Default: false */\n  reverse?: boolean\n  /** Seconds to wait before the orbit starts moving. Default: 0 */\n  delay?: number\n  /** Draw a faint ring along the orbit. Default: true */\n  path?: boolean\n  /** Size of each item's box in px. Default: 40 */\n  iconSize?: number\n  /** Speed multiplier. Higher = faster. Default: 1 */\n  speed?: number\n  /** Angle of the first item in degrees, 0 = 3 o'clock, -90 = 12 o'clock. Default: -90 */\n  startAngle?: number\n  /** Pause the orbit while an item is hovered. Default: false */\n  pauseOnHover?: boolean\n  /** Classes for the item boxes. */\n  itemClassName?: string\n  className?: string\n}\n\n/**\n * Rotates a container with a CSS animation and counter-rotates every item so they stay upright.\n * Place inside a `relative` parent; the orbit is centered on it.\n */\nexport function OrbitingCircles({\n  children,\n  radius = 160,\n  duration = 20,\n  reverse = false,\n  delay = 0,\n  path = true,\n  iconSize = 40,\n  speed = 1,\n  startAngle = -90,\n  pauseOnHover = false,\n  itemClassName,\n  className,\n}: OrbitingCirclesProps) {\n  const reduced = useReducedMotion()\n  const items = Children.toArray(children)\n  const seconds = duration / Math.max(0.05, speed)\n  const timing = `${seconds}s linear ${delay}s infinite ${reverse ? \"reverse\" : \"normal\"}`\n  const pause = pauseOnHover && \"group-hover/orbit:[animation-play-state:paused]\"\n\n  return (\n    <div className={cn(\"group/orbit pointer-events-none absolute left-1/2 top-1/2 size-0\", className)}>\n      {path && (\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute rounded-full border border-foreground/10\"\n          style={{ width: radius * 2, height: radius * 2, left: -radius, top: -radius }}\n        />\n      )}\n\n      <div className={cn(\"absolute inset-0\", pause)} style={{ animation: reduced ? undefined : `tw-orbit ${timing}` }}>\n        {items.map((child, i) => {\n          const angle = startAngle + (360 / items.length) * i\n          return (\n            <div\n              key={i}\n              className=\"absolute left-0 top-0 size-0\"\n              style={{ transform: `rotate(${angle}deg) translateX(${radius}px) rotate(${-angle}deg)` }}\n            >\n              <div\n                className={cn(\"pointer-events-auto flex items-center justify-center\", pause, itemClassName)}\n                style={{\n                  width: iconSize,\n                  height: iconSize,\n                  marginLeft: -iconSize / 2,\n                  marginTop: -iconSize / 2,\n                  animation: reduced ? undefined : `tw-orbit-counter ${timing}`,\n                }}\n              >\n                {child}\n              </div>\n            </div>\n          )\n        })}\n      </div>\n\n      <style>{`\n        @keyframes tw-orbit { to { transform: rotate(360deg) } }\n        @keyframes tw-orbit-counter { to { transform: rotate(-360deg) } }\n      `}</style>\n    </div>\n  )\n}\n\nexport interface OrbitCenterProps {\n  /** The center element, e.g. a logo. */\n  children?: React.ReactNode\n  /** Diameter in px. Default: 72 */\n  size?: number\n  className?: string\n}\n\n/** A centered disc for the middle of an orbit. Place inside the same `relative` parent. */\nexport function OrbitCenter({ children, size = 72, className }: OrbitCenterProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-[0_8px_30px_-10px_rgba(0,0,0,0.45)]\",\n        className\n      )}\n      style={{ width: size, height: size }}\n    >\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/orbiting-circles",
  "type": "registry:component"
}