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;