{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"map-pin-ripple","type":"registry:component","title":"Map Pin Ripple","description":"Pin principal emitindo ondas num mapa com pins secundários pulsando.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"components/illustrations/map-pin-ripple.tsx","type":"registry:component","content":"'use client'\n\nimport { motion } from 'motion/react'\nimport { MapPin } from 'lucide-react'\n\n// \"Map Pin Ripple\": um pin principal emite ondas; pins secundários acendem em sequência.\nconst PINS = [\n  { x: 70, y: 90 },\n  { x: 250, y: 70 },\n  { x: 210, y: 190 },\n  { x: 90, y: 200 },\n]\n\nexport default function MapPinRipple() {\n  return (\n    <div className=\"relative h-[260px] w-[320px] overflow-hidden rounded-2xl border bg-card text-foreground\">\n      <svg className=\"absolute inset-0 size-full opacity-40\" aria-hidden>\n        <defs>\n          <pattern id=\"mpr-grid\" width=\"24\" height=\"24\" patternUnits=\"userSpaceOnUse\">\n            <path d=\"M 24 0 L 0 0 0 24\" fill=\"none\" stroke=\"var(--border)\" strokeWidth=\"1\" />\n          </pattern>\n        </defs>\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#mpr-grid)\" />\n      </svg>\n      {PINS.map((p, i) => (\n        <motion.div\n          key={i}\n          className=\"absolute size-2.5 rounded-full bg-muted-foreground\"\n          style={{ left: p.x, top: p.y }}\n          animate={{ scale: [1, 1.6, 1], opacity: [0.5, 1, 0.5] }}\n          transition={{ duration: 2.4, repeat: Infinity, delay: 0.4 + i * 0.3 }}\n        />\n      ))}\n      <div className=\"absolute left-[160px] top-[130px]\">\n        {[0, 1, 2].map((i) => (\n          <motion.span\n            key={i}\n            className=\"absolute -left-5 -top-5 size-10 rounded-full border border-primary/50\"\n            animate={{ scale: [1, 3.2], opacity: [0.6, 0] }}\n            transition={{ duration: 2.4, repeat: Infinity, ease: 'easeOut', delay: i * 0.8 }}\n          />\n        ))}\n        <motion.div className=\"relative -left-4 -top-8 text-primary\" animate={{ y: [0, -4, 0] }} transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}>\n          <MapPin className=\"size-8 fill-primary/20\" />\n        </motion.div>\n      </div>\n      <div className=\"absolute bottom-3 left-3 rounded-md border bg-background/90 px-2 py-1 text-[11px] backdrop-blur\">\n        <span className=\"font-medium\">São Paulo</span> · 4 unidades próximas\n      </div>\n    </div>\n  )\n}\n"}]}