// LiveDemo.jsx — auto-cycling before/after of the actual Plumb panel // Now supports scroll-pinned scrubbing: wrap in a .pin-track parent and // the scene index follows scroll progress. const PlumbLiveDemo = ({ autoplay = true, speed = 1, scrub = false } = {}) => { const { useState, useEffect, useRef } = React; const SCENES = [ { id: 0, label: 'Tuesday 09:14 — initial draft', part: 'MNT-0042-bracket · rev 3', cost: 26.10, lead: '12–17', delta: null, flags: 4, alert: null, caption: 'baseline. four open flags.', }, { id: 1, label: 'Tuesday 09:22 — wall thinned to 2.4mm', part: 'MNT-0042-bracket · rev 3 · edit', cost: 23.10, lead: '12–17', delta: -3.00, flags: 5, alert: { title: 'wall under 3mm', body: 'Aluminum 6061. Mesa Fab will not run that.', cite: 'rule dfm-al-001 · same as MNT-0042 rev 3', }, caption: 'cheaper on paper. shop will reject it.', }, { id: 2, label: 'Tuesday 09:24 — wall set to 3.2mm', part: 'MNT-0042-bracket · rev 4', cost: 24.80, lead: '9–14', delta: -1.30, flags: 2, alert: null, caption: 'true from drawing to delivery.', }, ]; const [i, setI] = useState(0); const [paused, setPaused] = useState(false); const trackRef = useRef(null); // Auto-cycle (only when not in scrub mode) useEffect(() => { if (scrub || paused || !autoplay) return; const base = i === 1 ? 4200 : 3400; const t = setTimeout(() => setI((n) => (n + 1) % SCENES.length), base / Math.max(0.3, speed)); return () => clearTimeout(t); }, [i, paused, autoplay, speed, scrub]); // Scrub mode: track parent .pin-track scroll progress and map to scene index useEffect(() => { if (!scrub) return; const track = trackRef.current && trackRef.current.closest('.pin-track'); if (!track) return; let raf = null; const tick = () => { const vh = window.innerHeight || 800; const r = track.getBoundingClientRect(); const total = Math.max(1, r.height - vh); const scrolled = Math.max(0, Math.min(total, -r.top)); const p = scrolled / total; // 0..1 across the track // Distribute across scenes: first 25% = scene 0, mid 50% = scene 1, last 25% = scene 2. // Scene 1 (the alert moment) gets the most dwell time. let idx; if (p < 0.22) idx = 0; else if (p < 0.78) idx = 1; else idx = 2; setI(idx); track.style.setProperty('--scrub', p.toFixed(4)); raf = null; }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(tick); }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); tick(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, [scrub]); const s = SCENES[i]; return (

03 · what it looks like

Eight seconds. Same desk. Same file.

{scrub ? 'Scroll through one Tuesday morning. The engineer thins a wall to save cost, Plumb names the rule, the precedent fix, and the named human who would have caught it.' : 'Watch one Tuesday morning. The engineer thins a wall to save cost, Plumb names the rule, the precedent fix, and the named human who would have caught it.'}

setPaused((p) => !p)} role={scrub ? undefined : 'button'} aria-label={scrub ? undefined : (paused ? 'Resume demo' : 'Pause demo')} > {/* Window chrome */}

{s.part}

0 ? 'on' : ''}`} /> {s.flags} flag{s.flags === 1 ? '' : 's'}

{/* CAD panel + Cost panel */}

{/* Drafting corners */} {s.label} doc 001 · sheet 1 of 1 Aluminum 6061 · CNC 3-axis · Mesa Fab plumb · 2026

{/* Bracket sketch */} {/* Caption strip */}

{s.caption}

{/* Cost panel — right rail */}

cost · live Mesa Fab · qty 500

$ {s.cost.toFixed(2)} / unit

{s.delta !== null ? ( {s.delta < 0 ? '−' : '+'}${Math.abs(s.delta).toFixed(2)} since rev 3 ) : ( baseline )}

lead time {s.lead} days

flags 2 ? 'r' : ''}`}>{s.flags} open

{/* Alert card */}

{s.alert && ( <>

flag high confidence

{s.alert.title}

{s.alert.body}

{s.alert.cite}

)}

{paused ? 'paused · click to resume' : `updated ${(i+1) * 8}s ago`}

{/* Scene progress */}

{SCENES.map((sc, idx) => ( ))}

); }; window.PlumbLiveDemo = PlumbLiveDemo;