{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orbiting-avatars",
  "title": "Orbiting Avatars",
  "description": "A circular orbit of avatar images that spin around a central CTA button.",
  "files": [
    {
      "path": "components/library/orbiting-avatars.tsx",
      "content": "import React from \"react\"\n\nconst defaultAvatars = [\n  { src: \"/avatars/mrbeast.jpg\",       name: \"MrBeast\",        role: \"Content Creator\"      },\n  { src: \"/avatars/cb.jpg\",            name: \"Christian Bale\", role: \"Visual Wizard\"        },\n  { src: \"/avatars/Tyler Durden.jpeg\", name: \"Tyler Durden\",   role: \"Product Manager\"      },\n  { src: \"/avatars/steve.jpeg\",        name: \"Steve Jobs\",     role: \"Creative Director\"      },\n  { src: \"/avatars/cleo.jpg\",          name: \"Cleo Abram\",     role: \"Science Communicator\" },\n  { src: \"/avatars/rust.jpeg\",         name: \"Rustin cohle\",   role: \"Code Alchemist\"       },\n  { src: \"/avatars/alex.jpg\",          name: \"Alex Hormozi\",   role: \"Entrepreneur\"         },\n  { src: \"/avatars/bryan.jpg\",         name: \"Bryan Johnson\",  role: \"Blueprint\"            },\n  { src: \"/avatars/tom.jpeg\",          name: \"Tom Hardy\",      role: \"Experience Craftsman\" },\n]\n\nexport const OrbitingAvatars = ({\n  avatars = defaultAvatars,\n  radius = 130,\n  duration = 30,\n  centerLabel = \"Contact Me\",\n  onCenterClick,\n}: {\n  avatars?: { src: string; name: string; role?: string }[]\n  radius?: number\n  duration?: number\n  centerLabel?: React.ReactNode\n  onCenterClick?: () => void\n}) => {\n  return (\n    <div className=\"relative w-100 h-100\">\n\n      {/* center button */}\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <button\n          onClick={onCenterClick}\n          className=\"group relative px-6 py-3 z-10 rounded-full border border-blue-900/40 text-white text-sm font-medium tracking-wide bg-radial-[at_top] from-blue-900/60 to-black hover:from-blue-800 hover:to-white/90 hover:border-blue-400/70 hover:shadow-[0_0_22px_rgba(147,197,253,0.3)] transition-all duration-1000 cursor-pointer select-none\"\n        >\n          <div className=\"absolute bottom-0 left-1/2 -translate-x-1/2 h-0.5 w-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full bg-linear-to-r from-transparent via-blue-300 to-transparent blur-[1px]\" />\n          {centerLabel}\n        </button>\n      </div>\n\n      {/* orbit */}\n      <div\n        className=\"absolute inset-0 animate-spin\"\n        style={{ animationDuration: `${duration}s` }}\n      >\n        {avatars.map((avatar, i) => {\n          const angle = (360 / avatars.length) * i\n          return (\n            <div\n              key={i}\n              className=\"absolute left-1/2 top-1/2 hover:z-50\"\n              style={{\n                transform: `rotate(${angle}deg) translate(${radius}px) rotate(-${angle}deg)`\n              }}\n            >\n              {/* counter-rotate wrapper + group for tooltip */}\n              <div\n                className=\"group relative -translate-x-1/2 -translate-y-1/2 animate-spin direction-reverse animation-iteration-infinite animation-timing-linear\"\n                style={{ animationDuration: `${duration}s`, animationDirection: \"reverse\" }}\n              >\n                <img\n                  src={avatar.src}\n                  alt={avatar.name}\n                  className=\"w-[76px] h-[76px] select-none rounded-full object-cover transition-transform duration-200 group-hover:scale-110\"\n                />\n                {/* tooltip */}\n                <div className=\"rounded-sm pointer-events-none absolute -bottom-11 left-1/2 -translate-x-1/2 whitespace-nowrap bg-black backdrop-blur-sm px-2 py-1 opacity-0 translate-y-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-y-0 shadow-lg flex flex-col items-center \">\n                  <span className=\"text-[10px] font-semibold tracking-wide text-white\">{avatar.name}</span>\n                  {avatar.role && <span className=\"text-[8px] font-normal tracking-wider text-white/50 uppercase\">{avatar.role}</span>}\n                  <div className=\"absolute bottom-0 left-1/2 -translate-x-1/2 h-0.5 w-4/5 rounded-full bg-linear-to-r from-transparent via-blue-400 to-transparent blur-[1px]\" />\n                </div>\n              </div>\n            </div>\n          )\n        })}\n      </div>\n\n    </div>\n  )\n}",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}