Aurora Glass: dashboard animata per Home Assistant

In uno screenshot statico lo sfondo appare uniforme: dal vivo si muove di continuo, lentissimo e ipnotico — l'animazione è spiegata al punto 1.

1. Da dove nasce l'idea

Due progetti open source della comunità Home Assistant coprono la quasi totalità delle animazioni "belle" che si vedono in giro: card-mod, che permette di iniettare CSS (incluse le animazioni @keyframes) dentro qualsiasi card esistente, e Bubble Card, una collezione di card con pop-up e pulsanti animati pronti all'uso. Aurora Glass studia il tipo di movimento che questi progetti rendono possibile e lo ricostruisce da zero con palette, nomi di entità e struttura propri: nessuna riga di codice copiata, solo la stessa idea di fondo.

2. Copia il tema e i sensori

Scarica il pacchetto in alto ed estrai lo zip. Con l'add-on File editor (si installa da Impostazioni → Componenti aggiuntivi → Negozio componenti aggiuntivi se non lo hai già), copia:

1. Il file themes/aurora_glass.yaml nella cartella config/themes/ di Home Assistant.
2. Il file packages/tablet_dashboard.yaml nella cartella config/packages/ (crea la cartella se non esiste).

Verifica che in configuration.yaml siano presenti queste due righe (aggiungile se mancano):

frontend:
  themes: !include_dir_merge_named themes
homeassistant:
  packages: !include_dir_named packages

3. Ricarica i temi

Non serve riavviare tutto Home Assistant: apri la pagina Strumenti, scheda YAML, scorri fino a "Ricaricamento della configurazione YAML" e clicca la voce "Temi". È il passaggio che quasi tutti dimenticano — senza questo, il tema resta invisibile anche se il file è corretto.

4. Crea la vista Aurora Glass

Apri la dashboard dove vuoi aggiungere il progetto, premi la matita in alto a destra (Modifica dashboard), poi il + accanto alle schede. Nel dialogo "Configurazione della vista" scegli disposizione "Sezioni (predefinito)", dai un titolo (es. "Aurora Glass") e imposta il tema su Aurora Glass. Salva, poi riapri la stessa vista in modifica, premi i tre puntini ⋮ e scegli "Modifica in YAML": qui incolli il contenuto di dashboards/tablet_dashboard.yaml dallo zip.

Il cuore dell'effetto è questo blocco, che trasforma una card invisibile in uno sfondo animato a tutto schermo:

- type: markdown
  content: " "
  card_mod:
    style: |
      ha-card {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: var(--aurora-bg);
        overflow: hidden;
        pointer-events: none;
      }
      ha-card::before, ha-card::after {
        content: "";
        position: absolute;
        width: 60vw; height: 60vw;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.5;
        mix-blend-mode: screen;
      }
      ha-card::before {
        top: -15%; left: -10%;
        background: radial-gradient(circle, var(--aurora-accent-a) 0%, transparent 70%);
        animation: aurora-drift-a 26s ease-in-out infinite alternate;
      }
      ha-card::after {
        bottom: -18%; right: -12%;
        background: radial-gradient(circle, var(--aurora-accent-b) 0%, transparent 70%);
        animation: aurora-drift-b 32s ease-in-out infinite alternate;
      }
      @keyframes aurora-drift-a {
        0%   { transform: translate(0,0) scale(1); }
        50%  { transform: translate(6%, 8%) scale(1.12); }
        100% { transform: translate(-5%, 3%) scale(0.95); }
      }
      @keyframes aurora-drift-b {
        0%   { transform: translate(0,0) scale(1); }
        50%  { transform: translate(-7%, -5%) scale(1.15); }
        100% { transform: translate(4%, -8%) scale(0.94); }
      }

Due cerchi enormi e sfocati, uno per angolo, che si spostano lentissimamente (26s e 32s per ciclo — durate diverse così non si muovono mai in sincronia). Il file dello zip ha già questo blocco duplicato in ogni vista, perché Home Assistant smonta le viste quando cambi scheda.

5. Aloni che pulsano solo quando serve

La seconda tecnica fa dipendere un'animazione da uno stato reale, templando lo stile con Jinja — la stessa sintassi già usata nei sensori di Home Assistant. Sulla tile dell'allarme:

card_mod:
  style: |
    ha-card {
      {% if is_state('alarm_control_panel.SOSTITUISCI_allarme', 'triggered') %}
      animation: aurora-alarm-pulse 1.1s ease-in-out infinite;
      {% endif %}
    }
    @keyframes aurora-alarm-pulse {
      0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aurora-danger) 55%, transparent); }
      50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--aurora-danger) 0%, transparent); }
    }

Finché l'allarme non scatta, il blocco Jinja produce una stringa vuota e la card resta ferma: nessuna automazione, nessun JavaScript, solo CSS più il motore di template che Home Assistant usa già ovunque. Lo stesso schema, con soglia diversa, gestisce nel pacchetto anche l'alone sulla tile della lavatrice mentre è in funzione.

6. Sostituisci le tue entità

Ogni riga con SOSTITUISCI nel file incollato è un segnaposto da cambiare con un entity_id reale.

1. Dalla lista entità: vai in Impostazioni → Dispositivi e servizi → Entità, cerca l'entità che ti interessa (es. digita "cucina") e copia il valore dalla colonna "ID Entità".
2. Con un template (più veloce se hai tante entità): vai in Strumenti → Modello e incolla, cambiando light con il dominio che ti serve:

{% for s in states.light %}{{ s.entity_id }} | {{ s.name }} | {{ s.state }}
{% endfor %}

Nel riquadro "Risultato" ottieni l'elenco completo con nome ed entity_id, pronto da copiare. Una riga come light.SOSTITUISCI_luce_soggiorno diventa, con la tua entità reale, light.luce_salotto_dimmer: cambi solo il valore di entity: (e volendo name:, che è solo l'etichetta a schermo).

7. Aggiungi altri dispositivi

Gli esempi del pacchetto coprono luci, movimento e allarme perché sono i più comuni, ma qualsiasi entità che si accende, spegne o regola entra allo stesso modo. Duplica una tile, cambia dominio ed entità:

- type: tile
  entity: climate.SOSTITUISCI_termostato

- type: tile
  entity: cover.SOSTITUISCI_tapparella
  features:
    - type: cover-open-close

- type: tile
  entity: switch.SOSTITUISCI_presa

- type: tile
  entity: vacuum.SOSTITUISCI_robot

8. Personalizza colori e velocità

9. Verifica

Salva la vista e controlla questi tre segnali prima di considerare l'installazione riuscita:

Risoluzione dei problemi

• Nessuna animazione → verifica che card-mod sia installato da HACS: senza, i blocchi card_mod vengono ignorati silenziosamente.
• Tema invisibile dopo il salvataggio → hai ricaricato i Temi dalla pagina Strumenti → YAML? È un passaggio separato dal salvataggio del file.
• L'alone non parte mai → controlla che l'entity_id nel template Jinja sia quello vero e che il valore di states(...) corrisponda esattamente al testo nell'if (case-sensitive).