{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-button",
  "title": "Border Button",
  "description": "A reactive border animation button that follows cursor movement using Framer Motion and CSS masks.",
  "dependencies": [
    "react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/gammaui/border-button.tsx",
      "content": "\"use client\"\n\nimport { MouseEvent, useState } from \"react\"\nimport { motion } from \"motion/react\"\n\ninterface Position {\n  x: number\n  y: number\n}\n\ninterface BorderButtonProps {\n  label: string\n}\n\nexport default function BorderButton({ label }: BorderButtonProps) {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n  const [positions, setPositions] = useState<Record<number, Position>>({})\n  const [opacities, setOpacities] = useState<Record<number, number>>({})\n\n  const handleMouseMove = (e: MouseEvent<HTMLDivElement>, index: number) => {\n    const rect = e.currentTarget.getBoundingClientRect()\n    setPositions((prev) => ({\n      ...prev,\n      [index]: {\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      },\n    }))\n  }\n\n  const handleMouseEnter = (index: number) => {\n    setHoveredIndex(index)\n    setOpacities((prev) => ({\n      ...prev,\n      [index]: 1,\n    }))\n  }\n\n  const handleMouseLeave = () => {\n    if (hoveredIndex !== null) {\n      setOpacities((prev) => ({\n        ...prev,\n        [hoveredIndex]: 0,\n      }))\n    }\n    setHoveredIndex(null)\n  }\n\n  const i = 0\n\n  return (\n    <motion.button\n      initial={{ \"--x\": \"100%\", scale: 1.5 }}\n      animate={{ \"--x\": \"-100%\" }}\n      whileTap={{ scale: 0.97 }}\n      transition={{\n        stiffness: 20,\n        damping: 15,\n        mass: 2,\n        scale: {\n          type: \"spring\",\n          stiffness: 10,\n          damping: 5,\n          mass: 0.1,\n        },\n      }}\n      className=\"radial-gradient-border-button relative overflow-hidden rounded-xl bg-transparent\"\n    >\n      <div\n        key={i}\n        onMouseMove={(e) => handleMouseMove(e, i)}\n        onMouseEnter={() => handleMouseEnter(i)}\n        onMouseLeave={handleMouseLeave}\n        className=\"relative flex flex-col items-center justify-center rounded-xl px-2 py-1\"\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            borderRadius: \"inherit\",\n            // border: \"1px solid rgba(255, 255, 255, 0.5)\",\n            opacity: hoveredIndex === i ? opacities[i] : 0,\n            pointerEvents: \"none\",\n            WebkitMaskImage: `radial-gradient(circle 20px at ${positions[i]?.x || 0}px ${positions[i]?.y || 0}px, white 15%, transparent)`,\n          }}\n          className={`absolute inset-0 w-full rounded-xl border border-sky-500 transition-opacity duration-500 dark:border-white/40`}\n        />\n        <p className=\"text-white\">{label}</p>\n      </div>\n    </motion.button>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}