63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T3228,"use client"; import { useEffect, useId, useRef, useState, type CSSProperties, type HTMLAttributes, } from "react"; import { cn } from "@/lib/utils"; export type LiquidGlassProps = HTMLAttributes & { contentClassName?: string; /** Corner radius in px. Default 999 (pill). */ radius?: number; /** Rim band that bends light, in px. */ bevelDepth?: number; /** Displacement strength in px. */ scale?: number; /** Chromatic aberration spread in px. */ aberration?: number; /** Extra blur after refraction, in px. */ frost?: number; /** White body tint 0–1. */ tint?: number; }; /** * Liquid glass surface. A Snell's-law displacement map bends whatever sits * behind the element through an SVG filter used as `backdrop-filter`. * Chromium refracts; Safari, Firefox and reduced-transparency fall back to * frosted glass. */ export function LiquidGlass({ children, className, contentClassName, radius = 999, bevelDepth = 14, scale = 48, aberration = 4, frost = 0.4, tint = 0.12, style, ...rest }: LiquidGlassProps) { const reactId = useId().replace(/:/g, ""); const rootRef = useRef(null); const blobRef = useRef(null); const [size, setSize] = useState({ w: 0, h: 0 }); const [filter, setFilter] = useState<{ id: string; svg: string } | null>( null, ); const [mode, setMode] = useState<"pending" | "simple" | "opaque">("pending"); useEffect(() => { if (prefersReducedTransparency()) setMode("opaque"); else if (isSafariLike() || !supportsUrlBackdropFilter()) setMode("simple"); }, []); useEffect(() => { const el = rootRef.current; if (!el || mode !== "pending") return; const ro = new ResizeObserver(([entry]) => { if (!entry) return; // Border box, so the map matches the backdrop-filter layer. const box = entry.borderBoxSize?.[0]; const width = box?.inlineSize ?? entry.contentRect.width; const height = box?.blockSize ?? entry.contentRect.height; setSize({ w: Math.max(1, Math.round(width)), h: Math.max(1, Math.round(height)), }); }); ro.observe(el); return () => ro.disconnect(); }, [mode]); useEffect(() => { if (mode !== "pending" || size.w <= 1 || size.h <= 1) return; let cancelled = false; (async () => { const mapUrl = await generateDisplacementBlobUrl({ width: size.w, height: size.h, radius: Math.min(radius, size.w / 2, size.h / 2), bevelDepth: Math.min(bevelDepth, Math.min(size.w, size.h) / 2), dpr: Math.min(window.devicePixelRatio || 1, 2), }); // Decode the map before the filter attaches. await new Promise((resolve) => { const img = new Image(); img.onload = img.onerror = () => resolve(); img.src = mapUrl; }); if (cancelled) { URL.revokeObjectURL(mapUrl); return; } if (blobRef.current) URL.revokeObjectURL(blobRef.current); blobRef.current = mapUrl; // Fresh id each rebuild, because browsers cache filter output by id. const id = `lg-${reactId}-${size.w}x${size.h}-${Date.now().toString(36)}`; setFilter({ id, svg: buildFilterSvg({ id, mapUrl, width: size.w, height: size.h, scale, aberration, frost, }), }); })(); return () => { cancelled = true; }; }, [mode, size.w, size.h, radius, bevelDepth, scale, aberration, frost, reactId]); useEffect( () => () => { if (blobRef.current) URL.revokeObjectURL(blobRef.current); }, [], ); const backdrop = mode === "opaque" ? "none" : mode === "simple" ? "blur(20px) saturate(1.4)" : filter ? `url(#${filter.id}) blur(0.5px) saturate(1.85) brightness(1.02)` : "blur(10px) saturate(1.6) brightness(1.04)"; return (

{filter ? ( ) : null} {contentClassName ? (

{children}

) : ( children )}

); } function supportsUrlBackdropFilter() { if (typeof CSS === "undefined" || !CSS.supports) return false; return ( CSS.supports("backdrop-filter", "url(#x)") || CSS.supports("-webkit-backdrop-filter", "url(#x)") ); } function prefersReducedTransparency() { if (typeof window === "undefined" || !window.matchMedia) return false; return window.matchMedia("(prefers-reduced-transparency: reduce)").matches; } function isSafariLike() { if (typeof navigator === "undefined") return false; const ua = navigator.userAgent; return /Safari/.test(ua) && !/Chrome|Chromium|Edg|OPR/.test(ua); } /* --------------------------------------------------------------------------- * Displacement map * R = horizontal bend, G = vertical bend, B = rim specular, A = shape mask. * Neutral grey (128) means zero displacement. * ------------------------------------------------------------------------- */ type DisplacementOptions = { width: number; height: number; radius: number; bevelDepth: number; gain?: number; light?: { x: number; y: number }; dpr?: number; }; /** Signed distance to a rounded box centred at the origin. <0 inside. */ function sdRoundedBox( px: number, py: number, halfW: number, halfH: number, r: number, ) { const qx = Math.abs(px) - halfW + r; const qy = Math.abs(py) - halfH + r; const outside = Math.hypot(Math.max(qx, 0), Math.max(qy, 0)); const inside = Math.min(Math.max(qx, qy), 0); return inside + outside - r; } /** Squircle-dome slope → Snell's-law bend. `x` = 0 at the rim, 1 at centre. */ function bendFromDepth(x: number) { const u = 1 - Math.min(1, Math.max(0, x)); const denom = (1 - u ** 4) ** 0.75; if (denom < 1e-6) return 0; const thetaI = Math.atan(Math.min(u ** 3 / denom, 8)); const sinT = Math.sin(thetaI) / 1.5; if (sinT >= 1) return Math.sin(thetaI); return Math.sin(thetaI - Math.asin(sinT)); } /** φ(d) = ∫ bend along the distance from the rim. */ function buildPhiTable(bevelPx: number) { const n = Math.max(1, Math.ceil(bevelPx)); const phi = new Float32Array(n + 1); for (let d = 1; d <= n; d++) phi[d] = phi[d - 1] + bendFromDepth(d / n); return phi; } function samplePhi(phi: Float32Array, depth: number) { const max = phi.length - 1; if (depth <= 0) return phi[0]; if (depth >= max) return phi[max]; const i = Math.floor(depth); const f = depth - i; return phi[i] * (1 - f) + phi[i + 1] * f; } function computeDisplacementData(opts: DisplacementOptions) { const dpr = opts.dpr ?? 1; const gain = opts.gain ?? 1.35; const light = opts.light ?? { x: -0.55, y: -0.85 }; const lightLen = Math.hypot(light.x, light.y) || 1; const lx = light.x / lightLen; const ly = light.y / lightLen; const W = Math.max(1, Math.round(opts.width * dpr)); const H = Math.max(1, Math.round(opts.height * dpr)); const halfW = W / 2; const halfH = H / 2; const r = Math.min(opts.radius * dpr, halfW, halfH); const bevel = Math.max(1, opts.bevelDepth * dpr); const phi = buildPhiTable(bevel); // Height field over the shape, then displace along its gradient. const field = new Float32Array(W * H); for (let y = 0; y < H; y++) { const py = y - halfH + 0.5; for (let x = 0; x < W; x++) { const d = sdRoundedBox(x - halfW + 0.5, py, halfW, halfH, r); field[y * W + x] = d > 0 ? 0 : samplePhi(phi, Math.min(bevel, -d)); } } const data = new Uint8ClampedArray(W * H * 4); for (let y = 0; y < H; y++) { const py = y - halfH + 0.5; for (let x = 0; x < W; x++) { const px = x - halfW + 0.5; const i = (y * W + x) << 2; const d = sdRoundedBox(px, py, halfW, halfH, r); if (d > 0) { data[i] = data[i + 1] = data[i + 2] = 128; data[i + 3] = 0; continue; } const x0 = Math.max(0, x - 1); const x1 = Math.min(W - 1, x + 1); const y0 = Math.max(0, y - 1); const y1 = Math.min(H - 1, y + 1); const dPhiX = (field[y * W + x1] - field[y * W + x0]) / (x1 - x0 || 1); const dPhiY = (field[y1 * W + x] - field[y0 * W + x]) / (y1 - y0 || 1); // Cap so the rim compresses but never folds over itself. const dx = Math.max(-1, Math.min(1, dPhiX * gain)); const dy = Math.max(-1, Math.min(1, dPhiY * gain)); let specular = 0; if (d >= -bevel) { const gx = sdRoundedBox(px + 1, py, halfW, halfH, r) - sdRoundedBox(px - 1, py, halfW, halfH, r); const gy = sdRoundedBox(px, py + 1, halfW, halfH, r) - sdRoundedBox(px, py - 1, halfW, halfH, r); const len = Math.hypot(gx, gy) || 1; const dot = (gx / len) * lx + (gy / len) * ly; const rim = 1 - Math.min(1, -d / bevel); specular = (Math.max(0, dot) + Math.max(0, -dot) * 0.35) * rim; } data[i] = 128 + dx * 127; data[i + 1] = 128 + dy * 127; data[i + 2] = Math.round(specular * 255); data[i + 3] = 255; } } return { data, width: W, height: H }; } /** PNG blob URL for feImage (WebKit rejects data: URIs inside feImage). */ async function generateDisplacementBlobUrl(opts: DisplacementOptions) { const { data, width, height } = computeDisplacementData(opts); const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); if (!ctx) throw new Error("2d context unavailable"); ctx.putImageData(new ImageData(data, width, height), 0, 0); const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"), ); if (!blob) throw new Error("Failed to encode displacement map"); return URL.createObjectURL(blob); } /* --------------------------------------------------------------------------- * SVG filter * ------------------------------------------------------------------------- */ type FilterOptions = { id: string; mapUrl: string; width: number; height: number; scale: number; aberration: number; frost: number; }; function buildFilterSvg({ id, mapUrl, width, height, scale, aberration, frost, }: FilterOptions) { const pad = Math.ceil(scale + aberration + 4); const px = (pad / Math.max(1, width)) * 100; const py = (pad / Math.max(1, height)) * 100; const region = `x="-${px.toFixed(3)}%" y="-${py.toFixed(3)}%" width="${(100 + 2 * px).toFixed(3)}%" height="${(100 + 2 * py).toFixed(3)}%"`; // Pixel-sized map matched to the lens; % units wash out the rim bend. const map = ``; const displace = (s: number, result: string) => ``; // One pass without aberration, so no screen-blend seams. const body = aberration <= 0 ? `${displace(scale, "rgb")}` : `${displace(scale + aberration, "dispR")} ${displace(scale, "dispG")} ${displace(Math.max(0, scale - aberration), "dispB")} `; return ``; } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"components/ui/liquid-glass.tsx","content":"$64","type":"registry:ui","target":"components/ui/liquid-glass.tsx"}],"className":"h-[70svh] min-h-80"}]]}]