{p.img && ( {p.name}

)}

{!p.img && (

)}

); } function HeroTurntable() { // Only two pieces of React state: drag cursor + label display (~10fps) const [dragging, setDragging] = uSh3(false); const [frontIdx, setFrontIdx] = uSh3(0); // All animation state in refs — zero React re-renders from the RAF loop const containerRef = uRh3(null); // CSS variable injection point const angleRef = uRh3(0); // current rotation angle const draggingRef = uRh3(false); // mirror of dragging state for RAF closure const startRef = uRh3({ x: 0, a: 0 }); const velRef = uRh3(0); const lastRef = uRh3({ t: 0, x: 0 }); const autoplay = uRh3(true); const frameRef = uRh3(0); const count = PASTRIES.length; const radius = 260; // Write angle to CSS variable — no React involved function applyAngle(a) { angleRef.current = a; if (containerRef.current) { containerRef.current.style.setProperty("--rot-y", a + "deg"); } } // RAF loop: runs once on mount, never re-runs (empty deps) uEh3(() => { let raf; const tick = () => { if (!draggingRef.current) { if (autoplay.current && Math.abs(velRef.current) < 0.02) { applyAngle(angleRef.current + 0.12); } else { applyAngle(angleRef.current + velRef.current); velRef.current *= 0.95; if (Math.abs(velRef.current) < 0.005) velRef.current = 0; } } // Label update throttled to ~10fps frameRef.current++; if (frameRef.current % 6 === 0) { const norm = ((angleRef.current % 360) + 360) % 360; const slot = 360 / count; const idx = Math.round(norm / slot) % count; setFrontIdx(idx); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); function onDown(e) { setDragging(true); draggingRef.current = true; autoplay.current = false; const x = e.touches ? e.touches[0].clientX : e.clientX; startRef.current = { x, a: angleRef.current }; lastRef.current = { t: performance.now(), x }; velRef.current = 0; } function onMove(e) { if (!draggingRef.current) return; const x = e.touches ? e.touches[0].clientX : e.clientX; applyAngle(startRef.current.a + (x - startRef.current.x) * 0.5); const now = performance.now(); const dt = now - lastRef.current.t || 16; velRef.current = ((x - lastRef.current.x) * 0.5) / (dt / 16); lastRef.current = { t: now, x }; } function onUp() { setDragging(false); draggingRef.current = false; setTimeout(() => { autoplay.current = true; }, 4000); } uEh3(() => { if (!dragging) return; const move = (e) => onMove(e); const up = () => onUp(); window.addEventListener("mousemove", move); window.addEventListener("mouseup", up); window.addEventListener("touchmove", move, { passive: true }); window.addEventListener("touchend", up); return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); window.removeEventListener("touchmove", move); window.removeEventListener("touchend", up); }; }, [dragging]); const front = PASTRIES[(count - frontIdx) % count]; return (

{/* turntable base */}

{/* 3D ring — transform driven by CSS var(--rot-y), bypasses React entirely */}

{PASTRIES.map((p, i) => { const a = (i / count) * 360; return (

); })}

{/* Hint */}

Drag to spin

{/* Label — React state, throttled to ~10fps */}

{front.name} {front.price}

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