HA-Animated-cards é uma coleção de cartões prontos para uso (67 modelos no momento em que estas linhas são escritas) para “animar” um painel do Home Assistant, especialmente se você já está usando Mushroom. A ideia não é colocar brilhos em tudo: as animações são mais discretas, limpas, e se ativam quando faz sentido. Uma máquina de lavar “gira” quando está consumindo, um ventilador começa a girar quando realmente está ligado, uma tomada “brilha” apenas se está consumindo energia, etc.
O ponto positivo: não é um “enorme” cartão customizado que adiciona uma tonelada de JavaScript. O projeto é principalmente baseado no Mushroom, e usa o card-mod para injetar o estilo (CSS) e as animações. Resultado: é leve e se integra muito bem em um painel já existente.
Por que é interessante no Home Assistant
Um painel é algo que consultamos rapidamente, várias vezes ao dia. E na vida real, “ver” o estado em uma fração de segundo às vezes é melhor do que “ler” um valor. HA-Animated-cards traz exatamente essa leitura instantânea.
Vamos considerar três situações muito concretas.
A máquina de lavar está “Ligada”, sim… mas está realmente funcionando? Com uma animação acionada pela potência (W), você vê imediatamente se o ciclo está em andamento ou se a máquina está apenas em modo de espera.
Uma bateria a 23%: você vê isso. Mas se ela estiver carregando, você também quer entender isso sem entrar em detalhes. Os modelos “battery/progress” podem exibir um comportamento diferente quando um sensor “carregador” está ativo (tipicamente para um smartphone).
Temperatura / umidade: os cartões “environment” podem reagir visualmente de acordo com limites, e até mesmo exibir um gráfico interativo ao longo do tempo para entender uma tendência (umidade que aumenta após o banho, temperatura que cai à noite, etc.).
Resumindo, ganhamos em legibilidade, e nos surpreendemos ao usar o painel com mais prazer (sim, esse é um argumento real… um painel que gostamos de olhar, mantemos atualizado!).
Pré-requisitos
A base recomendada pelo autor é simples: HACS, Mushroom (cartões e tema), e card-mod (instalável via HACS em 2 cliques).
Dependendo dos modelos, você também poderá cruzar mushroom-legacy-template-card (frequentemente mencionada como uma dependência prática), e para algumas variantes “com gráfico”, cartões complementares como mini-graph-card e vertical-stack-in-card.
Um detalhe que evita tirar os cabelos: é recomendado usar uma exibição de painel em modo Seções ou Masonry, e se suas animações parecerem não se ativar, mudar o tipo de visão pode resolver o problema.
Instalação: a lógica (simples) do HA-Animated-cards
HA-Animated-cards não se instala como uma integração convencional do Home Assistant. O princípio é mais de “copiar-colar”: você cria um cartão Mushroom (ou um cartão manual conforme o modelo), o configura normalmente (entidade, nome, ícone…), e então cola o bloco de estilo/animação fornecido pelo projeto na seção card_mod.
É importante: não tente “adicionar o repositório no HACS” como se fosse um plugin a instalar. Aqui, você está pegando pedaços de YAML + estilo para colar em seus cartões.
Configuração passo a passo
Na prática, a configuração é muito simples:
Você abre seu painel e aplica o tema Mushroom na visão onde vai colocar os cartões (isso é claramente recomendado).
Você adiciona o cartão base, geralmente um Mushroom Entity Card (ou um Mushroom Light Card para as luzes).
Você ajusta os campos padrão (entidade, nome, ícone, informações…), em seguida passa para o editor de código e cola o estilo a partir da seção card_mod fornecida pelo HA-Animated-cards.
Você substitui as entidades requeridas no código copiado. Para alguns modelos, isso é “em dois lugares” (exemplo típico: os cartões de ambiente + gráfico).
E você ajusta os limites (temperaturas, watts, porcentagens) para adequar à SUA casa. Porque uma máquina de lavar, uma VMC ou um radiador não têm todos a mesma assinatura de consumo, e é aí que esses cartões se tornam “inteligentes”.
Exemplo 1: cartão “tomada inteligente” controlada pela potência
Caso de uso muito claro: uma tomada conectada em uma máquina de lavar, um secador, uma impressora 3D, ou mesmo um servidor.
Você cria um Mushroom Entity Card na entidade da tomada (switch). Em seguida, você cola a animação correspondente, e a torna “inteligente”: a animação não depende mais apenas do estado On/Off, mas de um sensor de potência (W). Quando a potência ultrapassa um limite (geralmente 0 W é suficiente), a animação começa. Você também pode alterar o operador de comparação conforme suas necessidades.
Um pequeno detalhe que conta: para que o card-mod recupere corretamente a cor, o autor recomenda escolher uma cor real para o ícone, e evitar as opções “primary” ou “accent”.
Exemplo 2: cartões de ambiente (temperatura / umidade) com gráfico interativo
É o tipo de cartão que faz você pensar “ok, isso é legal” em 2 segundos.
A metodologia mostrada é muito direta: você adiciona um cartão manual no painel, cola o YAML do modelo, e depois substitui a entidade do sensor nos locais indicados (tipicamente, uma vez para a exibição principal e uma vez para o gráfico). Em seguida, você adapta os valores min/max ou os limites utilizados para que a escala se ajuste ao seu ambiente (um porão úmido não é configurado como um quarto…).
Para economizar espaço, a dica é combinar dois cartões lado a lado através de uma Grid Card (2 colunas), e depois ajustar a altura dos cartões e a largura do gráfico para ter um conjunto compacto.
Exemplo 3: cartões de bateria / porcentagem (smartphone, sensor, download…)
Esses modelos se aplicam a tudo que exibe uma porcentagem: bateria de telefone, bateria de sensor Zigbee, progresso de impressão 3D, progresso de download…
A demonstração propõe começar com um Mushroom Entity Card no sensor de bateria, sem forçar um ícone customizado, e com uma cor mais branca/cinza claro. Em seguida, você cola a parte card_mod do modelo escolhido.
Para um telefone, há um bônus interessante: você pode adicionar um sensor “carregador” (conectado / em carga) para exibir uma animação específica quando está carregando.
E quanto à personalização, permanecemos no concreto: variáveis para o tamanho dos textos (primário/secundário), tamanho do ícone, e até uma linha a comentar/excluir se você não gosta da posição “no canto”.
Dicas e armadilhas clássicas
Se uma animação “não pega”, comece verificando dois pontos muito simples: o tipo de visão do painel (algumas pessoas notam que mudar a visão desbloqueia a situação) e o fato de usar o tema Mushroom na visão.
Se um cartão depende da cor (luzes, ícones que devem “repetir” a tonalidade), esteja atento às instruções de configuração: para certos tipos, não se coloca cor do ícone, para outros, é necessário uma cor real (não primária/acento).
Se você controla uma animação em um valor numérico (watts, temperatura, umidade), leve 2 minutos para escolher um limite que corresponda ao seu equipamento. É esse ajuste que transforma uma animação “gadget” em um verdadeiro indicador útil.
Onde encontrar os modelos e como ir mais longe
O projeto está centralizado no GitHub, e a filosofia é simples: você escolhe um cartão, copia o YAML / o estilo, substitui as entidades, e então ajusta.
E se você gosta do formato de vídeo, o autor publica demonstrações muito “passo a passo”, com novos modelos regularmente (cartões solicitados pela comunidade, variantes mais compactas, versões com gráfico, etc.).
