{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "follow-cursor",
  "type": "registry:block",
  "title": "Follow cursor",
  "description": "Follow cursor",
  "files": [
    {
      "path": "components/usages/followcursorusage.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\n\nimport MouseFollower from \"@/registry/open-source/follow-cursor\";\n\nexport default function Usage() {\n\tconst [mouseFollowerContainer, setMouseFollowerContainer] = useState();\n\n\tuseEffect(() => {\n\t\tif (window !== undefined) {\n\t\t\tsetMouseFollowerContainer(document.getElementById(\"mouseFollower\"));\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"w-full h-[33vh] relative\" id=\"mouseFollower\">\n\t\t\t\t<MouseFollower container={mouseFollowerContainer} />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/followcursorusage.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\n\nimport MouseFollower from \"@/registry/open-source/follow-cursor\";\n\nexport default function Usage() {\n\tconst [mouseFollowerContainer, setMouseFollowerContainer] = useState();\n\n\tuseEffect(() => {\n\t\tif (window !== undefined) {\n\t\t\tsetMouseFollowerContainer(document.getElementById(\"mouseFollower\"));\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"w-full h-[33vh] relative\" id=\"mouseFollower\">\n\t\t\t\t<MouseFollower container={mouseFollowerContainer} />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/follow-cursor.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nimport { motion, useMotionValue, useSpring } from \"motion/react\";\n\n// Credit:\n// https://www.sparkui.site/components/mouse-follower\n\nexport default function MouseFollower({ container }) {\n\tconst cursor = useRef(null);\n\tconst cursorSize = 15;\n\n\tconst mouse = {\n\t\tx: useMotionValue(0),\n\t\ty: useMotionValue(0),\n\t};\n\n\t// Smooth out the mouse values\n\tconst smoothOptions = { damping: 20, stiffness: 300, mass: 0.5 };\n\tconst smoothMouse = {\n\t\tx: useSpring(mouse.x, smoothOptions),\n\t\ty: useSpring(mouse.y, smoothOptions),\n\t};\n\n\tconst manageMouseMove = (e) => {\n\t\tconst { clientX, clientY } = e;\n\n\t\t// Move custom cursor to follow the mouse\n\t\tmouse.x.set(clientX - cursorSize / 2);\n\t\tmouse.y.set(clientY - cursorSize / 2);\n\t};\n\n\tuseEffect(() => {\n\t\tcontainer\n\t\t\t? container.addEventListener(\"mousemove\", manageMouseMove)\n\t\t\t: window.addEventListener(\"mousemove\", manageMouseMove);\n\n\t\treturn () => {\n\t\t\tcontainer\n\t\t\t\t? container.removeEventListener(\"mousemove\", manageMouseMove)\n\t\t\t\t: window.removeEventListener(\"mousemove\", manageMouseMove);\n\t\t};\n\t}, [container]);\n\n\treturn (\n\t\t<motion.div\n\t\t\tstyle={{\n\t\t\t\tleft: smoothMouse.x,\n\t\t\t\ttop: smoothMouse.y,\n\t\t\t\tpointerEvents: \"none\",\n\t\t\t\twidth: cursorSize,\n\t\t\t\theight: cursorSize,\n\t\t\t}}\n\t\t\tclassName={`h-4 w-4 fixed rounded-full bg-background`}\n\t\t\tref={cursor}\n\t\t/>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}