import { type CSSProperties, useRef } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { cn } from "@/lib/utils"; type LiquidGlassProps = { width?: number; height?: number; borderRadius?: number; tintOpacity?: number; blur?: number; }; export const LiquidGlass = (props: LiquidGlassProps) => { const { width = 120, height = 120, borderRadius = 12, tintOpacity = 0.1, blur = 2 } = props; const glassRef = useRef(null); useGSAP(() => { const glass = glassRef.current; const parent = glass?.parentElement; if (!glass || !parent) return; const mouseMove = (e: MouseEvent) => { if (!glassRef.current || !glassRef.current?.parentElement) return; const parentRect = parent.getBoundingClientRect(); const posX = e.clientX - parentRect.left - width / 2; const posY = e.clientY - parentRect.top - height / 2; gsap.to(glassRef.current, { duration: 0.6, left: posX, top: posY, ease: "power2.out", }); }; if (!glassRef.current) return; if (parent) { window.addEventListener("mousemove", mouseMove); } return () => { window?.removeEventListener("mousemove", mouseMove); }; }, []); return ( <>

); };