{inputs.map((label) => ( {label} ))}

// ORCHESTRATOR

// {PLAN_POOL[0]}

Reusable plans, ready to run.

); } function HeroOrchestratorView() { // Detect phone-sized viewports so we can ship a different // composition on mobile (vertical stack, no animation). const [isMobile, setIsMobile] = React.useState(() => { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false; return window.matchMedia("(max-width: 640px)").matches; }); React.useEffect(() => { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return; const mq = window.matchMedia("(max-width: 640px)"); const onChange = (e) => setIsMobile(e.matches); if (mq.addEventListener) mq.addEventListener("change", onChange); else mq.addListener(onChange); return () => { if (mq.removeEventListener) mq.removeEventListener("change", onChange); else mq.removeListener(onChange); }; }, []); // Seed three plans already on the belt so the picture isn't empty // on first paint. `init: true` skips the pop-in animation for these. const [plans, setPlans] = React.useState(() => [ { uid: "init-0", label: PLAN_POOL[2], slot: 0, init: true }, { uid: "init-1", label: PLAN_POOL[1], slot: 1, init: true }, { uid: "init-2", label: PLAN_POOL[0], slot: 2, init: true }, ]); const [phase, setPhase] = React.useState("idle"); const [activeInputs, setActiveInputs] = React.useState([]); // batchKey changes once per cycle so particle s remount // and replay their CSS offset-distance animation from 0%. const [batchKey, setBatchKey] = React.useState(0); // 0 → 1 progress of the right-slide animation. Eased outside this // state — it's the eased value used directly for interpolation. const [slideProgress, setSlideProgress] = React.useState(1); React.useEffect(() => { let cancelled = false; let timer; let raf; let counter = PLAN_POOL.length / 2 | 0; // start a few in const step = () => { if (cancelled) return; // PHASE 1 · mixing — three input flow lines pulse and particles // travel from each chosen input into the hub. setBatchKey((k) => k + 1); setPhase("mixing"); const batch = []; for (let i = 0; i < INGREDIENTS_PER_BATCH; i++) { batch.push(HOV_INPUTS[(counter * INGREDIENTS_PER_BATCH + i) % HOV_INPUTS.length].id); } setActiveInputs(batch); timer = setTimeout(() => { if (cancelled) return; // PHASE 2 · working — hub pulses harder. setPhase("working"); timer = setTimeout(() => { if (cancelled) return; // PHASE 3a · slide — each plan smoothly glides one slot to // the right via RAF-driven interpolation. // Plans that move off-belt are KEPT during // the slide so they animate offscreen, // then removed after the animation ends. setPlans((prev) => prev.map((p) => ({ ...p, slidingFromSlot: p.slot, slot: p.slot + 1, })) ); setSlideProgress(0); const slideStart = performance.now(); const animateSlide = (now) => { if (cancelled) return; const t = Math.min(1, (now - slideStart) / SLIDE_DUR); // ease-out cubic const eased = 1 - Math.pow(1 - t, 3); setSlideProgress(eased); if (t < 1) { raf = requestAnimationFrame(animateSlide); } else { // Clean up: drop off-belt plans, clear slidingFromSlot. setPlans((prev) => prev .filter((p) => p.slot < MAX_SLOTS) .map((p) => ({ ...p, slidingFromSlot: undefined })) ); } }; raf = requestAnimationFrame(animateSlide); timer = setTimeout(() => { if (cancelled) return; // PHASE 3b · pop — new plan enters slot 0; an output // particle travels hub → slot 0 in sync. setPhase("popping"); const newLabel = PLAN_POOL[counter % PLAN_POOL.length]; const newUid = "p-" + counter; counter++; setPlans((prev) => [ { uid: newUid, label: newLabel, slot: 0, init: false }, ...prev, ]); // PHASE 4 · settle, then loop. timer = setTimeout(() => { if (cancelled) return; setPhase("idle"); setActiveInputs([]); timer = setTimeout(step, 1200); }, 800); }, 720); }, 900); }, 1100); }; // start after a short delay so the seeded plans render first timer = setTimeout(step, 900); return () => { cancelled = true; clearTimeout(timer); if (raf) cancelAnimationFrame(raf); }; }, []); // Mobile fallback — hero illustration is hidden entirely on phones. // Returns null so even if the CSS is stale, nothing renders. if (isMobile) return null; return (

); } window.HeroOrchestratorView = HeroOrchestratorView;