{
    "name": "liquid-glass",
    "title": "Liquid Glass",
    "description": "A smooth glass effect with subtle blur, ideal for UI highlights and overlays.",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/liquid-glass.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/liquid-glass.tsx",
            "content": "\"use client\";\n\nimport { CSSProperties, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype LiquidGlassProps = {\n    width?: number;\n    height?: number;\n    borderRadius?: number;\n    tintOpacity?: number;\n    blur?: number;\n};\n\nexport const LiquidGlass = (props: LiquidGlassProps) => {\n    const { width = 120, height = 120, borderRadius = 12, tintOpacity = 0.1, blur = 2 } = props;\n\n    const glassRef = useRef<HTMLDivElement>(null);\n\n    useGSAP(() => {\n        const glass = glassRef.current;\n        const parent = glass?.parentElement;\n\n        if (!glass || !parent) return;\n\n        const mouseMove = (e: MouseEvent) => {\n            if (!glassRef.current || !glassRef.current?.parentElement) return;\n\n            const parentRect = parent.getBoundingClientRect();\n\n            const posX = e.clientX - parentRect.left - width / 2;\n            const posY = e.clientY - parentRect.top - height / 2;\n\n            gsap.to(glassRef.current, {\n                duration: 0.6,\n                left: posX,\n                top: posY,\n                ease: \"power2.out\",\n            });\n        };\n\n        if (!glassRef.current) return;\n\n        if (parent) {\n            window.addEventListener(\"mousemove\", mouseMove);\n        }\n\n        return () => {\n            window?.removeEventListener(\"mousemove\", mouseMove);\n        };\n    }, []);\n\n    return (\n        <>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0\" height=\"0\" className=\"absolute overflow-hidden\">\n                <defs>\n                    <filter id=\"glass-distortion\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\">\n                        <feTurbulence\n                            type=\"fractalNoise\"\n                            baseFrequency=\"0.008 0.008\"\n                            numOctaves=\"2\"\n                            seed=\"92\"\n                            result=\"noise\"></feTurbulence>\n                        <feGaussianBlur in=\"noise\" stdDeviation=\"2\" result=\"blurred\"></feGaussianBlur>\n                        <feDisplacementMap\n                            in=\"SourceGraphic\"\n                            in2=\"blurred\"\n                            scale=\"80\"\n                            xChannelSelector=\"R\"\n                            yChannelSelector=\"G\"></feDisplacementMap>\n                    </filter>\n                </defs>\n            </svg>\n            <div\n                ref={glassRef}\n                className={cn(\n                    \"absolute isolate z-999 rounded-(--lg-border-radius) shadow-lg\",\n                    [\n                        \"before:absolute before:inset-0 before:z-0 before:rounded-(--lg-border-radius) before:bg-[rgba(255,255,255,var(--lg-tint-opacity))] before:shadow-[inset_0_0_20px_-5px_rgba(255,255,255,0.7)] before:content-['']\",\n                    ],\n                    [\n                        \"after:absolute after:inset-0 after:isolate after:-z-1 after:rounded-(--lg-border-radius) after:[filter:url(#glass-distortion)] after:backdrop-blur-[var(--lg-blur)] after:content-['']\",\n                    ],\n                )}\n                style={\n                    {\n                        \"--lg-border-radius\": `${borderRadius}px`,\n                        \"--lg-tint-opacity\": tintOpacity,\n                        \"--lg-blur\": `${blur}px`,\n                        width: width,\n                        height: height,\n                    } as CSSProperties\n                }></div>\n        </>\n    );\n};\n"
        }
    ]
}