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
This commit is contained in:
2026-06-26 22:09:22 +02:00
co-authored by Claude Sonnet 4.6
parent 083bc97651
commit 47bbc53d3c
3 changed files with 32 additions and 2 deletions
+4 -2
View File
@@ -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) -->
<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 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"/>