{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ai-hub-beam","type":"registry:component","title":"AI Hub Beam","description":"Um núcleo de IA recebe feixes de seis modelos ao redor, com pulso no centro.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/ai-hub-beam.tsx","type":"registry:component","content":"'use client'\n\nimport { motion } from 'motion/react'\nimport { Sparkles } from 'lucide-react'\n\n// \"AI Hub Beam\": um núcleo central recebe feixes de vários modelos ao redor.\nconst MODELS = ['Claude', 'GPT', 'Gemini', 'Llama', 'Mistral', 'Grok']\nconst CX = 300\nconst CY = 170\nconst R = 130\n\nexport default function AiHubBeam() {\n  return (\n    <div className=\"w-full max-w-xl text-foreground\">\n      <svg viewBox=\"0 0 600 340\" className=\"h-auto w-full\" role=\"img\" aria-label=\"Hub de IA recebendo feixes de seis modelos\">\n        <defs>\n          <linearGradient id=\"ahb-beam\" x1=\"0\" x2=\"1\">\n            <stop offset=\"0\" stopColor=\"var(--primary)\" stopOpacity=\"0\" />\n            <stop offset=\"0.5\" stopColor=\"var(--primary)\" />\n            <stop offset=\"1\" stopColor=\"var(--primary)\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        {MODELS.map((m, i) => {\n          const a = (i / MODELS.length) * Math.PI * 2 - Math.PI / 2\n          const x = CX + Math.cos(a) * (R + 110)\n          const y = CY + Math.sin(a) * R\n          const d = `M ${x} ${y} Q ${(x + CX) / 2 + (CY - y) * 0.15} ${(y + CY) / 2 + (x - CX) * 0.15} ${CX} ${CY}`\n          return (\n            <g key={m}>\n              <path d={d} fill=\"none\" stroke=\"var(--border)\" strokeWidth=\"1.5\" />\n              <motion.path\n                d={d}\n                fill=\"none\"\n                stroke=\"url(#ahb-beam)\"\n                strokeWidth=\"2.5\"\n                strokeLinecap=\"round\"\n                initial={{ pathLength: 0.3, pathSpacing: 1, pathOffset: 0 }}\n                animate={{ pathLength: 0.3, pathSpacing: 1, pathOffset: 1 }}\n                transition={{ duration: 2 + (i % 3) * 0.4, repeat: Infinity, ease: 'linear', delay: i * 0.3 }}\n              />\n              <motion.g initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 + i * 0.07 }}>\n                <rect x={x - 44} y={y - 16} width=\"88\" height=\"32\" rx=\"16\" fill=\"var(--card)\" stroke=\"var(--border)\" />\n                <text x={x} y={y + 4} textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"500\" fill=\"var(--foreground)\" fontFamily=\"inherit\">\n                  {m}\n                </text>\n              </motion.g>\n            </g>\n          )\n        })}\n        <motion.circle cx={CX} cy={CY} r=\"34\" fill=\"var(--primary)\" fillOpacity=\"0.08\" animate={{ r: [34, 46, 34], fillOpacity: [0.08, 0.02, 0.08] }} transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }} />\n        <circle cx={CX} cy={CY} r=\"28\" fill=\"var(--card)\" stroke=\"var(--border)\" />\n        <foreignObject x={CX - 14} y={CY - 14} width=\"28\" height=\"28\">\n          <div className=\"flex size-7 items-center justify-center text-foreground\">\n            <Sparkles className=\"size-5\" />\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  )\n}\n"}]}