{
  "name": "following-pointer",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/following-pointer.tsx",
      "content": "import React, { useEffect, useState } from \"react\";\n\nimport { motion, AnimatePresence, useMotionValue } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const FollowerPointerCard = ({\n  children,\n  className,\n  title,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  title?: string | React.ReactNode;\n}) => {\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [rect, setRect] = useState<DOMRect | null>(null);\n  const [isInside, setIsInside] = useState<boolean>(false); // Add this line\n\n  useEffect(() => {\n    if (ref.current) {\n      setRect(ref.current.getBoundingClientRect());\n    }\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (rect) {\n      const scrollX = window.scrollX;\n      const scrollY = window.scrollY;\n      x.set(e.clientX - rect.left + scrollX);\n      y.set(e.clientY - rect.top + scrollY);\n    }\n  };\n  const handleMouseLeave = () => {\n    setIsInside(false);\n  };\n\n  const handleMouseEnter = () => {\n    setIsInside(true);\n  };\n  return (\n    <div\n      onMouseLeave={handleMouseLeave}\n      onMouseEnter={handleMouseEnter}\n      onMouseMove={handleMouseMove}\n      style={{\n        cursor: \"none\",\n      }}\n      ref={ref}\n      className={cn(\"relative\", className)}\n    >\n      <AnimatePresence>\n        {isInside && <FollowPointer x={x} y={y} title={title} />}\n      </AnimatePresence>\n      {children}\n    </div>\n  );\n};\n\nexport const FollowPointer = ({\n  x,\n  y,\n  title,\n}: {\n  x: any;\n  y: any;\n  title?: string | React.ReactNode;\n}) => {\n  const colors = [\n    \"#0ea5e9\",\n    \"#737373\",\n    \"#14b8a6\",\n    \"#22c55e\",\n    \"#3b82f6\",\n    \"#ef4444\",\n    \"#eab308\",\n  ];\n  return (\n    <motion.div\n      className=\"absolute z-50 h-4 w-4 rounded-full\"\n      style={{\n        top: y,\n        left: x,\n        pointerEvents: \"none\",\n      }}\n      initial={{\n        scale: 1,\n        opacity: 1,\n      }}\n      animate={{\n        scale: 1,\n        opacity: 1,\n      }}\n      exit={{\n        scale: 0,\n        opacity: 0,\n      }}\n    >\n      <svg\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n        strokeWidth=\"1\"\n        viewBox=\"0 0 16 16\"\n        className=\"h-6 w-6 -translate-x-[12px] -translate-y-[10px] -rotate-[70deg] transform stroke-sky-600 text-sky-500\"\n        height=\"1em\"\n        width=\"1em\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z\"></path>\n      </svg>\n      <motion.div\n        style={{\n          backgroundColor: colors[Math.floor(Math.random() * colors.length)],\n        }}\n        initial={{\n          scale: 0.5,\n          opacity: 0,\n        }}\n        animate={{\n          scale: 1,\n          opacity: 1,\n        }}\n        exit={{\n          scale: 0.5,\n          opacity: 0,\n        }}\n        className={\n          \"min-w-max rounded-full bg-neutral-200 px-2 py-2 text-xs whitespace-nowrap text-white\"\n        }\n      >\n        {title || `William Shakespeare`}\n      </motion.div>\n    </motion.div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/following-pointer.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Following Pointer"
}