// src/well.jsx — water graphics, ripples, scroll-fill engine
const { useEffect, useRef, useState, useMemo } = React;
// ─── matchMedia hook ──────────────────────────────────────────────────
// Reads on first render so layouts don't flash the wrong breakpoint.
function useMediaQuery(query) {
const [matches, setMatches] = useState(() => {
if (typeof window === "undefined" || !window.matchMedia) return false;
return window.matchMedia(query).matches;
});
useEffect(() => {
if (!window.matchMedia) return;
const mql = window.matchMedia(query);
const onChange = (e) => setMatches(e.matches);
setMatches(mql.matches);
mql.addEventListener ? mql.addEventListener("change", onChange) : mql.addListener(onChange);
return () => {
mql.removeEventListener ? mql.removeEventListener("change", onChange) : mql.removeListener(onChange);
};
}, [query]);
return matches;
}
// ─── scroll progress hook ─────────────────────────────────────────────
function useScrollFill(override) {
const [fill, setFill] = useState(0);
useEffect(() => {
if (override >= 0) { setFill(override); return; }
let raf = 0;
const tick = () => {
const max = document.documentElement.scrollHeight - window.innerHeight;
const p = max > 0 ? window.scrollY / max : 0;
setFill(Math.min(1, Math.max(0, p)));
raf = 0;
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
tick();
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, [override]);
return fill;
}
// ─── animated wave path (used in hero + depth meter) ──────────────────
function WavePath({ amp = 8, freq = 1.5, phase = 0, y = 50, w = 1440, h = 100, fill = "#0E3A52", motion = "medium" }) {
const ref = useRef(null);
useEffect(() => {
if (motion === "none") return;
const speed = motion === "heavy" ? 0.0012 : motion === "medium" ? 0.0006 : 0.0003;
let raf;
const start = performance.now();
const loop = (t) => {
const dt = (t - start) * speed;
const el = ref.current;
if (el) {
const segs = 60;
const pts = [];
for (let i = 0; i <= segs; i++) {
const x = (i / segs) * w;
const yy = y + Math.sin((i / segs) * Math.PI * 2 * freq + phase + dt) * amp
+ Math.sin((i / segs) * Math.PI * 2 * (freq * 1.7) + phase * 1.3 + dt * 0.7) * (amp * 0.4);
pts.push(`${x.toFixed(1)},${yy.toFixed(1)}`);
}
el.setAttribute("d", `M0,${h} L0,${y} L${pts.join(" L")} L${w},${h} Z`);
}
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [amp, freq, phase, y, w, h, motion]);
return
);
}
// ─── water-fill background — fixed; rises with scroll ─────────────────
function WaterFill({ fill, palette, motion }) {
// fill: 0..1 → water level rises from bottom
const level = 100 - fill * 92; // %; leave a small dry strip even at full
return (
{/* dry sand / sky on top */}
{/* water body */}
{/* surface wave */}
{seeds.map((s, i) => (
);
}
// Full-viewport fixed bubble field — independent of the (now-removed) water fill
function BubbleField({ palette, motion }) {
const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
if (motion === "none" || reduced) return null;
return (
);
}
// ─── striped placeholder for imagery ──────────────────────────────────
function PhotoSlot({ label, w, h, palette, accent, style }) {
return (
);
}
// ─── ripple-on-hover wrapper ──────────────────────────────────────────
function Ripple({ children, palette, motion }) {
const ref = useRef(null);
const burst = (e) => {
if (motion === "none") return;
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const x = e.clientX - r.left, y = e.clientY - r.top;
const sp = document.createElement("span");
sp.className = "rip";
sp.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:8px;height:8px;border-radius:50%;
background:${palette.accent};opacity:.5;transform:translate(-50%,-50%);
pointer-events:none;animation:rip 900ms ease-out forwards;mix-blend-mode:${palette.isDark?"screen":"multiply"}`;
el.appendChild(sp);
setTimeout(() => sp.remove(), 950);
};
return (
{children}
);
}
Object.assign(window, { useScrollFill, useMediaQuery, WavePath, Caustics, WaterFill, PhotoSlot, Ripple, BubbleField });