/**
* GlassEffect — frosted glass overlay using SVG.
*
* Creates a frosted glass appearance by layering:
* 1. A blurred fractal noise texture (frosted glass refraction/caustics effect)
* 2. A subtle blue-tinted overlay
* 3. A white specular highlight at the top edge
* 4. A diagonal gradient border: white at corners, blue in middle
*
* Border radius is captured from the parent via ResizeObserver.
*
* @example
* ```tsx
*
*
* ```
*/
import { useEffect, useId, useRef, useState } from "react";
import { useApplicationContext } from "../../context/context";
export interface GlassEffectProps {
/** Border width style (default: "medium") */
showBorder?: boolean;
}
export function GlassEffect({ showBorder = true }: GlassEffectProps) {
const { currentColorScheme } = useApplicationContext();
const isDark = currentColorScheme === "dark";
const [dimensions, setDimensions] = useState(() => ({ width: 1, height: 1, borderRadius: "0" }));
const containerRef = useRef(null);
const id = useId();
const clipId = `${id}glassClip`;
const borderGradId = `${id}glassBorder`;
const strokeW = showBorder ? 1.5 : 0;
// Capture parent dimensions & border-radius
useEffect(() => {
const el = containerRef.current?.parentElement as HTMLElement;
if (!el) return;
const observe = () => {
setDimensions({
width: Math.max(1, el.offsetWidth),
height: Math.max(1, el.offsetHeight),
borderRadius: "0",
});
};
const ro = new ResizeObserver(observe);
ro.observe(el);
return () => ro.disconnect();
}, []);
return (
{/* Base tint layer - subtle blue wash */}
{isDark ? (
<>
{/* Top-left light refraction - warm highlight */}
{isDark ? (
<>
{/* Center iridescent sheen - cyan tint */}
{isDark ? (
<>
{/* Bottom-right cool highlight */}
{isDark ? (
<>
{isDark ? (
<>
{/* Top-left white highlight */}
{/* Liquid glass background - layered gradients for iridescent effect */}
);
}