HA-Animated-cards es una colección de tarjetas listas para usar (67 modelos en el momento en que se escriben estas líneas) para “animar” un dashboard de Home Assistant, sobre todo si ya estás utilizando Mushroom. La idea no es poner purpurina por todas partes: las animaciones son más bien discretas, limpias, y se activan cuando tiene sentido. Un lavadora “gira” cuando consume, un ventilador empieza a girar cuando realmente está en funcionamiento, un enchufe “brilla” solo si está consumiendo energía, etc.
El punto que agrada: no es una “enorme” tarjeta personalizada que añade una tonelada de JavaScript. El proyecto se basa principalmente en Mushroom como base, y en card-mod para inyectar el estilo (CSS) y las animaciones. Resultado: es ligero, y se integra muy bien en un dashboard ya existente.
Por qué es interesante en Home Assistant
Un dashboard, se consulta rápidamente, varias veces al día. Y en la vida real, “ver” el estado en una fracción de segundo a veces es mejor que “leer” un valor. HA-Animated-cards precisamente aporta esta lectura instantánea.
Tomemos tres situaciones muy concretas.
La lavadora está “encendida”, sí… pero ¿realmente está girando? Con una animación activada en la potencia (W), ves inmediatamente si el ciclo está en curso o si la máquina está simplemente en espera.
Una batería al 23%: lo ves. Pero si está cargando, también quieres entenderlo sin entrar en detalles. Los modelos “battery/progress” pueden mostrar un comportamiento diferente cuando un sensor “cargador” está activo (típicamente para un smartphone).
Temperatura / humedad: las tarjetas “environment” pueden reaccionar visualmente según umbrales, e incluso mostrar un gráfico interactivo a lo largo del tiempo para entender una tendencia (humedad que sube después de la ducha, temperatura que baja en la noche, etc.).
En resumen, se gana en legibilidad, y te sorprendes ‘usando’ el dashboard con más placer (sí, es un verdadero argumento… un tablero que te gusta mirar, ¡lo mantienes actualizado!).
Requisitos
La base recomendada por el autor es simple: HACS, Mushroom (tarjetas y tema), y card-mod (instalable via HACS en 2 clics).
Dependiendo de los modelos, también puedes combinar con mushroom-legacy-template-card (frecuentemente mencionado como dependencia práctica), y para algunas variantes “con gráfico”, tarjetas complementarias como mini-graph-card y vertical-stack-in-card.
Un detalle que evita que te arranques los cabellos: se recomienda usar una vista de dashboard en modo Secciones o Masonry, y si tus animaciones parecen no activarse, cambiar el tipo de vista puede resolver el problema.
Instalación: la lógica (sencilla) de HA-Animated-cards
HA-Animated-cards no se instala como una integración clásica de Home Assistant. El principio es más bien “copiar-pegar”: creas una tarjeta Mushroom (o una tarjeta manual según el modelo), la configuras normalmente (entidad, nombre, icono…), y luego pegas el bloque de estilo/animación provisto por el proyecto en la sección card_mod.
Es importante: no intentes “agregar el repositorio en HACS” como si fuera un plugin para instalar. Aquí, recuperas trozos de YAML + estilo para pegar en tus tarjetas.
Implementación paso a paso
En la práctica, la implementación es, por tanto, muy simple:
Abres tu dashboard, luego aplicas el tema Mushroom en la vista donde vas a colocar las tarjetas (es claramente recomendado).
Agregas la tarjeta base, a menudo una Mushroom Entity Card (o una Mushroom Light Card para las luces).
Ajustas los campos estándar (entidad, nombre, ícono, información…), luego pasas al editor de código y pegas el estilo a partir de la sección card_mod provista por HA-Animated-cards.
Reemplazas las entidades requeridas en el código copiado. Para algunos modelos, es “en dos lugares” (ejemplo típico: las tarjetas de ambiente + gráfico).
Y ajustas los umbrales (temperaturas, vatios, porcentajes) para adaptarlos a TU casa. Porque una lavadora, una VMC o un radiador no todos tienen la misma firma de consumo, y es precisamente ahí donde estas tarjetas se vuelven “inteligentes”.
Ejemplo 1: tarjeta “enchufe inteligente” controlada por la potencia
Caso de uso muy ilustrativo: un enchufe conectado a una lavadora, un secadora, una impresora 3D, o incluso un servidor.
Creas una Mushroom Entity Card sobre la entidad del enchufe (switch). Luego pegas la animación correspondiente, y la haces “inteligente”: la animación ya no depende solo del estado On/Off, sino de un sensor de potencia (W). Cuando la potencia supera un umbral (a menudo 0 W es suficiente), la animación se inicia. También puedes cambiar el operador de comparación según tus necesidades.
Pequeño detalle que cuenta: para que card-mod recupere correctamente el color, el autor recomienda elegir un verdadero color de ícono, y evitar las opciones “primary” o “accent”.
Ejemplo 2: tarjetas ambientales (temperatura / humedad) con gráfico interactivo
Es el tipo de tarjeta que hace decir “ok, esto es elegante” en 2 segundos.
El método mostrado es muy directo: agregas una tarjeta manual en el dashboard, pegas el YAML del modelo, luego reemplazas la entidad del sensor en las ubicaciones indicadas (típicamente, una vez para la visualización principal y una vez para el gráfico). Luego, adaptas los valores min/max o los umbrales utilizados para que la escala se ajuste a tu habitación (un sótano húmedo no se ajusta como una habitación…).
Para ahorrar espacio, el truco consiste en combinar dos tarjetas una al lado de la otra mediante una Grid Card (2 columnas), luego ajustar la altura de las tarjetas y el ancho del gráfico para que todo se mantenga compacto.
Ejemplo 3: tarjetas de batería / porcentaje (smartphone, sensor, descarga…)
Estos modelos se aplican a cualquier cosa que exponga un porcentaje: batería de teléfono, batería de sensor Zigbee, progreso de impresión 3D, progreso de descarga…
La demo propone partir de una Mushroom Entity Card sobre el sensor de batería, sin forzar un ícono personalizado, y con un color más bien blanco/gris claro. Luego, pegas la parte card_mod del modelo elegido.
Para un teléfono, hay un bonus interesante: puedes añadir un sensor “cargador” (conectado / en carga) para mostrar una animación específica cuando se está cargando.
Y en cuanto a personalización, nos mantenemos en lo concreto: variables para el tamaño de los textos (primario/secundario), tamaño del ícono, e incluso una línea para comentar/eliminar si no te gusta la posición “en una esquina”.
Consejos y trampas clásicas
Si una animación “no se activa”, comienza por verificar dos puntos muy tontos: el tipo de vista del dashboard (algunas personas encuentran que cambiar de vista desbloquea la situación) y el hecho de usar el tema Mushroom en la vista.
Si una tarjeta depende del color (luces, íconos que deben “retomar” el tono), ten cuidado con las instrucciones de configuración: para ciertos tipos, no se debe poner un color de ícono, para otros, se requiere un color real (no primary/accent).
Si controlas una animación sobre un valor numérico (vatios, temperatura, humedad), tómate 2 minutos para elegir un umbral que corresponda a tu equipo. Este ajuste es el que transforma una animación “gadget” en un verdadero indicador útil.
Dónde encontrar los modelos y cómo avanzar más
El proyecto está centralizado en GitHub, y la filosofía es simple: eliges una tarjeta, copias el YAML / el estilo, reemplazas las entidades, luego ajustas.
Y si te gusta el formato vídeo, el autor publica demos muy “paso a paso”, con regularmente nuevos modelos (tarjetas solicitadas por la comunidad, variantes más compactas, versiones con gráfico, etc.).
Por favor, sea cortés: ¡un hola y un gracias no cuestan nada! Estamos aquí para mantener debates constructivos. Los trolls serán eliminados.