Liquid Glass

1"use client";
2 
3import { CSSProperties, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8import { cn } from "@/lib/utils";
9 
10type LiquidGlassProps = {
11    width?: number;
12    height?: number;
13    borderRadius?: number;
14    tintOpacity?: number;
15    blur?: number;
16};
17 
18export const LiquidGlass = (props: LiquidGlassProps) => {
19    const { width = 120, height = 120, borderRadius = 12, tintOpacity = 0.1, blur = 2 } = props;
20 
21    const glassRef = useRef<HTMLDivElement>(null);
22 
23    useGSAP(() => {
24        const glass = glassRef.current;
25        const parent = glass?.parentElement;
26 
27        if (!glass || !parent) return;
28 
29        const mouseMove = (e: MouseEvent) => {
30            if (!glassRef.current || !glassRef.current?.parentElement) return;
31 
32            const parentRect = parent.getBoundingClientRect();
33 
34            const posX = e.clientX - parentRect.left - width / 2;
35            const posY = e.clientY - parentRect.top - height / 2;
36 
37            gsap.to(glassRef.current, {
38                duration: 0.6,
39                left: posX,
40                top: posY,
41                ease: "power2.out",
42            });
43        };
44 
45        if (!glassRef.current) return;
46 
47        if (parent) {
48            window.addEventListener("mousemove", mouseMove);
49        }
50 
51        return () => {
52            window?.removeEventListener("mousemove", mouseMove);
53        };
54    }, []);
55 
56    return (
57        <>
58            <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" className="absolute overflow-hidden">
59                <defs>
60                    <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%">
61                        <feTurbulence
62                            type="fractalNoise"
63                            baseFrequency="0.008 0.008"
64                            numOctaves="2"
65                            seed="92"
66                            result="noise"></feTurbulence>
67                        <feGaussianBlur in="noise" stdDeviation="2" result="blurred"></feGaussianBlur>
68                        <feDisplacementMap
69                            in="SourceGraphic"
70                            in2="blurred"
71                            scale="80"
72                            xChannelSelector="R"
73                            yChannelSelector="G"></feDisplacementMap>
74                    </filter>
75                </defs>
76            </svg>
77            <div
78                ref={glassRef}
79                className={cn(
80// … truncated