{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inverted-cursor",
  "title": "Inverted Cursor",
  "description": "A smooth, animated custom cursor component with blend mode effects.",
  "dependencies": [
    "react"
  ],
  "files": [
    {
      "path": "registry/gammaui/inverted-cursor.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useRef, useState } from \"react\"\n\ninterface CursorProps {\n  size?: number\n}\n\nexport const Cursor: React.FC<CursorProps> = ({ size = 60 }) => {\n  const cursorRef = useRef<HTMLDivElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  // @ts-ignore\n  const requestRef = useRef<number>()\n  const previousPos = useRef({ x: -size, y: -size })\n\n  const [visible, setVisible] = useState(false)\n  const [position, setPosition] = useState({ x: -size, y: -size })\n\n  const animate = () => {\n    if (!cursorRef.current) return\n\n    const currentX = previousPos.current.x\n    const currentY = previousPos.current.y\n    const targetX = position.x - size / 2\n    const targetY = position.y - size / 2\n\n    const deltaX = (targetX - currentX) * 0.2\n    const deltaY = (targetY - currentY) * 0.2\n\n    const newX = currentX + deltaX\n    const newY = currentY + deltaY\n\n    previousPos.current = { x: newX, y: newY }\n    cursorRef.current.style.transform = `translate(${newX}px, ${newY}px)`\n\n    requestRef.current = requestAnimationFrame(animate)\n  }\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const rect = container.getBoundingClientRect()\n      setVisible(true)\n      setPosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      })\n    }\n\n    const handleMouseEnter = () => {\n      setVisible(true)\n    }\n\n    const handleMouseLeave = () => {\n      setVisible(false)\n    }\n\n    container.addEventListener(\"mousemove\", handleMouseMove)\n    container.addEventListener(\"mouseenter\", handleMouseEnter)\n    container.addEventListener(\"mouseleave\", handleMouseLeave)\n\n    requestRef.current = requestAnimationFrame(animate)\n\n    return () => {\n      container.removeEventListener(\"mousemove\", handleMouseMove)\n      container.removeEventListener(\"mouseenter\", handleMouseEnter)\n      container.removeEventListener(\"mouseleave\", handleMouseLeave)\n      if (requestRef.current) cancelAnimationFrame(requestRef.current)\n    }\n  }, [position, size])\n\n  return (\n    <div ref={containerRef} className=\"absolute inset-0 cursor-none\">\n      <div\n        ref={cursorRef}\n        className=\"pointer-events-none absolute z-50 rounded-full bg-white mix-blend-difference transition-opacity duration-300\"\n        style={{\n          width: size,\n          height: size,\n          opacity: visible ? 1 : 0,\n        }}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n\nexport default Cursor\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}