feat(config): add show_animations option to disable canvas animations

Canvas weather animations can render light-colored elements (white
clouds, sun rays) over white card text, making it unreadable. Add a
show_animations config flag (default: true) that completely disables
the canvas when set to false — no DOM node is created, the RAF loop
never starts, and the animation manager is destroyed on live config
change. Also surfaces the toggle in the visual card editor and adds
translations for all 9 supported locales.

Author: r35krag0th

dynamic-weather-card.js

@@ -91,6 +91,21 @@ export class AnimatedWeatherCard extends LitElement {
 
   updated(changedProperties: Map<string, unknown>): void {
     super.updated(changedProperties);
+
+    if (changedProperties.has('config')) {
+      const prev = changedProperties.get('config') as WeatherCardConfigInternal | undefined;
+      const wasAnimating = prev ? prev.showAnimations !== false : true;
+      const isAnimating = this.config.showAnimations !== false;
+      if (wasAnimating && !isAnimating) {
+        this.animationManager.destroy();
+      } else if (!wasAnimating && isAnimating) {
+        this.updateComplete.then(() => {
+          const container = this.shadowRoot?.querySelector('.canvas-container');
+          if (container) this.animationManager.setup(container);
+        });
+      }
+    }
+
     if (changedProperties.has('hass') || changedProperties.has('config')) {
       const entity = this.config.entity;
       const showDaily = this.config.showDailyForecast ?? false;
@@ -177,6 +192,7 @@ export class AnimatedWeatherCard extends LitElement {
       overlayOpacity: config.overlay_opacity !== undefined ? config.overlay_opacity : DEFAULT_CONFIG.overlayOpacity,
       language: config.language || DEFAULT_CONFIG.language,
       windSpeedUnit: config.wind_speed_unit || DEFAULT_CONFIG.windSpeedUnit,
+      showAnimations: config.show_animations !== false,
       sunriseEntity: config.sunrise_entity || null,
       sunsetEntity: config.sunset_entity || null,
       templowAttribute: config.templow_attribute || null,
@@ -259,7 +275,7 @@ export class AnimatedWeatherCard extends LitElement {
         @pointercancel=${(e: PointerEvent) => this.actionHandler.handlePointerUp(e)}
       >
         <div class="${cardClasses}" style="min-height: ${minHeight}; ${bgStyle}; ${overlayStyle} cursor: pointer;">
-          <div class="canvas-container"></div>
+          ${this.config.showAnimations !== false ? html`<div class="canvas-container"></div>` : ''}
           <div class="content">
             ${this.config.name && this.config.name.trim() !== '' ? html`
               <div class="header">

src/components/card.ts

@@ -32,6 +32,7 @@ export class DynamicWeatherCardEditor extends LitElement {
       show_daily_forecast: DEFAULT_CONFIG.showDailyForecast,
       daily_forecast_days: DEFAULT_CONFIG.dailyForecastDays,
       show_sunrise_sunset: DEFAULT_CONFIG.showSunriseSunset,
+      show_animations: DEFAULT_CONFIG.showAnimations,
       show_clock: DEFAULT_CONFIG.showClock,
       clock_position: DEFAULT_CONFIG.clockPosition,
       clock_format: DEFAULT_CONFIG.clockFormat,
@@ -96,6 +97,7 @@ export class DynamicWeatherCardEditor extends LitElement {
           }
         }
       },
+      { name: 'show_animations', selector: { boolean: {} } },
       { name: 'overlay_opacity', selector: { number: { min: 0, max: 1, step: 0.05, mode: 'box' } } },
       {
         name: 'language',

src/components/editor.ts

@@ -41,5 +41,6 @@ export const DEFAULT_CONFIG: Required<Omit<WeatherCardConfig, 'entity' | 'type'>
   overlayOpacity: 0.1,
   language: 'auto',
   height: null,
-  windSpeedUnit: 'ms'
+  windSpeedUnit: 'ms',
+  showAnimations: true
 };

src/constants.ts

@@ -71,7 +71,8 @@ const translation: Translation = {
     'language_hu': 'Ungarisch',
     'wind_speed_unit': 'Einheit der Windgeschwindigkeit',
     'wind_speed_unit_ms': 'm/s',
-    'wind_speed_unit_kmh': 'km/h'
+    'wind_speed_unit_kmh': 'km/h',
+    'show_animations': 'Animationen anzeigen'
   },
   'demo': {
     'pageTitle': 'Dynamische Wetterkarte',

src/internationalization/locales/de/translation.ts

@@ -71,7 +71,8 @@ const translation: Translation = {
     'language_hu': 'Hungarian',
     'wind_speed_unit': 'Wind Speed Unit',
     'wind_speed_unit_ms': 'm/s',
-    'wind_speed_unit_kmh': 'km/h'
+    'wind_speed_unit_kmh': 'km/h',
+    'show_animations': 'Show Animations'
   },
   'demo': {
     'pageTitle': 'Dynamic Weather Card',

src/internationalization/locales/en/translation.ts

@@ -71,7 +71,8 @@ const translation: Translation = {
     'language_hu': 'Húngaro',
     'wind_speed_unit': 'Unidad de velocidad del viento',
     'wind_speed_unit_ms': 'm/s',
-    'wind_speed_unit_kmh': 'km/h'
+    'wind_speed_unit_kmh': 'km/h',
+    'show_animations': 'Mostrar animaciones'
   },
   'demo': {
     'pageTitle': 'Tarjeta Meteorológica Dinámica',

src/internationalization/locales/es/translation.ts

@@ -71,7 +71,8 @@ const translation: Translation = {
     'language_hu': 'Hongrois',
     'wind_speed_unit': 'Unité de vitesse du vent',
     'wind_speed_unit_ms': 'm/s',
-    'wind_speed_unit_kmh': 'km/h'
+    'wind_speed_unit_kmh': 'km/h',
+    'show_animations': 'Afficher les animations'
   },
   'demo': {
     'pageTitle': 'Carte Météo Dynamique',

src/internationalization/locales/fr/translation.ts

@@ -71,7 +71,8 @@ const translation: Translation = {
     'language_sk': 'Szlovák',
     'wind_speed_unit': 'Szélsebesség egység',
     'wind_speed_unit_ms': 'm/s',
-    'wind_speed_unit_kmh': 'km/h'
+    'wind_speed_unit_kmh': 'km/h',
+    'show_animations': 'Animációk megjelenítése'
   },
   'demo': {
     'pageTitle': 'Dynamic Weather Card',

src/internationalization/locales/hu/translation.ts

@@ -71,7 +71,8 @@ const translation: Translation = {
     'language_hu': 'Ungherese',
     'wind_speed_unit': 'Unità velocità del vento',
     'wind_speed_unit_ms': 'm/s',
-    'wind_speed_unit_kmh': 'km/h'
+    'wind_speed_unit_kmh': 'km/h',
+    'show_animations': 'Mostra animazioni'
   },
   'demo': {
     'pageTitle': 'Dynamic Weather Card',