{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blob-mouse-trailer",
  "title": "Blob Mouse Trailer",
  "description": "A simple Lazy Blob Mouse Trailer",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/blob-mouse-trailer.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { motion, useMotionValue, useSpring } from \"motion/react\";\n\nexport const BlobMouseTrailer = () => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  const mouse = {\n    x: useMotionValue(0),\n    y: useMotionValue(0),\n  };\n\n  const mouseMove = (e: any) => {\n    const { clientX, clientY } = e;\n    mouse.x.set(clientX - 192);\n    mouse.y.set(clientY - 192);\n    setIsVisible(true);\n  };\n\n  const smoothOptions = {\n    damping: 10,\n    stiffness: 35,\n    mass: 0.5,\n  };\n\n  const smoothMouse = {\n    x: useSpring(mouse.x, smoothOptions),\n    y: useSpring(mouse.y, smoothOptions),\n  };\n\n  useEffect(() => {\n    window.addEventListener(\"mousemove\", mouseMove);\n\n    return () => {\n      window.removeEventListener(\"mousemove\", mouseMove);\n    };\n  }, []);\n  return (\n    <motion.div\n      className={` ${\n        isVisible ? \"hidden md:block\" : \"hidden\"\n      } animate-rotate pointer-events-none fixed top-0 left-0 -z-10 h-96 w-96 rounded-full bg-linear-to-r from-purple-500 to-amber-500 opacity-80 blur-[100px]`}\n      style={{\n        left: smoothMouse.x,\n        top: smoothMouse.y,\n      }}\n    />\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}