Home Assistant’s Lovelace user interface lets you create the dashboard of your choice. Further, you can use custom third-party ones to add more jazz to the dashboard. Installing different themes can make the Home Assistant experience feel different, but it can get boring after a while.

You can transform the dashboard’s look with animated cards and modern interface components. Animating cards for the dashboard requires basic YAML editing skills and dealing with CSS styles. So you can customize the Home Assistant dashboard with animated cards instead of a boring standard interface.

What you need before starting

Get a few things in order

Before you begin, you’ll need to run the latest version of Home Assistant. You can run it on an x64-based computer or an SBC such as a Raspberry Pi. Make sure you have the Home Assistant Community Store (HACS) installed and include a few custom add-ons to animate the cards. You can search for them in HACS to download and install them.

Grab the Mushroom cards add-on, which includes a collection of several cards with full editor support for customizing the Lovelace interface of the dashboard. It works with light and dark modes, features a variety of Material UI colors, and supports theme customization.

Install the Mushroom Themes add-on to customize the overall feel and unified look of the Home Assistant, along with accents and semi-transparent card backgrounds. It’s crucial to use the square or shadow theme in both dark and light modes.

Finally, install the Lovelace Card Mod add-on (v3.4.5 or later) to enable CSS styles for the elements on a Home Assistant dashboard.

After installing these three add-ons, you only need to copy the CSS style code for the respective cards from the HA Animated Cards GitHub page.

Do note that all the HACS add-ons are community-maintained and may work differently depending on your Home Assistant setup. If anything breaks or doesn’t work, it’s up to you to tweak and experiment with the code.

Adding animated cards to a Home Assistant dashboard

Pasting the CSS styles carefully

Before creating animated cards, choose the Mushroom theme from the user profile settings. That’ll prepare the interface for the changes. The Home Assistant Animated Cards by Anashost enable animation in two scenarios. The entity icon shows a color, and animations play only when the main entity card is active, as defined by the State Mode declaration in the CSS. When you define the Number Mode in the CSS style for cards, the animations will play regardless of the primary entity card’s state (on or off).

The HA Animated Cards have CSS styling applied only to specific entities. On your Home Assistant’s dashboard, pick a Mushroom Entity Card or pick another one. For the smart lights, choose the Mushroom Light card, then enable other relevant options. For the Mushroom Media Card, you can enable options to display volume level sliders, volume buttons, and playback controls.

Set the entity for the card, pick an Icon color, and choose Toggle as the Tap behavior option.

Head to the HA-Animated-Card page, select an entity. For a smart light, reveal the Lamp entity (28 or 30) from the entity list on the GitHub page. The page shows animation for the relevant entity type to help you pick and customize it. Next, copy all the CSS code, starting from the card mod value until the end.

Click on Show code editor to open the YAML editor for the card. Then, paste it at the bottom of the entity card configuration in the code editor. Change the entity name in the CSS style code to match the one you’re using in the card configuration. The additional options for the entity card will only appear if the code editor supports it.

Practical tips for an animated dashboard

Keep things simple

While the animations for the cards are lightweight, stacking too many animated cards might slow down the experience. Also, too many dancing animated icons might look jarring. Simplifying the CSS for the animated cards keeps things smooth and helps you avoid excessive nesting within the cards.

Loading animations in the HA Companion app on mobile and tablet devices might require refreshing now and then. The animated cards work fine in most desktop browsers, but I couldn't get them to work properly in Firefox on the first go. The HA Companion app loads the animated cards and icons fine on the iPad, but struggles a bit with its iOS app. Apparently, the transparency effects and transitions may behave differently in the app or browser.

Customize to your heart’s content

With a few community add-ons from HACS, you can build a dashboard that feels alive instead of a plain control panel. That said, animating the cards does require digging into YAML indentations and CSS styling, if you’re up for it. Using animated cards, mushroom themes, and card mods, you can chisel your smart home’s personality to your heart’s content. Go ahead and experiment with different card types and tweak the CSS styles to make the Home Assistant dashboard look unique.