{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ripple-pulse","type":"registry:component","title":"Ripple Pulse","description":"Ondas concêntricas partem de um emissor central; contatos nas bordas pulsam.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":["avatar"],"files":[{"path":"components/illustrations/ripple-pulse.tsx","type":"registry:component","content":"'use client'\n\nimport { motion } from 'motion/react'\nimport { Radio } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\n\n// \"Ripple Pulse\": ondas concêntricas partindo de um emissor central; contatos nas bordas acendem.\nconst PEOPLE = [\n  { name: 'AS', angle: -60 },\n  { name: 'BR', angle: 20 },\n  { name: 'CM', angle: 110 },\n  { name: 'DL', angle: 200 },\n  { name: 'EF', angle: 290 },\n]\n\nexport default function RipplePulse() {\n  return (\n    <div className=\"relative size-[320px] text-foreground\">\n      {[0, 1, 2].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute left-1/2 top-1/2 rounded-full border border-primary/40\"\n          style={{ width: 80, height: 80, marginLeft: -40, marginTop: -40 }}\n          animate={{ scale: [1, 4], opacity: [0.6, 0] }}\n          transition={{ duration: 3, repeat: Infinity, ease: 'easeOut', delay: i }}\n        />\n      ))}\n      {PEOPLE.map((p, i) => {\n        const a = (p.angle * Math.PI) / 180\n        const r = 128\n        return (\n          <motion.div\n            key={p.name}\n            className=\"absolute left-1/2 top-1/2\"\n            style={{ x: Math.cos(a) * r - 18, y: Math.sin(a) * r - 18 }}\n            animate={{ scale: [1, 1.15, 1] }}\n            transition={{ duration: 3, repeat: Infinity, delay: 1.6 + i * 0.12 }}\n          >\n            <Avatar className=\"size-9 border bg-card\">\n              <AvatarFallback className=\"text-[11px]\">{p.name}</AvatarFallback>\n            </Avatar>\n          </motion.div>\n        )\n      })}\n      <div className=\"absolute left-1/2 top-1/2 flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg\">\n        <Radio className=\"size-6\" />\n      </div>\n    </div>\n  )\n}\n"}]}