")`, backgroundSize: '220px 220px', }} /> ); } // ─── Corner chrome ────────────────────────────────────────────────────── function TCornerChrome() { const time = useTime(); const pulse = 0.5 + 0.5 * Math.sin(time * Math.PI * 1.1); return ( <> {/* Top-left logo */}

{/* Top-right edition */}

vol. 01 — engagement

{/* Bottom-right section caption + pulse */}

§ 02 · 72-hour hire

{/* Bottom-left folio */}

fig. 02·i — engagement arc

); } // ─── Arc + timeline line ──────────────────────────────────────────────── // The arc is a single horizontal moss-green line that progressively // "fills" from left (0h) to right (72h) as time advances. // Timeline domain: sweep begins at t=1.5s, ends at t=13s (11.5s total for // 72 hours). At t=1.5 → 5, covers 0h→24h. t=5→9, 24→48. t=9→13, 48→72. const SWEEP_START = 1.5; const SWEEP_END = 13.0; const HOLD_END = 14.0; function sweepHour(t) { // Returns hour value (0–72) for a given time t. if (t < SWEEP_START) return 0; if (t > SWEEP_END) return 72; const k = (t - SWEEP_START) / (SWEEP_END - SWEEP_START); return 72 * k; } // Reverse phase: 14–15s fades back to t=0 state. function reverseAlpha(t) { if (t < HOLD_END) return 0; return (t - HOLD_END) / (15 - HOLD_END); // 0→1 across last second } // Layout constants const TL_LEFT = 240; const TL_RIGHT = 1680; const TL_Y = 540; // vertical centerline const TL_WIDTH = TL_RIGHT - TL_LEFT; function hourToX(hour) { return TL_LEFT + (hour / 72) * TL_WIDTH; } // ─── Tick marks ───────────────────────────────────────────────────────── function TimelineAxis() { const time = useTime(); const rev = reverseAlpha(time); const axisOpacity = 1 - rev; // Dashed unfilled portion (whole line) // Filled portion (left of current sweep) const curHour = sweepHour(time) * (1 - rev); const fillX = hourToX(curHour); // Intro: at t<1.5s, fade line in const introOpacity = Math.min(1, Math.max(0, time / 1.2)); const opacity = axisOpacity * introOpacity; return ( <> {/* Base line (dashed, unfilled) */}

{/* Filled moss line (the arc sweep) */}

{/* Hour tick marks */} {[0, 24, 48, 72].map((h) => { const x = hourToX(h); const reached = sweepHour(time) >= h; const isAmber = h === 72 && time > 11.5 && time < HOLD_END; return (

); })} {/* Hour labels */} {[0, 24, 48, 72].map((h) => { const x = hourToX(h); const reached = sweepHour(time) >= h; const isAmber = h === 72 && time > 11.5 && time < HOLD_END; return (

{h}h

); })} ); } // ─── Sweep cursor (the dot that leads the sweep) ──────────────────────── function SweepCursor() { const time = useTime(); const rev = reverseAlpha(time); // Only visible during sweep if (time < SWEEP_START - 0.3) return null; if (time > HOLD_END + 0.2) return null; const hour = sweepHour(time) * (1 - rev); const x = hourToX(hour); // Amber bloom at 72h const amberBloom = hour >= 71.5 && time < HOLD_END ? Math.min(1, (hour - 71.5) / 0.5) * (1 - rev) : 0; const pulse = 0.5 + 0.5 * Math.sin(time * Math.PI * 3); const introOpacity = Math.min(1, Math.max(0, (time - (SWEEP_START - 0.3)) / 0.5)); return ( <> {/* Outer halo */}

0 ? `radial-gradient(circle, ${T_PALETTE.amberGlow}, transparent 70%)` : `radial-gradient(circle, rgba(111,163,122,0.35), transparent 70%)`, opacity: (0.5 + 0.5 * pulse) * introOpacity * (1 - rev), transition: 'none', }}/> {/* Core dot */}

0.3 ? T_PALETTE.amber : T_PALETTE.moss600, boxShadow: amberBloom > 0.3 ? `0 0 20px ${T_PALETTE.amber}, 0 0 40px ${T_PALETTE.amberGlow}` : `0 0 12px ${T_PALETTE.moss400}`, opacity: introOpacity * (1 - rev), transition: 'none', }}/> ); } // ─── Caption reveal component ─────────────────────────────────────────── // Each caption appears when the sweep passes its hour mark. // revealTime is the timeline-time when this caption should fade in (0.3s). // Captions alternate above/below the timeline for rhythm. function CaptionReveal({ hour, revealTime, above, title, body, serifWord, isAmber }) { const time = useTime(); const rev = reverseAlpha(time); const local = time - revealTime; const alpha = local < 0 ? 0 : Math.min(1, local / 0.3); const opacity = alpha * (1 - rev); if (opacity < 0.01) return null; const rise = 8 * (1 - alpha); // translate-up on reveal const x = hourToX(hour); const y = above ? TL_Y - 68 : TL_Y + 68; // Caption width + anchor const width = 280; // Last caption (72h) anchors right-aligned so it doesn't overflow let leftOffset; if (hour === 72) leftOffset = -width + 40; else if (hour === 0) leftOffset = -20; else leftOffset = -width / 2; return (

{/* Hour tag */}

hour {hour}

{/* Title */}

{serifWord ? ( <> {title.split(serifWord).map((part, i, arr) => ( {part} {i < arr.length - 1 && ( {serifWord} )} ))} ) : title}

{/* Body */}

{body}

{/* Connector line from text to timeline */}

); } // ─── Intro header text (§ 01 · you brief us) ──────────────────────────── function IntroHeader() { const time = useTime(); const rev = reverseAlpha(time); // Visible 0–1.5 at full, then fades out as sweep starts, back in on reverse let opacity; if (time < 1.0) opacity = Math.min(1, time / 0.6); else if (time < 1.5) opacity = 1 - (time - 1.0) / 0.5; else opacity = 0; opacity = Math.max(opacity, rev); if (opacity < 0.01) return null; return (

t — zero

§ 01 ·{' '} you brief us

); } // ─── Section title (persistent over sweep) ────────────────────────────── function SectionTitle() { const time = useTime(); const rev = reverseAlpha(time); // Appears after intro fades (t~1.5), stays through 13, fades on reverse let opacity; if (time < 1.5) opacity = 0; else if (time < 2.2) opacity = (time - 1.5) / 0.7; else opacity = 1; opacity *= (1 - rev); if (opacity < 0.01) return null; return (

§ 02 · engagement

72 hours to{' '} hired .

); } // ─── Amber bloom at hour 72 ───────────────────────────────────────────── function AmberBloom() { const time = useTime(); const rev = reverseAlpha(time); // Visible from ~11.5 (when sweep nears 72h) through hold let a; if (time < 11.5) a = 0; else if (time < 12.2) a = (time - 11.5) / 0.7; else if (time < HOLD_END) a = 1; else a = 0; const opacity = a * (1 - rev); if (opacity < 0.01) return null; const x = hourToX(72); const breathe = 0.85 + 0.15 * Math.sin(time * Math.PI * 1.5); return (

); } // ─── Main scene ───────────────────────────────────────────────────────── function TimelineScene() { return ( <> {/* Background tint variance */}

{/* Six captions. Alternating above/below for rhythm. */} {/* Reveals at the moment the sweep passes each hour mark. */} {/* Hours: 12, 24, 36, 48, 60, 72 */} {/* time when sweep reaches hour h: SWEEP_START + (h/72)*(SWEEP_END-SWEEP_START) */} ); } // Expose to global so HTML can mount it Object.assign(window, { TimelineScene, T_PALETTE, T_FONTS, });