// News Pastiche: abstracted column clippings with drift + pulsing highlights // that trace through a connector network into a central "Case Opened" callout. function NewsPastiche({ theme, variant = 'standard' }) { const ref = useRef(null); const inView = useInView(ref, { threshold: 0.15 }); const clippings = window.WB_DATA.clippings; // pulse cycles through a sequence: 0..N-1 = each clipping lights up in turn, // then N = connectors draw, N+1 = callout flashes, loop. const [pulse, setPulse] = useState(-1); useEffect(() => { if (!inView) return; const total = clippings.length + 2; // clippings + connect + callout let i = 0; setPulse(0); const id = setInterval(() => { i = (i + 1) % total; setPulse(i); }, 1400); return () => clearInterval(id); }, [inView, clippings.length]); const connectorActive = pulse >= clippings.length; const calloutActive = pulse === clippings.length + 1; // The callout sits at center of the collage const CX = 0.5, CY = 0.5; return (
{/* paper grain */}
{/* Connector SVG layer — under clippings */} {clippings.map((c, i) => { const sx = c.x + c.w / 2 / 1400; const sy = c.y + 0.12; const active = connectorActive; const delay = i * 0.15; return ( ); })} {/* Clippings */} {clippings.map((c, i) => ( ))} {/* Central callout */}
{/* corner chrome */}
PATTERN-DETECTION · LIVE MONITOR
{clippings.length} SIGNALS · 1 ENTITY
); } function Clipping({ clipping: c, theme, active, inView, index }) { // slow drift: small rotation sway const [driftRot, setDriftRot] = useState(0); useEffect(() => { if (!inView) return; let raf; const start = performance.now() + index * 800; const tick = (t) => { const elapsed = (t - start) / 1000; setDriftRot(Math.sin(elapsed * 0.4 + index) * 0.4); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView, index]); // Build body with highlight ranges (character indices) const body = c.body; const segments = []; let cursor = 0; const ranges = [...c.highlights].sort((a, b) => a.start - b.start); for (const r of ranges) { if (r.start > cursor) segments.push({ text: body.slice(cursor, r.start), hl: false }); segments.push({ text: body.slice(r.start, r.end), hl: true }); cursor = r.end; } if (cursor < body.length) segments.push({ text: body.slice(cursor), hl: false }); return (
{/* masking-tape corner */}
{c.kicker} {c.tag}
{c.headline}
330 ? 2 : 1, columnGap: 14, }}> {segments.map((s, i) => s.hl ? ( {s.text} ) : ( {s.text} ))}
); } function CaseCallout({ variant, theme, active }) { const data = window.WB_DATA.caseCallouts[variant] || window.WB_DATA.caseCallouts.standard; if (variant === 'narrative') { return (
◆ CASE OPENED · {data.id}
{data.headline}
{data.body}
); } if (variant === 'dossier') { return (
DOSSIER · {data.id} CONFIDENTIAL
{data.subject}
); } // standard return (
◆ CASE INITIATED {data.id}
JURISDICTIONS
{data.jurisdictions.join(' · ')}
); } function CalloutRow({ k, v, theme, emphasis }) { return (
{k.toUpperCase()} {v}
); } Object.assign(window, { NewsPastiche });