{
    "name": "liquid-cursor",
    "title": "Liquid Cursor",
    "description": "A smooth, fluid cursor that follows your mouse with gentle stretch and bounce effects.",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/liquid-cursor.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/liquid-cursor.tsx",
            "content": "\"use client\";\n\nimport { ComponentProps, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype LiquidCursorProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n    size?: number;\n    strong?: boolean;\n};\n\nexport const LiquidCursor = ({ size = 40, strong = false, className, ...props }: LiquidCursorProps) => {\n    const cursorRef = useRef<HTMLDivElement>(null);\n    const prevPos = useRef({ x: 0, y: 0 });\n    const prevAngle = useRef(0);\n\n    useGSAP(() => {\n        const clickDrop = () => {\n            if (!cursorRef.current) return;\n\n            gsap.to(cursorRef.current, {\n                scale: 1.3,\n                duration: 0.3,\n                ease: \"power2.out\",\n                onComplete: () => {\n                    gsap.to(cursorRef.current, {\n                        scale: 1,\n                        duration: 0.4,\n                        ease: \"bounce.out\",\n                    });\n                },\n            });\n        };\n        const moveDrop = (e: MouseEvent) => {\n            if (!cursorRef.current) return;\n\n            const dx = e.clientX - prevPos.current.x;\n            const dy = e.clientY - prevPos.current.y;\n\n            const distance = Math.sqrt(dx * dx + dy * dy);\n            const angle = Math.atan2(dy, dx) * (180 / Math.PI);\n\n            let delta = angle - prevAngle.current;\n            if (delta > 180) delta -= 360;\n            if (delta < -180) delta += 360;\n\n            const smoothingFactor = 0.2;\n            const smoothAngle = prevAngle.current + delta * smoothingFactor;\n\n            const maxStretch = 1.2;\n            const stretch = Math.min(distance / 30, maxStretch);\n\n            const absDx = Math.abs(dx);\n            const absDy = Math.abs(dy);\n            const total = absDx + absDy || 1;\n            const xRatio = absDx / total;\n\n            const scaleX = 1 + xRatio * stretch;\n            const scaleY = 1 - xRatio * stretch * 0.3;\n\n            gsap.to(cursorRef.current, {\n                duration: 1,\n                left: e.clientX - size / 2,\n                top: e.clientY - size / 2,\n                scaleX,\n                scaleY,\n                rotate: smoothAngle,\n                ease: \"power2.out\",\n            });\n\n            prevAngle.current = smoothAngle;\n            prevPos.current = { x: e.clientX, y: e.clientY };\n        };\n\n        window.addEventListener(\"click\", clickDrop);\n\n        window.addEventListener(\"mousemove\", moveDrop);\n        return () => window.removeEventListener(\"mousemove\", moveDrop);\n    }, []);\n\n    const lightStyle = {\n        background: `\n  radial-gradient(circle, \n    rgba(255, 255, 255, 0.25) 90%,  \n    rgba(255, 255, 255, 0.1) 70%, \n    transparent 20%                \n  )\n`,\n        border: \"1px solid rgba(255, 255, 255, 0.25)\",\n    };\n\n    const strongStyle = {\n        background: `\n    radial-gradient(125.95% 106.37% at 32.61% 3.41%,\n    rgba(255, 255, 255, 0.6) 0%,\n    rgba(255, 255, 255, 0.45) 28.13%,\n    rgba(252, 252, 252, 0.35) 45.31%,\n    rgba(248, 248, 248, 0.3) 66.67%,\n    rgba(243, 243, 243, 0.25) 100%)\n  `,\n        boxShadow: `\n    0 8px 16px rgba(0, 0, 0, 0.1),\n    inset -4px -8px 12px rgba(255, 255, 255, 0.05),\n    inset 3px 3px 8px rgba(240, 240, 240, 0.04),\n    inset 5px 10px 14px rgba(255, 255, 255, 0.03)\n  `,\n        border: \"1px solid rgba(255, 255, 255, 0.2)\",\n    };\n\n    return (\n        <div\n            {...props}\n            ref={cursorRef}\n            className={cn(\n                \"pointer-events-none fixed z-999 rounded-full saturate-[180%] backdrop-blur-[2px]\",\n                \"dark:saturate-[160%] dark:backdrop-brightness-[0.8]\",\n                className,\n            )}\n            style={{\n                height: size,\n                width: size,\n                ...(strong ? strongStyle : lightStyle),\n            }}\n        />\n    );\n};\n"
        }
    ]
}