// ff-utils.jsx — small shared helpers + logo mark
const { useState, useEffect, useRef, useLayoutEffect, useMemo, useCallback } = React;
// Reveal-on-scroll wrapper. Adds .in once the element enters the viewport.
function Reveal({ as = "div", delay = 0, threshold = 0.15, className = "", style, children, ...rest }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
// Fallback — if IO never fires (some embed contexts), still reveal.
const fallback = setTimeout(() => setSeen(true), 1200);
if (typeof IntersectionObserver === "undefined") {
setSeen(true);
return () => clearTimeout(fallback);
}
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (e.isIntersecting) {
setSeen(true);
clearTimeout(fallback);
io.disconnect();
}
}
},
{ threshold, rootMargin: "0px 0px -40px 0px" }
);
io.observe(el);
// Manual check after a tick in case IO is slow / inert.
const tick = setTimeout(() => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) {
setSeen(true);
clearTimeout(fallback);
io.disconnect();
}
}, 50);
return () => {
io.disconnect();
clearTimeout(fallback);
clearTimeout(tick);
};
}, [threshold]);
const Tag = as;
const cls = `reveal ${delay ? "delay-" + delay : ""} ${seen ? "in" : ""} ${className}`;
return (
{children}
);
}
// Animated counter — counts to `to` once visible.
function Counter({ to, duration = 1400, prefix = "", suffix = "", className, style, format }) {
const ref = useRef(null);
const [v, setV] = useState(0);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const start = () => {
if (started.current) return;
started.current = true;
const t0 = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - t0) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setV(Math.round(to * eased));
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
};
// Fallback — always start the counter even if IO never fires.
const fallback = setTimeout(start, 1200);
if (typeof IntersectionObserver === "undefined") {
start();
return () => clearTimeout(fallback);
}
const io = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting) {
clearTimeout(fallback);
start();
}
}
}, { threshold: 0.4 });
io.observe(el);
const tick = setTimeout(() => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) {
clearTimeout(fallback);
start();
}
}, 50);
return () => {
io.disconnect();
clearTimeout(fallback);
clearTimeout(tick);
};
}, [to, duration]);
const display = format ? format(v) : v.toLocaleString();
return {prefix}{display}{suffix};
}
// Logo mark — interlocking arc + flow-line glyph
function LogoMark({ size = 22, color = "currentColor", accent = "var(--accent)" }) {
return (
);
}
// Section marker — animated accent rule + accent label. Index kept in signature for back-compat (rendered as aria only).
function SectionEyebrow({ index, label }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el || seen) return;
if (typeof IntersectionObserver === "undefined") { setSeen(true); return; }
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
},
{ threshold: 0.5, rootMargin: "0px 0px -10% 0px" }
);
io.observe(el);
return () => io.disconnect();
}, [seen]);
return (
{label}
);
}
// Font pairings
const FONT_PAIRS = {
geist: { sans: '"Geist"', mono: '"Geist Mono"' },
manrope: { sans: '"Manrope"', mono: '"JetBrains Mono"' },
inter: { sans: '"Inter Tight"', mono: '"IBM Plex Mono"' },
space: { sans: '"Space Grotesk"', mono: '"Space Mono"' },
};
// Full wordmark — W glyph + "wayrelay." White parts use currentColor;
// blue parts track var(--accent). Source: logo/White-blue-text-logo.svg
function BrandLogo({ height = 22, className = "", style = {} }) {
return (
);
}
// Icon-only mark — W glyph. Source: logo/White-blue-logo.svg
function BrandIcon({ height = 28, className = "", style = {} }) {
return (
);
}
Object.assign(window, { Reveal, Counter, LogoMark, BrandLogo, BrandIcon, SectionEyebrow, FONT_PAIRS });