Animated cards: render guard to stop CSS animations restarting — v0.16.3

[ryanbuiltthat]

Bug

The wind card's animation showed "a bouncing line right in the wind rose" — the streak line kept snapping back to its start instead of sweeping smoothly across.

Cause

Home Assistant pushes hass to every card on every state change (often several times a second). The wind, rain, and lux cards rebuild their entire shadow-root innerHTML inside set hass → _render(). Recreating the DOM restarts every CSS animation from frame 0 — so the wind streak's multi-second sweep never got to finish; it jumped back to the start on each unrelated tick, reading as a bouncing line. Rain (falling drops / wave) and lux (26s ray-spin / disc-pulse) had the same latent problem.

Fix

A render guard: each card computes a signature of its displayed values and returns early from _render when nothing visible changed, so the DOM — and its running animations — persist across unrelated ticks. setConfig resets the signature so config edits still force a rebuild.

• wind: speed / bearing / gust / unit / name
• rain: frac / event / intensity / periodChips / intLine / name
• lux: value / night / band / name / unit

Testing

• bash build.sh + node test/smoke.js green.
• A Node harness test confirmed an identical hass push skips the rebuild while a changed wind value still re-renders.
• In-browser visual confirmation isn't available in this sandbox (no outbound network for the headless Chromium), but the mechanism — DOM recreation resetting CSS animations — is well understood and directly addressed.

VERSION 0.16.2 → 0.16.3.

🤖 Generated with Claude Code

---

Generated by Claude Code