// Hero Workflow Tape — plays one real KMO workflow row by row, ends in a // concrete outcome, then cross-fades to the next. Three workflows total. // Hero-safe per spec v2: no ERP / accounting / banking endpoints. // // Motion budget: // beat tween 180ms, stagger 700ms, outcome appears 400ms after last beat, // 1s hold, 240ms cross-fade. ~6s/cycle, 3 cycles = ~18s loop. // // prefers-reduced-motion: render workflow #1 in its end-state, no rotation. const HeroWorkflowPanel = ({ lang }) => { const workflows = (window.HERO_WORKFLOWS && window.HERO_WORKFLOWS[lang]) || []; const reduced = React.useRef( typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches ); const [wfIdx, setWfIdx] = React.useState(0); const [beatIdx, setBeatIdx] = React.useState(reduced.current ? 5 : 0); const [showOutcome, setShowOutcome] = React.useState(reduced.current); const [fading, setFading] = React.useState(false); const [paused, setPaused] = React.useState(false); const inViewRef = React.useRef(true); const wrapRef = React.useRef(null); // Pause when out of viewport React.useEffect(() => { if (!wrapRef.current) return; const io = new IntersectionObserver( ([entry]) => { inViewRef.current = entry.isIntersecting; }, { threshold: 0.2 } ); io.observe(wrapRef.current); return () => io.disconnect(); }, []); // Sequencer React.useEffect(() => { if (reduced.current) return; if (paused) return; const wf = workflows[wfIdx]; if (!wf) return; const timers = []; // Reset setBeatIdx(0); setShowOutcome(false); setFading(false); // Beats const BEAT_STEP = 700; for (let i = 1; i <= wf.beats.length; i++) { timers.push(setTimeout(() => { if (inViewRef.current) setBeatIdx(i); }, i * BEAT_STEP)); } // Outcome strap const outcomeAt = wf.beats.length * BEAT_STEP + 400; timers.push(setTimeout(() => { if (inViewRef.current) setShowOutcome(true); }, outcomeAt)); // Hold + fade out const fadeAt = outcomeAt + 1400; timers.push(setTimeout(() => { if (inViewRef.current) setFading(true); }, fadeAt)); // Advance timers.push(setTimeout(() => { if (inViewRef.current) { setWfIdx((i) => (i + 1) % workflows.length); } else { // when offscreen, skip to next on resume } }, fadeAt + 240)); return () => timers.forEach(clearTimeout); }, [wfIdx, paused, workflows.length]); if (workflows.length === 0) return null; const wf = workflows[wfIdx]; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)} tabIndex={0} aria-label={ lang === 'nl' ? `Voorbeeld werkstroom: ${wf.pillTitle} in ${wf.outcome.after}.` : `Example workflow: ${wf.pillTitle} in ${wf.outcome.after}.` } style={{ position: 'relative', width: '100%', maxWidth: 560, background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 0, overflow: 'hidden', opacity: fading ? 0 : 1, transition: 'opacity 240ms var(--ease)', outline: 'none', fontFamily: 'var(--font-sans)', }} > {/* Header bar */}
LIVE {wf.pillTitle}
{wf.audience}
{/* Beats */}
    {wf.beats.map((b, i) => { const visible = i < beatIdx; return (
  1. {b.time} {b.label} {b.meta}
    2. ); })}
{/* Outcome strap */}
{wf.outcome.before} \u2192 {wf.outcome.after}
{wf.outcome.counterPrefix}{' '} {wf.outcome.counterValue}
{/* Stack footer */}
{wf.stack}
{/* Workflow indicator dots */}
{/* Bottom-right dot indicator */}
{workflows.map((_, i) => ( ))}
); }; window.HeroWorkflowPanel = HeroWorkflowPanel; // Keep old name available so app.jsx doesn't break if it still references it window.HeroMotion = HeroWorkflowPanel; // ============================================================= // HeroFlowBackdrop — ambient streamers behind the hero only. // No labels, no nodes. Honours prefers-reduced-motion. // ============================================================= const HeroFlowBackdrop = () => { const reduced = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const [tick, setTick] = React.useState(0); React.useEffect(() => { if (reduced) return; let raf; const start = performance.now(); const loop = (t) => { setTick((t - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [reduced]); const streamers = [ { x1: -50, y1: 90, c1x: 320, c1y: 70, c2x: 680, c2y: 220, x2: 1050, y2: 200, off: 0.0 }, { x1: -50, y1: 230, c1x: 260, c1y: 210, c2x: 760, c2y: 340, x2: 1050, y2: 310, off: 0.25 }, { x1: -50, y1: 390, c1x: 300, c1y: 380, c2x: 700, c2y: 470, x2: 1050, y2: 450, off: 0.50 }, { x1: -50, y1: 560, c1x: 250, c1y: 600, c2x: 760, c2y: 510, x2: 1050, y2: 600, off: 0.75 }, ]; const bz = (t, p0, p1, p2, p3) => { const u = 1 - t; return u*u*u*p0 + 3*u*u*t*p1 + 3*u*t*t*p2 + t*t*t*p3; }; return ( ); }; window.HeroFlowBackdrop = HeroFlowBackdrop;