{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "magnetic-cursor-follower",
  "type": "registry:ui",
  "title": "Magnetic Cursor Follower",
  "description": "Kinetic cursor follower with spring-lag physics that magnetically snaps to nearby interactive buttons within proximity threshold.",
  "category": "cursors",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/cursors/magnetic-cursor-follower/magnetic-cursor-follower.tsx",
      "type": "registry:ui",
      "target": "components/ui/magnetic-cursor-follower.tsx",
      "content": "import React, { useState, useEffect, useRef } from 'react';\nimport { motion, useSpring, useMotionValue } from 'framer-motion';\n\nexport const MagneticCursorFollower: React.FC = () => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [activeTarget, setActiveTarget] = useState<string | null>(null);\n\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n\n  const springConfig = { damping: 25, stiffness: 350 };\n  const cursorX = useSpring(mouseX, springConfig);\n  const cursorY = useSpring(mouseY, springConfig);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    mouseX.set(e.clientX - rect.left);\n    mouseY.set(e.clientY - rect.top);\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => {\n        setIsHovered(false);\n        setActiveTarget(null);\n      }}\n      className=\"relative w-full h-64 rounded-2xl overflow-hidden bg-zinc-950/80 border border-white/10 flex flex-col items-center justify-center gap-4 cursor-none p-6 select-none\"\n    >\n      <span className=\"text-xs font-mono uppercase tracking-widest text-zinc-500\">\n        Move pointer over interactive elements\n      </span>\n\n      <div className=\"flex items-center gap-4 z-10\">\n        {['Deploy', 'Analyze', 'Terminal'].map((label) => (\n          <button\n            key={label}\n            onMouseEnter={() => setActiveTarget(label)}\n            onMouseLeave={() => setActiveTarget(null)}\n            className=\"px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-xs font-mono text-zinc-300 hover:text-white hover:border-indigo-500/50 hover:bg-indigo-500/10 transition-colors\"\n          >\n            {label}\n          </button>\n        ))}\n      </div>\n\n      {/* Spring Follower Cursor */}\n      {isHovered && (\n        <motion.div\n          style={{ x: cursorX, y: cursorY }}\n          className=\"pointer-events-none absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 z-30\"\n        >\n          <motion.div\n            animate={{\n              scale: activeTarget ? 1.8 : 1,\n              borderColor: activeTarget ? 'rgba(99, 102, 241, 0.9)' : 'rgba(255, 255, 255, 0.5)',\n              backgroundColor: activeTarget ? 'rgba(99, 102, 241, 0.15)' : 'transparent',\n            }}\n            transition={{ type: 'spring', damping: 20, stiffness: 300 }}\n            className=\"w-8 h-8 rounded-full border-2 backdrop-blur-xs flex items-center justify-center\"\n          >\n            <div className=\"w-1.5 h-1.5 rounded-full bg-indigo-400\" />\n          </motion.div>\n        </motion.div>\n      )}\n    </div>\n  );\n};\n"
    }
  ]
}