, 14 call sites pass a React `key` through
it, and styles.css hangs a descendant rule off `.reveal--visible`
(.section-index__rule). Unwrapping would move layout, break lists and
silently kill that rule. Adding one word does none of that, and deleting
the word restores the animation exactly. */
function ScrollReveal({ children, delay = 0, direction = 'up', duration, className = '', style = {}, still = false }) {
const ref = React.useRef(null);
const [visible, setVisible] = React.useState(still);
React.useEffect(() => {
if (still) return;
const el = ref.current;
if (!el) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
setVisible(true);
return;
}
let observer = null;
let done = false;
const item = {
el,
reveal() {
if (done) return;
done = true;
if (observer) observer.disconnect();
revealSweeper.remove(item);
setVisible(true);
},
};
observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting || entry.boundingClientRect.top < 0) item.reveal(); },
{ threshold: 0.15 }
);
observer.observe(el);
revealSweeper.add(item);
return () => { observer.disconnect(); revealSweeper.remove(item); };
}, []);
const dirClass = direction === 'left' ? 'reveal--left' : direction === 'right' ? 'reveal--right' : '';
const transitionDuration = duration ? `${duration}ms` : undefined;
return (
{child}
));
}
/* The section-index eyebrows — "Mission", "Research", "People" — type
themselves out on scroll.
Removed wholesale in 4929017 as part of answering Antoine's note about too
much motion, then reinstated here on Samuel's call: with the 107 body-copy
reveals now still, these 40 small mono labels are the only text that moves,
which is what makes them read as a signature rather than as part of a
general drift. The thing Antoine objected to was the wash, not this.
Restored verbatim from fd40c79 — same observer, same revealSweeper
catch-up, same 45ms cadence. Call sites never changed; they kept passing
`delay` through the static stand-in, so nothing at the 40 sites needs
touching either way. */
function TypewriterLabel({ text, delay = 0 }) {
const ref = React.useRef(null);
const [visible, setVisible] = React.useState(false);
const [charCount, setCharCount] = React.useState(0);
/* Same single-frame-jump failure as ScrollReveal: a flick that carries the
eyebrow from below the viewport to above it crosses no threshold, the
observer never fires, and the label is stranded blank forever. Reuses the
shared revealSweeper and the same `boundingClientRect.top < 0` clause.
`typeOut` is false on both catch-up paths — the element is already above
the fold, so animating it is pointless; it just has to be there. */
const [instant, setInstant] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
setVisible(true);
setCharCount(text.length);
return;
}
let observer = null;
let done = false;
const item = {
el,
/* revealSweeper calls reveal() with no argument, so the sweeper path is
the `typeOut` falsy branch by construction. */
reveal(typeOut) {
if (done) return;
done = true;
if (observer) observer.disconnect();
revealSweeper.remove(item);
if (!typeOut) { setInstant(true); setCharCount(text.length); }
setVisible(true);
},
};
observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) item.reveal(true);
else if (entry.boundingClientRect.top < 0) item.reveal(false);
},
{ threshold: 0.15 }
);
observer.observe(el);
revealSweeper.add(item);
return () => { observer.disconnect(); revealSweeper.remove(item); };
}, []);
React.useEffect(() => {
if (!visible || instant) return;
const timeout = setTimeout(() => {
let i = 0;
const interval = setInterval(() => {
i++;
setCharCount(i);
if (i >= text.length) clearInterval(interval);
}, 45);
return () => clearInterval(interval);
}, delay);
return () => clearTimeout(timeout);
}, [visible, instant, text, delay]);
return (
{visible ? text.slice(0, charCount) : ' '}
{visible && charCount < text.length && (
|
)}
);
}
function useParallax(rate = 0.4) {
const ref = React.useRef(null);
const [offset, setOffset] = React.useState(0);
React.useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
let ticking = false;
const onScroll = () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
const el = ref.current;
if (el) {
const rect = el.getBoundingClientRect();
const center = rect.top + rect.height / 2;
const viewCenter = window.innerHeight / 2;
setOffset((center - viewCenter) * rate);
}
ticking = false;
});
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, [rate]);
return { ref, offset };
}
/* Live media query. Used to keep decorative art OUT OF THE DOM at widths where
the stylesheet hides it — display:none does not stop a browser downloading an
![]()
, so hiding alone still costs the visitor the bytes. */
function useMediaQuery(query) {
const [matches, setMatches] = React.useState(
() => window.matchMedia ? window.matchMedia(query).matches : true
);
React.useEffect(() => {
if (!window.matchMedia) return;
const mq = window.matchMedia(query);
const on = e => setMatches(e.matches);
setMatches(mq.matches);
if (mq.addEventListener) { mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }
mq.addListener(on); return () => mq.removeListener(on);
}, [query]);
return matches;
}
/* ============================================================
Navigation
============================================================ */
/* Insights is HELD until there is real writing to publish.
BLOG_POSTS held exactly ONE entry: "What We Mean by 'Behavioral AI'",
bylined to Antoine with his photo and dated Dec 4 2025. It was a placeholder
that shipped looking like a published article, and it WAS the whole section —
remove it and the page is empty. Antoine caught it on 2026-08-04: "Obviously
we'd not go live with my fake blog post would we?" Samuel's call the same day
was to pull it and hide the section rather than launch with it or wait.
The page, its components, its route title and its render branch all still
exist. This flag is the only thing between them and the site. To bring
Insights back: add a real post to BLOG_POSTS and set this to true. The
placeholder's text is recoverable from git history at 86bc0b6~1. */
const INSIGHTS_LIVE = false;
const EXPLORE_ITEMS = [
{ label: 'Blog', route: 'insights' },
{ label: 'Events', route: 'events' },
{ label: 'Glossary', route: 'glossary' },
{ label: 'Open Letter', route: 'open-letter' },
];
const WORK_ITEMS = [
{ label: 'Consulting', route: 'services' },
{ label: 'Training', route: 'training' },
{ label: 'Contact', route: 'contact' },
];
/* Explore and Work are menus, not routes. They exist because #events and
#training are finished pages that nothing linked to — these two menus are
the only path to them on desktop.
They REPLACE the flat Services and Insights pills rather than sitting
alongside them (Work -> Consulting is #services, Explore -> Blog is
#insights, so nothing became less reachable). Measured: at 1024px the pill
has 119.5px of slack and two extra top-level pills need ~189px, and below
900px the pill is already over-full — "Get in touch" is crushed from 129.6px
to 75px at 769px. Swapping keeps the bar the same width at every breakpoint. */
/* The v1 launch nav, set by b5a1609 (2026-07-09) and reordered per Luana's
review (prep/CHANGES.md §2, 2026-07-22): About sits last, before the CTA.
FLAT ON PURPOSE. Do not reintroduce the Explore / Work dropdowns — they were
removed in b5a1609 and their EXPLORE_ITEMS / WORK_ITEMS labels ('Blog',
'Consulting') predate two naming rulings: Blog→Insights (Samuel, 2026-06-01)
and Consulting→Services (Paul 2026-05-21, confirmed by Samuel 2026-07-10).
Page-visibility tiers from that same commit:
Tier 1 (in this nav) home · research · services · insights · about · contact
Tier 2 (footer + direct URL only) glossary · open-letter · newsletter · join
Tier 3 (HELD, hash-only, NO LINKS ANYWHERE) training · events
Training is not a service line (Antoine, 2026-07-02). Re-confirmed 2026-07-31. */
const NAV_ITEMS = [
{ label: 'Home', route: 'home' },
{ label: 'Research', route: 'research' },
{ label: 'Services', route: 'services' },
...(INSIGHTS_LIVE ? [{ label: 'Insights', route: 'insights' }] : []),
{ label: 'About', route: 'about' },
];
/* WAI-ARIA "disclosure navigation" — a real
{children}
);
}
function StaggerChildren({ children, baseDelay = 0, stagger = 100, direction = 'up' }) {
return React.Children.map(children, (child, i) => (