/* ============================================================ Cover: interactive Liquid Glass hero (bento) · on-palette gradient backdrop (no photo, no vivid color) · slow-drifting monochrome blobs, faint parallax to pointer · a small, obscure, colorless frosted lens that follows the cursor and faintly distorts whatever sits behind it · thin, wide-tracked name; staggered entrance motion · respects prefers-reduced-motion ============================================================ */ const { useState, useEffect, useRef, useCallback } = React; function usePrefersReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(function () { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const on = function () { setReduced(mq.matches); }; on(); mq.addEventListener("change", on); return function () { mq.removeEventListener("change", on); }; }, []); return reduced; } function useFinePointer() { const [fine, setFine] = useState(false); useEffect(function () { const mq = window.matchMedia("(pointer: fine)"); const on = function () { setFine(mq.matches); }; on(); mq.addEventListener("change", on); return function () { mq.removeEventListener("change", on); }; }, []); return fine; } /* A small, colorless frosted droplet that trails the cursor and faintly refracts the background. Deliberately subtle. */ function GlassLens(props) { const heroRef = props.heroRef; const reduced = usePrefersReducedMotion(); const fine = useFinePointer(); const lensRef = useRef(null); const target = useRef({ x: -999, y: -999, on: false }); const pos = useRef({ x: -999, y: -999 }); const raf = useRef(0); const D = 104; useEffect(function () { if (reduced || !fine) return; const hero = heroRef.current; if (!hero) return; function move(e) { const r = hero.getBoundingClientRect(); target.current.x = e.clientX - r.left; target.current.y = e.clientY - r.top; target.current.on = true; } function leave() { target.current.on = false; } hero.addEventListener("pointermove", move); hero.addEventListener("pointerleave", leave); hero.addEventListener("pointerenter", move); function tick() { const t = target.current, p = pos.current; p.x += (t.x - p.x) * 0.42; p.y += (t.y - p.y) * 0.42; const lens = lensRef.current; if (lens) { lens.style.opacity = t.on ? "1" : "0"; lens.style.transform = "translate(" + (p.x - D / 2) + "px," + (p.y - D / 2) + "px) scale(" + (t.on ? 1 : 0.7) + ")"; } raf.current = requestAnimationFrame(tick); } raf.current = requestAnimationFrame(tick); return function () { cancelAnimationFrame(raf.current); hero.removeEventListener("pointermove", move); hero.removeEventListener("pointerleave", leave); hero.removeEventListener("pointerenter", move); }; }, [reduced, fine, heroRef]); if (reduced || !fine) return null; return (