{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-follow-mouse",
  "title": "Use Follow Mouse Hook",
  "description": "As the name suggests, this hook will follow the mouse position.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/utils/use-follow-mouse/index.ts",
      "content": "import { frame, SpringOptions, useMotionValue, useSpring } from 'motion/react';\nimport { useEffect, useRef } from 'react';\n\ninterface UseFollowMouseProps {\n  springConfig?: SpringOptions;\n}\nexport function useFollowMouse(props: UseFollowMouseProps) {\n  const { springConfig } = props;\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const cursorRef = useRef<HTMLDivElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    const followMouse = (e: MouseEvent) => {\n      const cursor = cursorRef.current;\n      const container = containerRef.current;\n      if (!cursor || !container) return;\n\n      frame.read(() => {\n        const containerRect = container.getBoundingClientRect();\n        const relativeX =\n          e.clientX - containerRect.left - cursor.offsetWidth / 2;\n        const relativeY =\n          e.clientY - containerRect.top - cursor.offsetHeight / 2;\n\n        x.set(relativeX);\n        y.set(relativeY);\n      });\n    };\n    containerRef.current?.addEventListener('mousemove', followMouse);\n    return () =>\n      containerRef.current?.removeEventListener('mousemove', followMouse);\n  }, []);\n\n  const cursorXSpring = useSpring(x, springConfig);\n  const cursorYSpring = useSpring(y, springConfig);\n\n  return {\n    containerRef,\n    cursorRef,\n    cursorXSpring,\n    cursorYSpring,\n  };\n}\n",
      "type": "registry:hook",
      "target": "components/systaliko-ui/utils/use-follow-mouse.ts"
    }
  ],
  "type": "registry:hook"
}