// Isac Lacerda — editorial primitives
// shared components used across sections
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ─── useInView (intersection observer) ───────────────── */
function useInView(opts = { threshold: 0.18 }) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
// Safety: if element is already in viewport on mount (above-fold), force.
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight * 0.9 && rect.bottom > 0) {
setInView(true);
return;
}
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); io.disconnect(); }
}, opts);
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, inView];
}
/* ─── EditorialDivider ─────────────────────────────────── */
function EditorialDivider({ num, label }) {
const [ref, inView] = useInView();
return (
{num}/ {label}
);
}
/* ─── ItalicSplitHeadline ──────────────────────────────── */
// Two-line headline: roman on line 1, italic on line 2 (signature move)
function ItalicSplit({ a, b, className = "h-display-2", as = "h2" }) {
const Tag = as;
return (
{a}
{b}
);
}
/* ─── BlurReveal text ──────────────────────────────────── */
function BlurReveal({ children, delay = 0, className = "" }) {
const [ref, inView] = useInView();
return (
{children}
);
}
/* ─── CurtainReveal ──────────────────────────────────────
Note: cannot put clip-path: inset(100%) on the observed
element — fully-clipped elements report isIntersecting=false
so the IO would never fire. Observe outer wrapper; clip
on inner element. */
function CurtainReveal({ children, delay = 0, className = "" }) {
const [ref, inView] = useInView();
return (