);
}
/* sticky chapter-break recede: the divider pins, then scales + fades as the
section content scrolls up over it (the section "transition"). */
function useSectionRecede(cardRef, secRef, numRef) {
useEffect(() => {
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
let raf = 0;
/* Progress is read LIVE from the sticky container (the .chapter wrapper),
not a cached startY - so it stays correct even when content above shifts
the divider down after mount (lazy images, video, fonts). The divider sits
at the top of its chapter, so once the chapter's top scrolls past the
viewport top, -top == pixels receded. */
const container = () => (secRef.current ? secRef.current.closest(".chapter") || secRef.current.parentElement : null);
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
raf = 0;
const c = container();
if (!cardRef.current || reduce || !c) return;
const vh = window.innerHeight;
const top = c.getBoundingClientRect().top;
const p = Math.min(Math.max(-top / (vh * 0.55), 0), 1);
cardRef.current.style.transform = `scale(${1 - p * 0.12}) translateY(${p * -4}%)`;
cardRef.current.style.opacity = String(1 - p * 0.55);
});
};
window.addEventListener("scroll", onScroll, { passive: true });
const onResize = () => onScroll();
window.addEventListener("resize", onResize);
window.addEventListener("load", onScroll);
onScroll();
return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onResize); window.removeEventListener("load", onScroll); cancelAnimationFrame(raf); };
}, []);
}
/* SECTION DIVIDER - every numbered section opens with a full-screen chapter
break: acid bottom-glow + [ NN ] + the section NAME, which pins and recedes
as the section's thesis scrolls up over it. The descriptive headline + lead
follow below in normal flow. */
function SectionHero({ id, num, kicker, parts, lead, leadStyle, align = "center", glow = false, media = null, mediaNode = null, titleMax = 1000 }) {
const cardRef = useRef(null), secRef = useRef(null), numRef = useRef(null);
const ghostRef = useReveal({ threshold: 0.2 });
useSectionRecede(cardRef, secRef, numRef);
return (
{num}
{media && (
)}
{mediaNode && (
{mediaNode}
)}
[ {num} ]{kicker}
{lead && (
{lead}
)}
);
}
/* big statement headline block (left rail label + huge headline) */
function Statement({ label, children, sub, align = "left", max = 920 }) {
return (
{label && }
{children}
{sub &&
{sub}
}
);
}
/* acid highlight inline */
function Hi({ children }) { return {children}; }
/* animated horizontal bar - fills to pct% when scrolled into view */
function Bar({ pct, color = "var(--pp-acid)", opacity = 1, height = 8, dur = 1.1, delay = 0 }) {
const [on, setOn] = useState(false);
const ref = useRef(null);
useEffect(() => {
const node = ref.current;
if (!node) return;
if (matchMedia("(prefers-reduced-motion: reduce)").matches) { setOn(true); return; }
const io = new IntersectionObserver((e) => { if (e[0].isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: 0.4 });
io.observe(node);
return () => io.disconnect();
}, []);
return (
);
}
/* ============================================================
HAND-PHONE SCREEN SWITCHER
Real photo of a hand holding a phone with the screen cut to
transparency (the FRAME), with app screens stacked underneath.
All layers share ONE canvas (987×1203), so they're placed at
inset:0 full-size - switching = cross-fade the active screen.
To add a screen: drop a 987×1203 PNG with the screen content
in place (rest transparent) and add it to `screens`.
============================================================ */
const HAND_FRAME = "assets/hand-frame-real.webp";
const HAND_RATIO = "987 / 1203";
/* The screen cut-out within the 987×1203 frame, as a clip-path. Everything
in the screen layer is masked to exactly this rounded rectangle, so sliding
carousel images can NEVER appear outside the phone's glass. */
const HAND_SCREEN_CLIP = "inset(5.32% 48.33% 22.44% 11.14% round 5.98% / 4.9%)";
/* Hand-phone screen layer. Pass an array of 987×1203 screen PNGs.
1 screen → static. >1 → auto-swipe carousel that slides left every
`interval` ms and loops. The frame is a PERMANENT node - it never
remounts or re-fades when the screen set changes; only the screen
inside swaps (and fades/slides in). */
function HandScreen({ screens = [], vh = 78, frame = HAND_FRAME, interval = 4000 }) {
const n = Math.max(1, screens.length);
const sig = screens.join("|");
const [i, setI] = React.useState(0); // ever-increasing within a set; current = i % n
// reset the carousel whenever the screen SET changes (capability switch)
React.useEffect(() => { setI(0); }, [sig]);
// auto-advance (only for multi-screen sets)
React.useEffect(() => {
if (n <= 1) return;
const t = setInterval(() => setI((p) => p + 1), interval);
return () => clearInterval(t);
}, [sig, n, interval]);
const boxStyle = { height: `${vh}vh`, maxWidth: "100%", aspectRatio: HAND_RATIO, position: "relative", margin: "0 auto" };
// the screen layer is clipped to the glass rect - nothing escapes the phone
const clipStyle = { position: "absolute", inset: 0, clipPath: HAND_SCREEN_CLIP, WebkitClipPath: HAND_SCREEN_CLIP };
const imgStyle = { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", pointerEvents: "none", userSelect: "none" };
const cur = ((i % n) + n) % n;
const prev = ((i - 1) % n + n) % n;
const sliding = i > 0; // true only on an autoplay advance within the same set
return (
{/* segmented progress - one bar per screen; the active one fills over `interval` */}
{n > 1 && (
{screens.map((_, b) => (
))}
)}
{/* on an autoplay advance the previous screen stays beneath while the new one slides over it */}
{sliding && }
{/* PERMANENT frame - stable element, never remounts on set change */}
);
}
/* iPhone mockup - titanium frame + dynamic island; screen content via children. Sized by height (vh). */
function PhoneMockup({ children, vh = 70 }) {
return (