// Shared hooks + primitives
const { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } = React;
// IntersectionObserver hook — fires once when element enters view
function useInView(options = { threshold: 0.15, rootMargin: "0px 0px -10% 0px" }) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setInView(true);
obs.disconnect();
}
});
}, options);
obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return [ref, inView];
}
// Tracks scrollY (throttled via rAF)
function useScrollY() {
const [y, setY] = useState(0);
useEffect(() => {
let raf = 0;
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
setY(window.scrollY);
raf = 0;
});
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
return y;
}
// Element-relative scroll progress: 0 before it enters, 1 after it exits
function useScrollProgress(ref) {
const [p, setP] = useState(0);
useEffect(() => {
let raf = 0;
const tick = () => {
raf = 0;
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const vh = window.innerHeight;
const total = r.height + vh;
const scrolled = vh - r.top;
setP(Math.max(0, Math.min(1, scrolled / total)));
};
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);
};
}, [ref]);
return p;
}
// Reveal wrapper — slides up + fades in
function Reveal({ children, delay = 0, y = 24, as: As = "div", className = "", style = {}, ...rest }) {
const [ref, vis] = useInView();
return (
{children}
);
}
// Split each character of text for stagger
function SplitText({ text, delay = 0, stagger = 18, className = "", style = {} }) {
const [ref, vis] = useInView();
const words = text.split(" ");
return (
{words.map((w, wi) => (
{w.split("").map((ch, ci) => {
const order = words.slice(0, wi).reduce((a, x) => a + x.length, 0) + ci;
return (
{ch}
);
})}
))}
);
}
// Pill
function Pill({ children, color, style = {} }) {
return (
{children}
);
}
// Big CTA button
function CTA({ children, onClick, accent = "var(--ink)", inverse = false, size = "md", style = {} }) {
const [h, setH] = useState(false);
const sizes = {
sm: { px: 14, py: 8, fs: 13 },
md: { px: 20, py: 12, fs: 14 },
lg: { px: 26, py: 16, fs: 15 },
};
const s = sizes[size];
const textColor = inverse ? "#0b0b0d" : "var(--bg)";
const bg = inverse ? accent : "var(--ink)";
return (
);
}
function GhostCTA({ children, onClick, style = {} }) {
const [h, setH] = useState(false);
return (
);
}
// Section wrapper
function Section({ children, id, pad = "120px 0", style = {} }) {
return (
);
}
// eyebrow label
function Eyebrow({ children, color }) {
return (
{children}
);
}
// Striped placeholder
function Placeholder({ label = "placeholder", h = 200, color = "var(--ink-dim)", style = {} }) {
return (
{label}
);
}
Object.assign(window, {
useInView, useScrollY, useScrollProgress,
Reveal, SplitText, Pill, CTA, GhostCTA, Section, Eyebrow, Placeholder,
});