/* ============================================================
Kermit Webcraft — shared bits: scroll reveal, count-up,
and the abstract "browser wireframe" hero visual (pure CSS).
============================================================ */
/* Reveal-on-scroll wrapper. Default is VISIBLE; only below-the-fold
elements get hidden-then-animated, so content is never stuck hidden. */
function Reveal({ children, delay = 0, y = 16, style }) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(true);
const [animate, setAnimate] = React.useState(false);
React.useLayoutEffect(() => {
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const el = ref.current;
if (reduce || !el) return;
const rect = el.getBoundingClientRect();
if (rect.top <= window.innerHeight) return; // above/at fold → stay visible
setShown(false); setAnimate(true);
let safety = setTimeout(() => setShown(true), 1600);
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { setShown(true); clearTimeout(safety); io.disconnect(); } });
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
io.observe(el);
return () => { io.disconnect(); clearTimeout(safety); };
}, []);
return (
{children}
);
}
/* Count-up number that fires when scrolled into view. */
function CountUp({ to, suffix = "", prefix = "", decimals = 0, duration = 1400 }) {
const ref = React.useRef(null);
const [val, setVal] = React.useState(0);
React.useEffect(() => {
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce || !("IntersectionObserver" in window)) { setVal(to); return; }
const el = ref.current;
let raf;
const run = () => {
const start = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(to * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
};
if (el && el.getBoundingClientRect().top < window.innerHeight) { run(); return () => cancelAnimationFrame(raf); }
const safety = setTimeout(() => setVal(to), 2600);
const io = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) { clearTimeout(safety); run(); io.disconnect(); }
}, { threshold: 0.4 });
if (el) io.observe(el);
return () => { io.disconnect(); clearTimeout(safety); cancelAnimationFrame(raf); };
}, [to]);
const shown = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString("en-US");
return {prefix}{shown}{suffix};
}
/* Hero browser visual — a live analytics dashboard trending up.
Reads as "the sites we build perform." */
function BrowserWireframe({ compact = false }) {
const kpis = [
{ label: "Visitors", value: "12.4k", delta: "▲ 38%" },
{ label: "Conv. rate", value: "9.8%", delta: "▲ 2.6pt" },
{ label: "Avg load", value: "0.7s", delta: "▲ fast" },
];
const pts = "0,96 40,84 80,90 120,68 160,72 200,52 240,46 280,30 320,20";
return (
{/* title bar */}
kermitweb.craft / analytics
{/* dashboard */}
{/* header row */}
Traffic & conversions
Live
{/* KPI row */}
{kpis.map((k) => (
{k.label}
{k.value}
{k.delta}
))}
{/* chart */}
{dots.map((d, i) => (
))}
);
}
function HeroFX() {
const rootRef = React.useRef(null);
React.useEffect(() => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const root = rootRef.current;
if (!root) return;
const web = root.querySelector(".kw-web-pan");
const bok = root.querySelector(".kw-bokeh");
let tx = 0, ty = 0, x = 0, y = 0, raf;
const onMove = (e) => {
tx = (e.clientX / window.innerWidth - 0.5);
ty = (e.clientY / window.innerHeight - 0.5);
};
const tick = () => {
x += (tx - x) * 0.06; y += (ty - y) * 0.06;
if (web) web.style.transform = `translate(${(x * 30).toFixed(2)}px, ${(y * 20).toFixed(2)}px)`;
if (bok) bok.style.transform = `translate(${(x * 12).toFixed(2)}px, ${(y * 9).toFixed(2)}px)`;
raf = requestAnimationFrame(tick);
};
window.addEventListener("pointermove", onMove, { passive: true });
raf = requestAnimationFrame(tick);
return () => { window.removeEventListener("pointermove", onMove); cancelAnimationFrame(raf); };
}, []);
return (
);
}
Object.assign(window, { Reveal, CountUp, BrowserWireframe, HeroFX });