📋 In this article
Your Home Assistant dashboard tells you what's happening in your home, but does it actually catch your eye when something needs your attention? Those static tiles are easy to ignore, but a glowing icon, a pulsing alert, or a spinning ring, well that's something you''ll notice.
In this video I'm going to show you ten animated dashboard cards I've built using standard Mushroom cards and card_mod. Each one is designed for a specific use case, keeps in with the default Home Assistant styling, and won't slow your dashboard down.
Whether it's an open door, a running backup, or a timer that's just hit zero, there's an animation here that fits right in.
What you need
So to use any of the examples I'm going to show you, you're going to need to have card_mod installed in Home Assistant and you can do that via the Home Assistant Community Store, known as HACS. I've got a video on the channel taking you through this and I'll link that in the description below.
Other than that, these all just use the standard mushroom cards that you have available, so it keeps it nice and lightweight for your dashboards.
The animated cards
What we have here are the different card animations that I've created, there's ten in total so far and as you can see, I've paired them with likely use cases and they work equally as well on the horizontal layout as they do on the vertical layout.
All of them use card_mod in some way, and they're all configurable depending on the device attributes you have available. As I mentioned they just use the standard mushroom cards, so for example, this one uses the template card, and then others use the light or the entity card.
If I just quickly go through what we have then, first we've got one for when doors or windows are open, then we've got when a switch is turned on, next is one for a running process such as a backup, then for when lights are switched on, another one for timers, then one for appliances that are running, we've got one for calendar events, one for a room being heated, the current weather conditions and finally one for a CO2 sensor.
When I created these, I just wanted something that would fit in with my existing dashboard style. I didn't want code heavy cards that might bog down the rendering of the dashboard, and I wanted them to be simple to maintain or even adapt for other uses.
So let's take a walk through each of these examples so you can see how they work and how you can configure them.
Open door alert
Starting off with the door card then and this is using a group helper in which I have all my doors that have sensors on them. When I open a door, then the door icon changes to a glowing red bell to indicate that one of those is reporting being open and when it's closed it just goes back to the regular icon. Very simple to use, if you want to use it with windows or anything else in a group that returns a count, then just swap the group name over.
Switch on pulsing
Next is one for a switch and I did this because I think the switch is a little boring when it's on a tile on the dashboard. With this one you get a disappearing ring pulsing from the centre to the outside.
You can set the icon to whatever colour you want, and the ring will honour that colour, as you can see with two cards on the dashboard. As it's using the entity card, it's easy to set up and you can adjust the styling according to your needs, but there isn't much else to change on this one unless your plug returns some weird state when it's on.
Process running
The next one is for when you've got something like a backup running, or some other type of running process, and this is just a visual indicator for that. So, for me, I have the backup manager on one of my dashboards and when a backup starts then as you can see, this then gets an animated line across the bottom of the card.
It's using the mushroom entity card, so you just specify the entity you want. The important thing with this one, is that you need to specify the state of the entity when the process is running. For the backups in home assistant, that state is create_backup, so it will animate the card when that is detected and when the process is complete, then the card just goes back to normal.
Glowing light
Now the next one is for lighting, and this uses the mushroom light card, and with this you get a nice glow effect. It uses the colour of the light, and it's relative to the brightness levels you have the light set to.
With a brightness at 25% it's quite subtle but when you get up to 100% then it's a bit more evident. You can use this one just by specifying the entity, but if you want to change any of the styling then it's a little more complicated as you have settings for the opacity, spread and the intensity as well as the colour.
Reminder alarm
So, the next one is something that is for timers, and this is perfect for medication reminders, or even just general reminders. Whilst the timer is running, it will just display a static alarm icon, but when the timer reaches 0 then it turns to red and starts swinging side to side, and all you have to do with this is specify the name of the timer that you're using.
Appliance power draw
Next and we've got one for something where you're able to determine power draw. In my example here it's a washing machine on a smart plug, and with this you get a spinning circle around it that will get slower or faster according to the power draw.
The yaml for the card is quite simple, you're just specifying the switch entity that the appliance is on, and then there's a sensor trigger in the configuration.yaml file, that will change the rotation speed according to the power draw.
This is the main area for change here, as you'll need to change the values according to what your appliance is using, but as you can see, as more power is used, then the circle goes faster and then slows down as less is used.
Upcoming event
Next on the list is one that ties into the calendar, and in normal use it just displays a static calendar icon, but as soon as an event is active then it starts swinging side to side and alternating with an alert icon and displays the name of the event as well.
As soon as the event is over then it'll return back to the calendar icon. This one needs a little bit of template config in your configuration.yaml file and of course you'll need to specify your calendar that you want to use.
Heating running
This next one is more just an aesthetic thing really. If you've got your heating system integrated with home assistant, then with this you can have a card that will display, in this case a radiator, which will be off when the heating is off, but when it's on, then it will then alternate between two other radiator icons with an animated glow effect giving the impression of heating. You only need specify the entity for the climate device that controls the heating in that room and that's it.
Minimal weather
Next and if you're after a super minimalistic weather card then this one may be just that. This one gives you an animated and coloured icon according to the weather condition provided by your weather provider, along with the current temperature.
Again, you only need provide your weather entity to get this working, it maps the weather conditions to icons which you can change if required, and there are some settings for the colour of the icon according to the weather, which you can change as well.
Air quality alert
Finally, we have one for a CO2 detector, or similar kind of device. And this one displays the CO2 icon, which if the reading is within normal range, then it'll just be green but as the reading increases then it'll turn to amber with a slow pulse and finally when it's at a high level then it turns red with a faster pulse.
With this there's just a couple of things to change, one is the entity you want to use and the second is the definition of the ranges. So the default is up to 800 for low, up to 1200 for medium and high is anything above that.
You also have the humidity and temperature levels displayed, and if your sensor doesn't provide those then you might want to remove one or both.
Wrapping up
So that's it, those are some of the animated cards and icons that I've been building into my Home Assistant dashboards, adding some nice animations whilst still keeping them in line with the general styling of Home Assistant. Hopefully you can use them in your own dashboards, or even take them and modify them into something else entirely.
I'm going to put all of the YAML for these on my GitHub repository, and over time I'll no doubt create more and add them there as well. You can find the link to that in the description of this video.
I hope you enjoyed the video, if you did then I'd appreciate a thumbs up and don't forget to subscribe to the channel for more content like this, but as always, thanks for watching, and I'll see you in the next video.
🔗 GitHub Repository - ha-animated-icons
📦 HACS - hacs.xyz
🍄 Mushroom Cards - github.com/piitaya/lovelace-mushroom
🎨 card-mod - github.com/thomasloven/lovelace-card-mod