Animate stirrer blades proportional to speed

CSS rotation animation on #stirrer-blades group, speed mapped via
--stir-duration custom property (speed=100 → 0.5s, speed=50 → 1s).
Driven by stirrerSpeedIst on each Speed message.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DGKe8JzTM2Gr1fdx9wYXTi

web/app.js

@@ -273,6 +273,20 @@ function updateStepPlates() {
 	});
 }
 
+// --- Stirrer visualization ---
+
+function updateStirrerVisualization() {
+	const g = document.getElementById('stirrer-blades');
+	if (!g) return;
+	if (stirrerSpeedIst > 0) {
+		const duration = Math.min(10, 50 / stirrerSpeedIst).toFixed(2);
+		g.style.setProperty('--stir-duration', duration + 's');
+		g.classList.add('spinning');
+	} else {
+		g.classList.remove('spinning');
+	}
+}
+
 // --- Fire visualization ---
 
 function updateFireVisualization() {
@@ -487,6 +501,7 @@ function onStirrerChanged(msg) {
 				document.getElementById('stirrer-speed-readout').textContent = msg.Speed;
 				initialSpeedSync = false;
 			}
+			updateStirrerVisualization();
 			updateStepPlates();
 		} else if (key === 'Capabilities') {
 			const power = msg.Capabilities.Power;

web/index.html

@@ -100,8 +100,10 @@
     <line x1="60"  y1="28"  x2="180" y2="28"  stroke="#bbb" stroke-width="4" stroke-linecap="round"/>
 
     <!-- Stirrer blades (inside pot) -->
+    <g id="stirrer-blades">
       <rect x="87"  y="157" width="31" height="5" fill="#666" rx="1"/>
       <rect x="122" y="157" width="31" height="5" fill="#666" rx="1"/>
+    </g>
 
     <!-- Lid -->
     <rect x="56" y="20" width="128" height="10" fill="#444" rx="2"/>

web/style.css

@@ -152,6 +152,19 @@ header#connection-bar {
     display: block;
 }
 
+/* Stirrer animation */
+@keyframes stir-rotate {
+    to { transform: rotate(360deg); }
+}
+#stirrer-blades {
+    transform-box: fill-box;
+    transform-origin: 50% 50%;
+    animation: stir-rotate var(--stir-duration, 1s) linear infinite paused;
+}
+#stirrer-blades.spinning {
+    animation-play-state: running;
+}
+
 /* Fire animations */
 @keyframes flicker-1 {
   0%, 100% { transform: scaleY(1.00) scaleX(1.00); }