{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pill-card",
  "title": "Pill Card",
  "description": "A card with animated SVG paths and synchronized glow effects.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/new-york/components/pill-card/pill-card.tsx",
      "type": "registry:component",
      "content": "\"use client\";\nimport { useRef, useEffect, useState } from \"react\";\nimport { ShieldCheck, Database, Radio, Monitor, Wallet } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst CYCLE = 2.4;\nconst ARRIVE = 0.65;\nconst DOT_LEN = 0.15;\nconst STAGGER = 0.15;\n\nconst ICON_LIST = [\n  { IconComponent: Monitor },\n  { IconComponent: Wallet },\n  { IconComponent: ShieldCheck },\n  { IconComponent: Database },\n];\n\nconst ICON_SIZE = 38;\nconst ICON_GAP = 36;\nconst PATH_START_Y = 38;\n\nconst PillCard = () => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [dimensions, setDimensions] = useState({ w: 350, h: 450 });\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setDimensions({\n          w: entry.contentRect.width,\n          h: entry.contentRect.height,\n        });\n      }\n    });\n    observer.observe(containerRef.current);\n    return () => observer.disconnect();\n  }, []);\n\n  const { w: W, h: H } = dimensions;\n  const ICON_Y = H - 155;\n  const PATH_END_Y = ICON_Y + 3;\n\n  const totalWidth = ICON_LIST.length * ICON_SIZE + (ICON_LIST.length - 1) * ICON_GAP;\n  const startX = (W - totalWidth) / 2;\n\n  const ICONS = ICON_LIST.map((icon, i) => ({\n    ...icon,\n    x: startX + i * (ICON_SIZE + ICON_GAP) + ICON_SIZE / 2,\n  }));\n\n  const generatePath = (targetX: number) => {\n    const mid = PATH_START_Y + (PATH_END_Y - PATH_START_Y) * 0.35;\n    const cx = W / 2;\n    return `M ${cx} ${PATH_START_Y} C ${cx} ${mid * 0.6 + PATH_START_Y * 0.4}, ${targetX} ${mid}, ${targetX} ${PATH_END_Y}`;\n  };\n\n  return (\n    <div className=\"relative w-full max-w-87.5 h-112.5 overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm\">\n      <div ref={containerRef} className=\"absolute inset-0\">\n        <svg\n          className=\"absolute inset-0 w-full h-full pointer-events-none\"\n          viewBox={`0 0 ${W} ${H}`}\n          fill=\"none\"\n        >\n          {ICONS.map((icon, i) => (\n            <motion.path\n              key={i}\n              d={generatePath(icon.x)}\n              className=\"stroke-primary\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              initial={{ pathLength: DOT_LEN, pathOffset: 0, opacity: 1 }}\n              animate={{\n                pathOffset: [0, 1 - DOT_LEN, 1, 1],\n                opacity: [1, 1, 0, 0],\n              }}\n              transition={{\n                duration: CYCLE,\n                ease: \"linear\",\n                repeat: Infinity,\n                delay: i * STAGGER,\n                times: [0, ARRIVE, ARRIVE + 0.1, 1],\n              }}\n            />\n          ))}\n        </svg>\n\n        {ICONS.map((icon, i) => (\n          <div\n            key={i}\n            className=\"absolute\"\n            style={{\n              left: icon.x,\n              top: ICON_Y,\n              transform: \"translate(-50%, -50%)\",\n            }}\n          >\n            <Icon cycle={CYCLE} arrive={ARRIVE} delay={i * STAGGER}>\n              <icon.IconComponent className=\"h-1/2 w-1/2\" strokeWidth={1.5} />\n            </Icon>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"relative z-10 flex flex-col items-center h-full p-6\">\n        <button className=\"rounded-lg border border-border bg-secondary px-5 py-2 flex items-center gap-2 shadow-xs\">\n          <Radio size={16} className=\"text-primary\" />\n          <span className=\"text-sm font-medium text-foreground\">rpc : mainnet-1</span>\n        </button>\n\n        <div className=\"mt-auto space-y-1.5 pb-2\">\n          <h3 className=\"text-xl font-medium text-foreground\">MCP Server</h3>\n          <p className=\"text-sm text-muted-foreground leading-relaxed\">\n            A hosted server with 160+ blockchain tools for any MCP client.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst Icon = ({\n  children,\n  cycle,\n  arrive,\n  delay,\n}: {\n  children: React.ReactNode;\n  cycle: number;\n  arrive: number;\n  delay: number;\n}) => (\n  <motion.div\n    animate={{\n      boxShadow: [\n        \"0px 0px 0px oklch(0.5905 0.2097 303.5671 / 0)\",\n        \"0px 0px 0px oklch(0.5905 0.2097 303.5671 / 0)\",\n        \"0px 0px 18px oklch(0.5905 0.2097 303.5671 / 0.5)\",\n        \"0px 0px 0px oklch(0.5905 0.2097 303.5671 / 0)\",\n      ],\n      color: [\n        \"#9ca3af\",\n        \"#9ca3af\",\n        \"oklch(0.5905 0.2097 303.5671)\",\n        \"#9ca3af\",\n      ],\n    }}\n    transition={{\n      duration: cycle,\n      ease: \"linear\",\n      repeat: Infinity,\n      delay,\n      times: [0, arrive - 0.01, arrive + 0.05, 1],\n    }}\n    whileHover={{\n      boxShadow: \"0px 0px 20px oklch(0.5905 0.2097 303.5671 / 0.55)\",\n      color: \"oklch(0.5905 0.2097 303.5671)\",\n    }}\n    className={cn(\n      \"relative flex items-center justify-center rounded-xl cursor-pointer backdrop-blur-xs\",\n      \"bg-secondary text-foreground border border-border shadow-xs\",\n      \"w-14 h-14\",\n    )}\n  >\n    {children}\n  </motion.div>\n);\n\nexport default PillCard;\n"
    }
  ],
  "type": "registry:component"
}