/* global React */ /* ============================================================ */ /* PROCESS — "From chaos to clarity" */ /* Scribble + orange thread share one SVG coordinate space so */ /* the thread emerges visually from inside the tangle. */ /* ============================================================ */ const { useEffect: useEffectProc, useRef: useRefProc, useMemo: useMemoProc } = React; /* Deterministic PRNG so the scribble is stable across renders */ function pMulberry32(seed) { return function () { let t = (seed += 0x6d2b79f5) | 0; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function generateScribblePaths(seed) { const rng = pMulberry32(seed); const paths = []; const cx = 200, cy = 130, numPaths = 17; for (let i = 0; i < numPaths; i++) { const numPts = 10 + Math.floor(rng() * 6); const subCx = cx + (rng() - 0.5) * 70; const subCy = cy + (rng() - 0.5) * 50; const baseRx = 65 + rng() * 55; const baseRy = 45 + rng() * 35; const startA = rng() * Math.PI * 2; const turns = 1 + Math.floor(rng() * 2); const pts = []; for (let j = 0; j < numPts; j++) { const a = startA + (j / (numPts - 1)) * Math.PI * 2 * turns; const r = 0.35 + rng() * 0.9; pts.push([ subCx + Math.cos(a) * baseRx * r + (rng() - 0.5) * 12, subCy + Math.sin(a) * baseRy * r + (rng() - 0.5) * 12, ]); } let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`; for (let j = 1; j < pts.length; j++) { const prev = pts[j - 1], cur = pts[j]; const c1x = prev[0] + (rng() - 0.5) * 90, c1y = prev[1] + (rng() - 0.5) * 90; const c2x = cur[0] + (rng() - 0.5) * 90, c2y = cur[1] + (rng() - 0.5) * 90; d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${cur[0].toFixed(1)} ${cur[1].toFixed(1)}`; } paths.push({ d, sw: 1.0 + rng() * 0.9 }); } return paths; } function clampP(v) { return v < 0 ? 0 : v > 1 ? 1 : v; } function rangeProgress(t, a, b) { return clampP((t - a) / (b - a)); } /* Wavy hand-drawn path from (cx, sy) down to (cx, ey) — section-local coords */ function buildThreadPath(cx, sy, ey) { const span = ey - sy; return [ `M ${cx.toFixed(1)} ${sy.toFixed(1)}`, `C ${(cx+16).toFixed(1)} ${(sy + span*0.08).toFixed(1)}, ${(cx-22).toFixed(1)} ${(sy + span*0.18).toFixed(1)}, ${(cx+6).toFixed(1)} ${(sy + span*0.26).toFixed(1)}`, `S ${(cx-20).toFixed(1)} ${(sy + span*0.38).toFixed(1)}, ${cx.toFixed(1)} ${(sy + span*0.44).toFixed(1)}`, `S ${(cx+18).toFixed(1)} ${(sy + span*0.56).toFixed(1)}, ${(cx-8).toFixed(1)} ${(sy + span*0.66).toFixed(1)}`, `S ${(cx+14).toFixed(1)} ${(sy + span*0.78).toFixed(1)}, ${(cx-4).toFixed(1)} ${(sy + span*0.88).toFixed(1)}`, `S ${(cx+8).toFixed(1)} ${(sy + span*0.95).toFixed(1)}, ${cx.toFixed(1)} ${ey.toFixed(1)}`, ].join(' '); } function Process() { const sectionRef = useRefProc(null); const scribbleScreenRef = useRefProc(null); const scribbleGroupRef = useRefProc(null); const threadWrapRef = useRefProc(null); const svgRef = useRefProc(null); const stickyThreadSvgRef = useRefProc(null); /* centered sticky SVG for the orange thread */ const pathRef = useRefProc(null); const beadRef = useRefProc(null); const ms1Ref = useRefProc(null); const ms2Ref = useRefProc(null); const ms3Ref = useRefProc(null); const scribble = useMemoProc(() => generateScribblePaths(7), []); useEffectProc(() => { let raf = 0; let sectionStart = 0, sectionEnd = 0, pathLen = 0; const measure = () => { const sec = sectionRef.current; const scrScreen = scribbleScreenRef.current; const twrap = threadWrapRef.current; const svg = svgRef.current; const stickySvg = stickyThreadSvgRef.current; const path = pathRef.current; const scribbleG = scribbleGroupRef.current; if (!sec || !scrScreen || !twrap || !svg || !stickySvg || !path || !scribbleG) return; const secRect = sec.getBoundingClientRect(); const secAbsTop = secRect.top + window.scrollY; const secW = sec.offsetWidth; const secH = sec.offsetHeight; /* Overlay SVG covers the whole section — used only for the scribble */ svg.setAttribute('viewBox', `0 0 ${secW} ${secH}`); /* Scribble screen bounds in section-local coords */ const scrRect = scrScreen.getBoundingClientRect(); const scrLeft = scrRect.left - secRect.left; const scrTop = (scrRect.top + window.scrollY) - secAbsTop; const scrW = scrRect.width; const cssScribbleW = Math.min(480, window.innerWidth * 0.85); const scribbleScale = cssScribbleW / 400; const scrH = scrRect.height; const scribbleH = 260 * scribbleScale; const labelWithMargin = 76; const scribbleX = scrLeft + (scrW - cssScribbleW) / 2; const scribbleY = scrTop + (scrH - labelWithMargin - scribbleH) / 2 + labelWithMargin; scribbleG.setAttribute('transform', `translate(${scribbleX.toFixed(1)}, ${scribbleY.toFixed(1)}) scale(${scribbleScale.toFixed(4)})` ); scribbleG.style.opacity = '1'; /* Thread lives in the sticky SVG — coordinates are viewport-local (0..120 × 0..innerHeight). left: 50% + translateX(-50%) on the SVG element keeps it horizontally centered on any screen width without any JS measurement, so it can never drift off-screen. */ const H = window.innerHeight; stickySvg.setAttribute('viewBox', `0 0 120 ${H}`); path.setAttribute('d', buildThreadPath(60, 0, H)); pathLen = path.getTotalLength(); path.style.strokeDasharray = pathLen; path.style.strokeDashoffset = pathLen * 0.90; /* 10% pre-drawn at entry */ /* Scroll bounds span the thread-wrap zone only */ const twRect = twrap.getBoundingClientRect(); sectionStart = twRect.top + window.scrollY; sectionEnd = twRect.bottom + window.scrollY - window.innerHeight; }; const draw = () => { raf = 0; const p = clampP((window.scrollY - sectionStart) / (sectionEnd - sectionStart)); if (pathRef.current && pathLen > 0) { /* 10% always visible so thread is already embedded in the scribble. Progress then reveals the remaining 90% as the user scrolls. */ const minVisible = 0.10; const visibleProgress = minVisible + p * (1 - minVisible); pathRef.current.style.strokeDashoffset = pathLen * (1 - visibleProgress); if (beadRef.current) { /* Hide bead at p=0 (initial view) — show only the line so there is no floating dot. Bead appears once the user starts scrolling. */ if (p > 0.03) { const drawn = pathLen * visibleProgress; const pt = pathRef.current.getPointAtLength(drawn); beadRef.current.setAttribute('cx', pt.x); beadRef.current.setAttribute('cy', pt.y); beadRef.current.style.opacity = 1; } else { beadRef.current.style.opacity = 0; } } } /* Milestone labels fade in as the thread passes their zone */ const apply = (ref, v) => { if (!ref.current) return; ref.current.style.opacity = v; ref.current.style.transform = `translateY(${(1 - v) * 8}px)`; }; /* With section-wide bounds, thread-wrap starts at ~p=0.37. Milestones are spaced through the thread-wrap zone. */ apply(ms1Ref, rangeProgress(p, 0.50, 0.57)); apply(ms2Ref, rangeProgress(p, 0.66, 0.73)); apply(ms3Ref, rangeProgress(p, 0.82, 0.89)); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(draw); }; const onResize = () => { measure(); draw(); }; measure(); draw(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); if (document.fonts && document.fonts.ready) { document.fonts.ready.then(() => { measure(); draw(); }); } return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); if (raf) cancelAnimationFrame(raf); }; }, []); return (
{/* Screen 1 — Messy scribble */}
From chaos to clarity / 01
{/* Invisible spacer keeps layout height identical to before */} a tangle of thoughts
{/* Thread scroll zone — tall div keeps milestones sticky while thread draws */}
{/* Orange thread — viewport-local coordinates, always centered via CSS */}
listen interviews · field notes
define problem · users · scope
structure flows · requirements · ship
{/* Screen 3 — Branch output diagram */}
{/* Screen 4 — Caption */}
Messy ideas in. Structured solutions out.
process · in practice / ↓ selected work
{/* ── Scribble overlay SVG ────────────────────────────────── */} {/* Scribble only — thread has moved to the sticky viewport SVG */}
); } Object.assign(window, { Process });