/* Hero full-width slider — analog tuning slider only (no headline). Ported from web/app/components/HeroHeadline.tsx — drag, click-to- jump, keyboard, haptic guide-crossings, intro nudge — all retained. Hooks aliased so they don't collide with pages.jsx / hero-v2.jsx. */ const { useState: useStateHS, useEffect: useEffectHS, useRef: useRefHS, useCallback: useCallbackHS, } = React; const HS_HANDLE_W = 76; const HS_HANDLE_H = 52; const HS_GUIDES = [ { pos: 0.25, kind: "side" }, { pos: 0.5, kind: "center" }, { pos: 0.75, kind: "side" }, ]; const HS_DEMO_PEAK = 0.02; function HeroSlider() { const [value, setValue] = useStateHS(0); const [dragging, setDragging] = useStateHS(false); const [hasInteracted, setHasInteracted] = useStateHS(false); const tunerRef = useRefHS(null); const lastValueRef = useRefHS(0); const gripOffsetRef = useRefHS(0); const userInteractedRef = useRefHS(false); const markInteracted = useCallbackHS(() => { userInteractedRef.current = true; setHasInteracted(true); }, []); /* Expose the slider progress (0-100) as a CSS custom property on so the "obvious" letters can colour themselves. Gate it on hasInteracted so the silent demo nudge doesn't tint letters. */ useEffectHS(() => { const pct = hasInteracted ? value * 100 : 0; document.documentElement.style.setProperty("--slider-pct", String(pct)); }, [value, hasInteracted]); const haptic = useCallbackHS((ms) => { if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") { try { navigator.vibrate(ms); } catch (e) {} } }, []); const commitValue = useCallbackHS((next) => { const prev = lastValueRef.current; for (const g of HS_GUIDES) { const crossed = (prev < g.pos && next >= g.pos) || (prev > g.pos && next <= g.pos); if (crossed) haptic(g.kind === "center" ? 14 : 8); } lastValueRef.current = next; setValue(next); }, [haptic]); const updateFromClientX = useCallbackHS((clientX) => { const el = tunerRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const v = Math.max( 0, Math.min(1, (clientX - rect.left - gripOffsetRef.current) / rect.width) ); commitValue(v); }, [commitValue]); useEffectHS(() => { if (!dragging) return; const onMove = (e) => updateFromClientX(e.clientX); const stop = () => setDragging(false); window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", stop); window.addEventListener("pointercancel", stop); window.addEventListener("blur", stop); return () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", stop); window.removeEventListener("pointercancel", stop); window.removeEventListener("blur", stop); }; }, [dragging, updateFromClientX]); const handlePointerDown = (e) => { e.preventDefault(); markInteracted(); gripOffsetRef.current = 0; setDragging(true); updateFromClientX(e.clientX); }; const handleHandlePointerDown = (e) => { e.preventDefault(); e.stopPropagation(); markInteracted(); const el = tunerRef.current; if (el) { const rect = el.getBoundingClientRect(); const handleCenterPx = lastValueRef.current * rect.width; gripOffsetRef.current = e.clientX - rect.left - handleCenterPx; } setDragging(true); }; const handleKeyDown = (e) => { if (e.key === "ArrowLeft") { e.preventDefault(); markInteracted(); commitValue(Math.max(0, lastValueRef.current - 0.04)); } else if (e.key === "ArrowRight") { e.preventDefault(); markInteracted(); commitValue(Math.min(1, lastValueRef.current + 0.04)); } else if (e.key === "Home") { e.preventDefault(); markInteracted(); commitValue(0); } else if (e.key === "End") { e.preventDefault(); markInteracted(); commitValue(1); } }; /* Demo nudge: bumps the handle right ~5% and back every 3s until the user interacts. setValue (not commitValue) keeps haptics silent and lastValueRef untouched. */ useEffectHS(() => { let backTimer = null; const playNudge = () => { if (userInteractedRef.current) return; setValue(HS_DEMO_PEAK); backTimer = setTimeout(() => { if (!userInteractedRef.current) setValue(0); }, 800); }; const firstTimer = setTimeout(playNudge, 900); const intervalId = setInterval(() => { if (userInteractedRef.current) { clearInterval(intervalId); return; } playNudge(); }, 3000); return () => { clearTimeout(firstTimer); if (backTimer) clearTimeout(backTimer); clearInterval(intervalId); }; }, []); const fillStyle = { width: `${value * 100}%`, background: "var(--accent)" }; return (

{HS_GUIDES.map((g, i) => ( ))}

{/* Light keycap */} {/* Dark keycap */}

); } Object.assign(window, { HeroSlider });