{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"integrations-orbit","type":"registry:component","title":"Integrations Orbit","description":"Ícones de integrações orbitam um núcleo em dois anéis com velocidades opostas.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/integrations-orbit.tsx","type":"registry:component","content":"'use client'\n\nimport { motion } from 'motion/react'\nimport { Bot, Calendar, CreditCard, Database, Mail, MessageCircle, Sparkles, Table } from 'lucide-react'\n\n// \"Integrations Orbit\": ícones orbitando um núcleo em dois anéis com velocidades opostas.\nconst INNER = [Mail, MessageCircle, Calendar]\nconst OUTER = [Database, CreditCard, Table, Bot]\n\nfunction Ring({ icons, radius, duration, reverse = false }: { icons: typeof INNER; radius: number; duration: number; reverse?: boolean }) {\n  return (\n    <motion.div\n      className=\"absolute left-1/2 top-1/2 rounded-full border border-dashed border-border\"\n      style={{ width: radius * 2, height: radius * 2, marginLeft: -radius, marginTop: -radius }}\n      animate={{ rotate: reverse ? -360 : 360 }}\n      transition={{ duration, repeat: Infinity, ease: 'linear' }}\n    >\n      {icons.map((Icon, i) => {\n        const a = (i / icons.length) * Math.PI * 2\n        const x = Math.cos(a) * radius\n        const y = Math.sin(a) * radius\n        return (\n          <motion.div\n            key={i}\n            className=\"absolute left-1/2 top-1/2 flex size-10 items-center justify-center rounded-full border bg-card shadow-sm\"\n            style={{ x: x - 20, y: y - 20 }}\n            animate={{ rotate: reverse ? 360 : -360 }}\n            transition={{ duration, repeat: Infinity, ease: 'linear' }}\n          >\n            <Icon className=\"size-4 text-foreground\" />\n          </motion.div>\n        )\n      })}\n    </motion.div>\n  )\n}\n\nexport default function IntegrationsOrbit() {\n  return (\n    <div className=\"relative size-[340px] text-foreground\">\n      <Ring icons={INNER} radius={80} duration={18} />\n      <Ring icons={OUTER} radius={150} duration={32} reverse />\n      <motion.div\n        className=\"absolute left-1/2 top-1/2 flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-lg\"\n        animate={{ scale: [1, 1.06, 1] }}\n        transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}\n      >\n        <Sparkles className=\"size-7\" />\n      </motion.div>\n    </div>\n  )\n}\n"}]}