const { useState: useCS, useEffect: useCE, useRef: useCR } = React;
/* ---------- Reveal: simple intersection-based fade/slide ---------- */
function Reveal({ children, delay = 0, as: As = 'div', className = '', ...rest }) {
const ref = useCR(null);
useCE(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{children}
);
}
/* ---------- Word-by-word title reveal ---------- */
function WordReveal({ children, className = '', as: As = 'h2', delay = 0 }) {
// children is a flat array of strings/jsx — split each string into words,
// and stagger their reveal once the heading enters the viewport.
const ref = useCR(null);
const [shown, setShown] = useCS(false);
useCE(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) { setShown(true); io.unobserve(e.target); }
});
}, { threshold: 0.18 });
io.observe(el);
return () => io.disconnect();
}, []);
let wordIdx = 0;
const renderNode = (node) => {
if (typeof node === 'string') {
// split, preserve trailing space
return node.split(/(\s+)/).map((part, i) => {
if (/^\s+$/.test(part)) return part;
if (part === '') return null;
const idx = wordIdx++;
return (
{part}
);
});
}
if (React.isValidElement(node)) {
// recursive for em/strong nested
return React.cloneElement(node, { key: `el-${wordIdx}` }, React.Children.map(node.props.children, renderNode));
}
if (Array.isArray(node)) return node.map(renderNode);
return node;
};
return (
{React.Children.map(children, renderNode)}
);
}
/* ---------- ChapterHead: clean static eyebrow + animated title + lede ---------- */
function ChapterHead({ chapter, label, title, lede, ledeRight = true }) {
return (
{chapter}
{label}
{title}
{lede && (
{lede}
)}
);
}
/* ---------- SectionWorld: no-op, kept for back-compat ---------- */
function SectionWorld() { return null; }
/* ---------- Scroll progress bar (top) ---------- */
function ScrollProgress() {
const [p, setP] = useCS(0);
useCE(() => {
const onScroll = () => {
const doc = document.documentElement;
const max = doc.scrollHeight - doc.clientHeight;
setP(max > 0 ? window.scrollY / max : 0);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
/* ---------- Scroll rail: fixed left section navigator ---------- */
function ScrollRail({ sections }) {
const [active, setActive] = useCS(0);
useCE(() => {
const onScroll = () => {
let cur = 0;
sections.forEach((s, i) => {
const el = document.getElementById(s.id);
if (!el) return;
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight * 0.45) cur = i;
});
setActive(cur);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, [sections]);
return (
);
}
/* ---------- Parallax wrapper: subtle translate on scroll ---------- */
function Parallax({ speed = 0.2, children, className = '' }) {
const ref = useCR(null);
useCE(() => {
if (!ref.current) return;
let raf = 0;
const update = () => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const center = r.top + r.height / 2 - window.innerHeight / 2;
ref.current.style.transform = `translateY(${(-center * speed).toFixed(1)}px)`;
raf = 0;
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
}, [speed]);
return {children}
;
}
Object.assign(window, { Reveal, ChapterHead, WordReveal, SectionWorld, ScrollProgress, ScrollRail, Parallax });