{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orbit-logo-cluster",
  "type": "registry:component",
  "title": "Orbit logo cluster",
  "description": "A cluster of logo chips orbiting a center badge in a slow continuous rotation, with labels counter rotating to stay upright. Pass center text and logos.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/orbit-logo-cluster.tsx",
      "type": "registry:ui",
      "target": "components/ui/orbit-logo-cluster.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction OrbitLogoCluster({\n  center = \"MD\",\n  logos = [\"Acme\", \"Nova\", \"Orbit\", \"Pulse\", \"Stack\", \"Voxel\"],\n  className,\n}: {\n  center?: string\n  logos?: string[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"orbit-logo-cluster\"\n      data-tier=\"premium\"\n      className={cn(\"relative mx-auto aspect-square w-full max-w-md\", className)}\n    >\n      <div className=\"absolute inset-[18%] rounded-full border border-border\" aria-hidden />\n      <div className=\"absolute inset-[32%] rounded-full border border-border/70\" aria-hidden />\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <div className=\"flex size-16 items-center justify-center rounded-2xl border border-accent/40 bg-accent/10 text-sm font-medium text-fg shadow-highlight\">\n          {center}\n        </div>\n      </div>\n      <motion.div\n        className=\"absolute inset-0\"\n        animate={reduce ? undefined : { rotate: 360 }}\n        transition={reduce ? undefined : { duration: 40, repeat: Infinity, ease: \"linear\" }}\n      >\n        {logos.map((logo, i) => {\n          const a = (i / logos.length) * Math.PI * 2\n          const r = 42\n          const x = 50 + Math.cos(a) * r\n          const y = 50 + Math.sin(a) * r\n          return (\n            <div\n              key={logo}\n              className=\"absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-surface px-3 py-1.5 text-xs font-medium text-fg\"\n              style={{ left: `${x}%`, top: `${y}%` }}\n            >\n              <motion.span\n                animate={reduce ? undefined : { rotate: -360 }}\n                transition={reduce ? undefined : { duration: 40, repeat: Infinity, ease: \"linear\" }}\n                className=\"block\"\n              >\n                {logo}\n              </motion.span>\n            </div>\n          )\n        })}\n      </motion.div>\n    </div>\n  )\n}\nexport { OrbitLogoCluster }\n"
    }
  ]
}