Animated flickering lights in dashboard

Share your Projects! Dashboards & Frontend
1

I’ve picked up some (non-smart) flickering candle LED bulbs for the exterior of my house, and wanted to animate them on my dashboard to show a similar flickering effect when they’re on. The switch that controls them is a Shelly switch.

Here’s what I came up with:
flicker

Do achieve this, I’ve added the following animation with Card Mod on a picture elements card.

type: picture-elements
title: Main Floor
card_mod:
  style: |
    ha-card {
      {% if is_state('switch.front_door_exterior_lights','on') %}
      --flicker-animation: flicker 0.5s step-end infinite;
      {% endif %}
    }

    @keyframes flicker {
      0% {transform: translate(-50%,-50%) scaleX(1); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3))}
      25% {transform: translate(-50%,-50%) scaleX(-1); filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3))}
      50% {transform: translate(-50%,-50%) scaleX(1); filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.3))}
      75% {transform: translate(-50%,-50%) scaleX(-1); filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3))}
    }

This is a looping 4-frame animation that flips the fire icon every second frame, and “sways” the shadow left → center → right → center.

Then, where I display the icons on the card, I refer to the animation:

  - type: state-icon
    entity: switch.front_door_exterior_lights
    icon: mdi:fire
    style:
      top: 64%
      left: 23%
      animation: var(--flicker-animation)

The background glow is just a conditional image shown behind the icons when the light switch is on.

Enjoy!

2 Likes