Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[galaxy]

@dimitri.landerloos
I have a swipe card for my living room where it should show the temperature on the left top and chip for on/off on the right top followed by mini graph chart right underneath for temperature and humidity in my living room. I have done that successfully but unable to reduce the space between them so it can come to visually pleasing size.

I tried it in both vertical-stack way and grid way.

Here is with grid way:

type: custom:swipe-card
cards:
  - type: custom:stack-in-card
    cards:
      - type: grid
        columns: 2
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.living_temperature
            name: Living Room
            icon: None
            tap_action:
              action: navigate
              navigation_path: living-room
            alignment: start
          - type: custom:mushroom-chips-card
            chips:
              - type: light
                entity: light.livingroom_lights_2
                use_light_color: true
            alignment: end
      - type: custom:mini-graph-card
        keep:
          margin: false
          box_shadow: false
          background: false
        entities:
          - entity: sensor.living_temperature
            name: Temperature
            color: var(--green-color)
          - entity: sensor.living_humidity
            name: Humidity
            color: var(--blue-color)
            y_axis: secondary
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_2
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_3
        icon: phu:recessed-ceiling
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.swing_lights
        icon: mdi:circle-double

Here it is with vertical stack way:

type: custom:swipe-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:stack-in-card
        keep:
          margin: false
          box_shadow: false
          background: false
        mode: horizontal
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.living_temperature
            name: Living Room
            icon: None
            tap_action:
              action: navigate
              navigation_path: living-room
            alignment: start
          - type: custom:mushroom-chips-card
            chips:
              - type: light
                entity: light.livingroom_lights_2
                use_light_color: true
            alignment: end
      - type: custom:mini-graph-card
        keep:
          margin: false
          box_shadow: false
          background: false
        entities:
          - entity: sensor.living_temperature
            name: Temperature
            color: var(--green-color)
          - entity: sensor.living_humidity
            name: Humidity
            color: var(--blue-color)
            y_axis: secondary
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_2
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_3
        icon: phu:recessed-ceiling
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.swing_lights
        icon: mdi:circle-double

Space in the vertical stack way shown later is preferable but without showing both cards separately.
My objective is to include all three things (temperature and chip entities horizontally on top and temperature/humidity chart right under those) while the whole card swipes to individual lights.

[davidnestico]

@galaxy

Where are these from btw? @galaxy

[dimitri.landerloos]

Edit: easier way is just to just declare square: false in the grid card

type: custom:swipe-card
cards:
  - type: custom:stack-in-card
    cards:
      - type: grid
        columns: 2
        square: false
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.living_temperature
            name: Living Room
            icon: None
            tap_action:
              action: navigate
              navigation_path: living-room
            alignment: start
          - type: custom:mushroom-chips-card
            chips:
              - type: light
                entity: light.livingroom_lights_2
                use_light_color: true
            alignment: end
      - type: custom:mini-graph-card
        keep:
          margin: false
          box_shadow: false
          background: false
        entities:
          - entity: sensor.living_temperature
            name: Temperature
            color: var(--green-color)
          - entity: sensor.living_humidity
            name: Humidity
            color: var(--blue-color)
            y_axis: secondary
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_2
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_3
        icon: phu:recessed-ceiling
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.swing_lights
        icon: mdi:circle-double

Original Response:

Probably not the most elegant solution, but the first one i thought of. You could just add your vertical stack into a stack in card like this:

type: custom:swipe-card
cards:
  - type: custom:stack-in-card
    cards:
    - type: vertical-stack
      cards:
        - type: custom:stack-in-card
          keep:
            margin: false
            box_shadow: false
            background: false
          mode: horizontal
          cards:
            - type: custom:mushroom-entity-card
              entity: sensor.living_temperature
              name: Living Room
              icon: None
              tap_action:
                action: navigate
                navigation_path: living-room
              alignment: start
            - type: custom:mushroom-chips-card
              chips:
                - type: light
                  entity: light.livingroom_lights_2
                  use_light_color: true
              alignment: end
        - type: custom:mini-graph-card
          keep:
            margin: false
            box_shadow: false
            background: false
          entities:
            - entity: sensor.living_temperature
              name: Temperature
              color: var(--green-color)
            - entity: sensor.living_humidity
              name: Humidity
              color: var(--blue-color)
              y_axis: secondary
          hours_to_show: 24
          line_width: 3
          font_size: 50
          animate: true
          show:
            name: false
            icon: false
            state: false
            legend: false
            fill: fade
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_2
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.lr_ceiling_lights_3
        icon: phu:recessed-ceiling
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.swing_lights
        icon: mdi:circle-double

[dimitri.landerloos]

Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.

More Mushroom Card Icon Animations

Flash Animation (changed)

card_mod:
  style: |
    ha-state-icon {
      animation: flash 4s linear infinite;
    }
    @keyframes flash {
      0%, 4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 100% { transform: translate(0px,0px); }
      2% { transform: translate(-0.3px, 0px); }
      6% { transform: translate(0.3px, 0px); }
      10% { transform: translate(-0.2px, 0px); }
      14% { transform: translate(0.2px, 0px); }
      18% { transform: translate(-0.2px, 0px); }
      22% { transform: translate(0.5px, 0px); }
      26% { transform: translate(-0.5px, 0px); }
      34% { transform: translate(-1px, 5px); color: rgb(var(--rgb-amber)); }
      38% { transform: translate(0px, 0px); color: rgb(var(--rgb-white)); }
      40% { color: rgb(var(--rgb-amber)); }
    }

Charge Animation (changed)

type: custom:mushroom-template-card
icon: mdi:lightning-bolt
icon_color: amber
primary: Charge
card_mod:
  style: |
    ha-state-icon {
      animation: charge 1s linear infinite;
    }
    @keyframes charge {
      0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); }
      5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
      95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
    }

Double Rainbow Animation (changed)

type: custom:mushroom-template-card
icon: mdi:looks
primary: Double Rainbow
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: rainbow 40s linear infinite;
      }
      @keyframes rainbow {
        0%, 100% {background: rgb(var(--rgb-red), 0.2);}
        6.25% { background: rgb(var(--rgb-deep-orange), 0.2);}
        12.5% { background: rgb(var(--rgb-orange), 0.2);}
        18.75% { background: rgb(var(--rgb-amber), 0.2);}
        25% { background: rgb(var(--rgb-yellow), 0.2); }
        31.25% { background: rgb(var(--rgb-lime), 0.2);}
        37.5% { background: rgb(var(--rgb-light-green), 0.2);}
        43.75% { background: rgb(var(--rgb-green), 0.2);}
        50% { background: rgb(var(--rgb-teal), 0.2);}
        56.25% { background: rgb(var(--rgb-cyan), 0.2);}
        62.5% { background: rgb(var(--rgb-light-blue), 0.2);}
        68.75% { background: rgb(var(--rgb-blue), 0.2); }
        75% { background: rgb(var(--rgb-indigo), 0.2);}
        81.25% { -background: rgb(var(--rgb-deep-purple), 0.2);}
        87.5% { background: rgb(var(--rgb-purple), 0.2);}
        93.75% { background: rgb(var(--rgb-pink), 0.2);}
      }
    .: |
      ha-state-icon {
        animation: double 3s linear infinite alternate, rainbow 40s linear infinite
      }
      @keyframes double {
        0% { clip-path: inset(0 98% 0 0); transform: rotateY(0deg); }
        12.5% { clip-path: polygon(0 22%, 0 75%, 50% 75%); }
        25% { clip-path: inset(0 50% 0 0); }
        37.5% { clip-path: polygon(0 0, 0 75%, 50% 75%, 100% 0); }
        50% { clip-path: inset(0 0 0 0); transform: rotateY(0deg); }
        50.1% { transform: rotateY(180deg); }
        62.5% { clip-path: polygon(0 0, 0 75%, 50% 75%, 100% 0); }
        75% { clip-path: inset(0 50% 0 0); }
        87.5% { clip-path: polygon(0 22%, 0 75%, 50% 75%); }
        100% { clip-path: inset(0 98% 0 0); transform: rotateY(180deg); }
      }
      @keyframes rainbow {
        0%, 100% {color: rgb(var(--rgb-red));}
        6.25% { color: rgb(var(--rgb-deep-orange));}
        12.5% { color: rgb(var(--rgb-orange));}
        18.75% { color: rgb(var(--rgb-amber));}
        25% { color: rgb(var(--rgb-yellow));}
        31.25% { color: rgb(var(--rgb-lime));}
        37.5% { color: rgb(var(--rgb-light-green));}
        43.75% { color: rgb(var(--rgb-green));}
        50% { color: rgb(var(--rgb-teal));}
        56.25% { color: rgb(var(--rgb-cyan));}
        62.5% { color: rgb(var(--rgb-light-blue));}
        68.75% { color: rgb(var(--rgb-blue));}
        75% { color: rgb(var(--rgb-indigo));}
        81.25% { color: rgb(var(--rgb-deep-purple));}
        87.5% { color: rgb(var(--rgb-purple));}
        93.75% { color: rgb(var(--rgb-pink));}
      }

Random Animation (unchanged, FYI if you dont know. this only updates when the page is refreshed. it is not an active animation.)

type: custom:mushroom-template-card
icon: none
icon_color: red
primary: Random
card_mod:
  style: |
    :host {
      --card-mod-icon: mdi:dice-{{range(1, 6) | random}};
    }

Sparkle Animation (changed)

type: custom:mushroom-template-card
icon: mdi:shimmer
icon_color: amber
primary: Sparkle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: rgba(var(--rgb-disabled), 0.2);
      }
    .: |
      ha-state-icon {
        animation: stars 4s linear infinite;
      }
      @keyframes stars {
        0%, 3.1%, 14.1%, 40.1%, 55.1% { clip-path: inset(0 0 0 0); }
        3%, 40% { clip-path: polygon(48% 100%, 48% 62%, 0 63%, 0 0, 100% 0, 99% 100%); }
        14% { clip-path: polygon(49% 45%, 48% 100%, 0 100%, 0 0, 100% 0, 100% 36%); }
        55% { clip-path: polygon(0 100%, 0 60%, 41% 65%, 49% 46%, 100% 44%, 100% 100%); }
      }

Eeeew Animation (changed)

type: custom:mushroom-template-card
icon: mdi:bacteria
icon_color: light-green
primary: Eeeew
card_mod:
  style: |
    ha-state-icon {
      animation: wiggle 0.5s ease infinite;
      transform-origin: 80% 80%;
    }
    mushroom-shape-icon {
      display: flex;
      animation: spin 20s infinite;
    }
    @keyframes wiggle {
      0%, 100% { transform: scale(1) rotate(1deg); }
      50% { transform: scale(1.04) rotate(-2deg); }

Sunny Animation (changed)

type: custom:mushroom-template-card
primary: Sunny
icon: mdi:weather-sunny
icon_color: amber
card_mod:
  style: |
    ha-state-icon {
      animation: sunny 8s ease-in-out infinite alternate;
    }
    @keyframes sunny {
      70% { transform: rotate(360deg) scale(1); }
      80% { transform: scale(1); }
      90% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }

Cloudy Animation (changed)

type: custom:mushroom-template-card
primary: Cloudy
icon: mdi:weather-cloudy
icon_color: grey
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite;
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }

Rainy Animation (changed)

type: custom:mushroom-template-card
primary: Rainy
icon: mdi:weather-rainy
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes rain {
      50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
    }

Pouring Animation (changed)

type: custom:mushroom-template-card
primary: Pouring
icon: mdi:weather-pouring
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, rain 1s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes rain {
      0%, 50%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
      75%  { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
    }

Tornado Animation (changed)

type: custom:mushroom-template-card
primary: Tornado
icon: mdi:weather-tornado
icon_color: orange
card_mod:
  style: |
    ha-state-icon {
      animation: tornado 3s ease-in-out infinite; 
    }
    @keyframes tornado {
      0%, 100% { transform: translateX(3px) rotateY(0deg); }
      0.1%, 45.1% { transform: rotateY(180deg); }
      30% { transform: translateX(-1px) rotateY(180deg); }
      30.1%, 75.1% { transform: rotateY(0deg); }
      45% { transform: translateX(1.5px) rotateY(0deg); }
      75% { transform: translateX(-3.2px) rotateY(180deg); }
    }

Lightning Animation (changed)

type: custom:mushroom-template-card
primary: Lightning
icon: mdi:weather-lightning
icon_color: amber
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, lightning 4s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes lightning {
      10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
      10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
    }

Clear Night Animation (changed)

type: custom:mushroom-template-card
icon: mdi:weather-night
icon_color: amber
primary: Clear Night
card_mod:
  style: |
    ha-state-icon {
      animation: moon 10s linear infinite, stars 5s linear infinite;
    }
    @keyframes moon {
      0%, 100% { transform: rotate(12deg); }
      30% { transform: rotate(-6deg); }
      45% { transform: rotate(8deg); }
      75% { transform: rotate(-10deg); }
    }
    @keyframes stars {
      0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
      3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
      14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
    } 

Windy Animation (changed)

type: custom:mushroom-template-card
primary: Windy
icon: mdi:weather-windy
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite; 
      transform-origin: 15% 50%
    }
    @keyframes cloudy {
      0%, 100% { transform: scaleX(1.2); }
      30% { transform: scaleX(0.9); }
      45% { transform: scaleX(1.1); }
      75% { transform: scaleX(0.8); }
    }

Wind Animation (changed)

type: custom:mushroom-template-card
primary: Wind
icon: mdi:weather-windy-variant
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, wind 5s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes wind {
      0%, 50%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: inset(0 0 37% 0); }
    }

Snow Animation (changed)

type: custom:mushroom-template-card
primary: Snow
icon: mdi:weather-snowy
icon_color: grey
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, snow 4s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes snow {
      50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
      51% { clip-path: inset(0 0 0 0); }
    }

Hail Animation (changed)

type: custom:mushroom-template-card
primary: Hail
icon: mdi:weather-hail
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, hail 2s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes hail {
      0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
      50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
      75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
    }

Hurricane Animation (changed)

type: custom:mushroom-template-card
primary: Hurricane
icon: mdi:weather-hurricane
icon_color: red
card_mod:
  style: |
    ha-state-icon {
      animation: spin 1.5s linear infinite reverse; 
    }

Dust Animation (changed)

type: custom:mushroom-template-card
primary: Dust
icon: mdi:weather-dust
icon_color: brown
card_mod:
  style: |
    ha-state-icon {
      animation: wind 10s ease-in-out infinite, dust 1s infinite; 
      transform-origin: 15% 50%
    }
    @keyframes wind {
      0%, 100% { transform: scaleX(1.2); }
      30% { transform: scaleX(0.9); }
      45% { transform: scaleX(1.1); }
      75% { transform: scaleX(0.8); }
    }
    @keyframes dust {
      0%, 21%, 41%, 61%, 81%, 100% { clip-path: inset(0 0 0 0); }
      20% { clip-path: polygon(0 0, 69% 0, 72% 27%, 100% 30%, 100% 100%, 0 100%); }
      40%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 57% 100%, 57% 79%, 0 79%); }
      60%  { clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 28%, 30% 28%); }
      80%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 61%, 32% 62%, 32% 46%, 0 46%); }
    }

Foggy Animation (changed)

type: custom:mushroom-template-card
primary: Foggy
icon: mdi:weather-fog
icon_color: grey
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, fog 4s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes fog {
      0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
      75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
    }

Partly Cloudy Animation (changed)

type: custom:mushroom-template-card
primary: Cloudy
icon: mdi:weather-partly-cloudy
icon_color: amber
card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes sun {
      50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
    }

Fireplace Animation (changed)

type: custom:mushroom-template-card
primary: Fireplace
icon: mdi:fireplace
icon_color: red
card_mod:
  style: |
    ha-state-icon {
      animation: fire 800ms infinite;
      transform-origin: 50% 85%;
    }
    @keyframes fire {
        0%, 19%, 23%, 39%, 43%, 49%, 53%, 69%, 73%, 89%, 93%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
        20%, 40%, 50%, 70%, 90% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 99%, 66% 49%, 52% 44%, 33% 48%, 33% 82%, 66% 82%, 69% 100%, 0 100%); }
    }

Washing Machine #2 Animation (changed, fyi you can even make the drum a different color to the main icon.)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: orange
    primary: 'Washing Machine #2'
    card_mod:
      style: |
          ha-state-icon {
            animation: shake 400ms ease-in-out infinite;
            transform-origin: 50% 58%;
            clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: none !important;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: spin 1s linear infinite;
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Pot Animation (changed)

type: custom:mushroom-template-card
icon: mdi:pot-steam
icon_color: grey
primary: Pot
card_mod:
  style: |
    ha-state-icon {
      animation: steam 2s ease-in-out infinite;
    }
    @keyframes steam {
      0%, 100% { clip-path: inset(0 0 0 0); }
      50% { clip-path: inset(39% 0 0 0); }
    }

Serenity Animation (changed)

type: custom:mushroom-template-card
primary: Serenity
icon: mdi:scent
icon_color: green
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: color 6s ease infinite;
      }
      @keyframes color {
        50% { background: rgba(var(--rgb-cyan), 0.2); }
      }
    .: |
      ha-state-icon {
        animation: wave 6s ease infinite;
      }
      @keyframes wave {
        50% { transform: rotatey(180deg); color: rgb(var(--rgb-cyan)); }
      }

Music #1 Animation (changed)

type: custom:mushroom-template-card
primary: 'Music #1'
icon: mdi:music
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        perspective: 7px;
      }
    .: |
      ha-state-icon {
        animation: music 2s ease-in-out infinite alternate;
        transform-origin: 50% 100%
      }
      @keyframes music {
        0%, 100% { transform: translateY(0px) scaleX(1); }
        20% { transform: translateY(2px) scaleX(0.9); }
        40% { transform: rotateY(10deg) rotateZ(-10deg); }
        60% { transform: translateY(-4px) scaleX(1.1); }
        80% { transform: rotateY(-10deg) rotateZ(10deg); }
      }

Music #2 Animation (changed)

type: custom:mushroom-template-card
primary: 'Music #2'
icon: mdi:music
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      animation: beat 1.3s ease-out infinite both;
      transform-origin: 50% 80%;
    }
    @keyframes beat {
      0% { transform: scale(1); }
      10% { transform: scale(1.1); }
      17% { transform: scale(1.05); }
      33% { transform: scale(1.25); }
      60% { transform: scale(1); }
    }

Playlist Animation (changed)

type: custom:mushroom-template-card
icon: mdi:format-list-bulleted-square
icon_color: purple
primary: Playlist
card_mod:
  style: |
      ha-state-icon {
        animation: clip 2s steps(4) infinite;
      }
      @keyframes clip {
        0% { clip-path: inset(0 0 85% 0); }
        100% { clip-path: inset(0 0 -5% 0); }
      }

Grain Animation (changed)

type: custom:mushroom-template-card
icon: mdi:grain
icon_color: brown
primary: Grain
card_mod:
  style: |
    ha-state-icon {
      animation: flip 1s steps(1) infinite;
    }
    @keyframes flip {
      50% { transform: rotateY(180deg); }
    }

Focus Animation (changed)

type: custom:mushroom-template-card
icon: mdi:bullseye
icon_color: purple
primary: Focus
card_mod:
  style: |
    ha-state-icon {
      animation: focus 4s linear infinite alternate;
    }
    @keyframes focus {
      50% { filter: blur(10px); }
    }

Access Point Animation (changed)

type: custom:mushroom-template-card
icon: mdi:access-point
icon_color: teal
primary: Access Point
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 1.5s infinite;
      }
      @keyframes ping {
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3) inset; }
        50% { box-shadow: 0 0 5px 15px transparent inset; }
        51% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
    .: |
      ha-state-icon {
        animation: clip 1.5s infinite;
      }
      @keyframes clip {
        0% { clip-path: circle(13.0% at 50% 50%); }
        100% { clip-path: circle(50.0% at 50% 50%); }
      }

Alert Animation (unchanged)

type: custom:mushroom-template-card
primary: Alert!
icon: mdi:fire
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
      }
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
      @keyframes blink {
        100% {opacity: 0;}
      }

Record Animation (unchanged, doesnt work well on a dark background unless you set a --shape-color.)

type: custom:mushroom-template-card
icon: mdi:record-circle
icon_color: cyan
primary: Record
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: linear-gradient(-45deg, rgba(var(--rgb-black), 0.4) 0%, rgba(var(--rgb-black), 0.6) 50%, rgba(var(--rgb-black), 0.4) 100%);
        --shape-animation: spin 400ms linear infinite;
        --shape-color: none;
      }

Heart Animation (changed)

type: custom:mushroom-template-card
primary: Heart
icon: mdi:heart
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        transform-origin: 50% 60%;
        --shape-animation: heart 1.3s ease-out infinite both;
      }
      @keyframes heart {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.2); }
        10% { box-shadow: 0 0 5px 5px transparent; }
        17% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.2); }
        33% { box-shadow: 0 0 5px 5px transparent; }
        60% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.2); }
      }
    .: |
      ha-state-icon {
        animation: beat 1.3s ease-out infinite both;
      }
      @keyframes beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.25); }
        60% { transform: scale(1); }
      }

Play Animation (changed)

type: custom:mushroom-template-card
icon: mdi:play
icon_color: orange
primary: Play
card_mod:
  style: |
    ha-state-icon {
      animation: spin 4s steps(4) infinite;
    }

Christmas Tree Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: Christmas Tree
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            --icon-size: 20px;
            top: 16px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
          ha-state-icon {
            animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Doggy Animation (changed)

type: custom:mushroom-template-card
primary: Doggy
icon: mdi:dog
icon_color: brown
card_mod:
  style: |
      ha-state-icon {
        animation: huh 4s ease infinite;
        transform-origin: 50% 60%;
      }
      @keyframes huh {
        0%, 10%, 75%, 100% { transform: rotate(0deg); }
        15% { transform: rotate(-25deg); }
        30%, 35% { transform: rotate(-40deg); }
        50% { transform: rotate(12deg); }
        65% { transform: rotate(-8deg); }
      }

Updated Posts
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5

[paddy0174 (Patrick)]

Sorry Dimitri, but I want to like your post, as you are doing a great job! And btw. I already liked the original posts from @rhysb when I first read them

It’s really great, that you do give credit, where credit is due, but you do invest work and time here as well, so your work should be valued as well! Valuing the work of @rhysb doesn’t mean, your’s shouldn’t be valued!

Btw. you do not happen to know a good vacuum map card, that fits the mushroom design, do you?

[dimitri.landerloos]

Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.

Mushroom Animations - Part 4

Even More Mushroom Card Icon Animations

HA Animation (changed)

type: custom:mushroom-template-card
icon: mdi:home-assistant
icon_color: blue
primary: Home Assistant
card_mod:
  style: |
    ha-state-icon {
      animation: boing 3s ease infinite;
      transform-origin: 50% 90%;
    }
    @keyframes boing {
      0% { transform: scale3d(1, 1, 1); }
      7% { transform: scale3d(1.25, 0.75, 1); }
      10% { transform: scale3d(0.75, 1.25, 1); }
      12% { transform: scale3d(1.15, 0.85, 1); }
      16% { transform: scale3d(0.95, 1.05, 1); }
      19% { transform: scale3d(1.05, 0.95, 1); }
      25% { transform: scale3d(1, 1, 1); }
    }

Surprise Animation (changed)

type: custom:mushroom-template-card
icon: mdi:gift
icon_color: deep-orange
primary: Surprise
card_mod:
  style: |
    ha-state-icon {
      animation: surprise 3s ease infinite;
    }
    @keyframes surprise {
      0%, 20%, 100% { transform: translateY(0); }
      2.5% { transform: translateY(-6px) rotate(-14deg); }
      5% { transform: translateY(-6px) rotate(11deg); }
      7.5% { transform: translateY(-6px) rotate(-8deg); }
      10% { transform: translateY(-6px) rotate(5deg); }
      12.5% { transform: translateY(0); }
      15% { transform: translateY(-3px) }
    }

Ring Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:phone-classic
    icon_color: light-green
    primary: Ring
    card_mod:
      style: |
        ha-state-icon {
          clip-path: polygon(0 100%, 100% 100%, 100% 67%, 66% 39%, 66% 25%, 34% 25%, 34% 40%, 0 68%);
        }
  - type: custom:mushroom-template-card
    icon: mdi:phone-hangup
    icon_color: light-green
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            top: -4px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: ring 1s ease infinite;
          }
          @keyframes ring {
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-4px) rotate(-27deg); }
            20% { transform: translateY(-4px) rotate(21deg); }
            30% { transform: translateY(-4px) rotate(-15deg); }
            40% { transform: translateY(-4px) rotate(9deg); }
            60% { transform: translateY(-2.4px); }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Marker Animation (changed)

type: custom:mushroom-template-card
icon: mdi:map-marker
icon_color: red
primary: Marker
card_mod:
  style: |
    ha-state-icon {
      animation: boing 3s ease infinite;
      transform-origin: 50% 90%;
    }
    @keyframes boing {
      0% { transform: scale3d(1, 1, 1); }
      7% { transform: translateY(-4px) scale3d(0.75, 1.25, 1); }
      10% { transform: scale3d(1.25, 0.75, 1); }
      12% { transform: translateY(-2px) scale3d(0.85, 1.15, 1); }
      16% { transform: scale3d(1.05, 0.95, 1); }
      19% { transform: scale3d(0.95, 1.05, 1); }
      25% { transform: scale3d(1, 1, 1); }
    }

Beat Animation (changed)

type: custom:mushroom-template-card
primary: Beat
icon: mdi:speaker
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      animation: beat 1.3s ease-out infinite both;
      transform-origin: 50% 60%;
    }
    @keyframes beat {
      0% { transform: scale(1); }
      10% { transform: scale(1.1); }
      17% { transform: scale(1.05); }
      33% { transform: scale(1.25); }
      60% { transform: scale(1); }
    }

Door Animation (changed)

type: custom:mushroom-template-card
icon: mdi:door
icon_color: brown
primary: Door
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        perspective: 45px;
      }
    .: |
      ha-state-icon {
        animation: open 6s ease-in-out infinite;
        transform-origin: 30%;
      }
      @keyframes open {
        0%, 66% { transform: rotateY(0deg); }
        33% { transform: rotateY(-120deg); }
      }

Bounce Animation (changed)

type: custom:mushroom-template-card
icon: mdi:tennis-ball
icon_color: amber
primary: Bounce
card_mod:
  style: |
    ha-state-icon {
      animation: bounce 0.6s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
      transform-origin: 50% 100%;
    }
    @keyframes bounce { 
      0%, 100% { transform: translateY(0px) scaleY(0.9); }
      80% { transform: translateY(-3px); }
    }

Ghost Animation (changed)

type: custom:mushroom-template-card
primary: Ghost
icon: mdi:ghost-outline
icon_color: grey
card_mod:
  style: |
    ha-state-icon {
      animation: drift 10s ease-in-out infinite, blink 4s infinite; 
    }
    @keyframes drift {
      0%, 100% { transform: translate(3px, 0px); }
      30% { transform: translate(-1px, 2px); }
      45% { transform: translate(1.5px, 0px); }
      75% { transform: translate(-3.2px, -3px); }
    }
    @keyframes blink {
      0%, 24%, 35%, 74%, 85%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 25% 52%, 27% 31%, 49% 31%, 49% 54%, 100% 54%, 100% 0); }
      75%  { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 49% 51%, 52% 30%, 73% 31%, 75% 52%, 100% 54%, 100% 0); }
    }

Ducky Animation (changed)

type: custom:mushroom-template-card
primary: Rubber Ducky
icon: mdi:duck
icon_color: amber
card_mod:
  style: |
    ha-state-icon {
      animation: ducky 2s ease-in-out infinite;
      transform-origin: 50% 75%;
    }
    @keyframes ducky {
      0%, 100% { transform: rotate(-15deg); }
      50% { transform: rotate(15deg); }
    }

Robot Animation (changed)

type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
card_mod:
  style: |
    ha-state-icon {
      animation: tilt 4s steps(1) infinite, blink 4s infinite; 
      transform-origin: 50% 92%;
    }
    @keyframes tilt {
      0%, 100% { transform: rotate(0deg); }
      33% { transform: rotate(8deg); }
      66% { transform: rotate(-8deg); }
    }
    @keyframes blink {
      0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
      50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
      75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
    }

Coffee Machine Animation (changed)

type: custom:mushroom-template-card
icon: mdi:coffee-maker
icon_color: brown
primary: Coffee Machine
card_mod:
  style: |
    ha-state-icon {
      animation: java 4s linear infinite;
    }
    @keyframes java {
      0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
      10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
      15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
      20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
      25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
      30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
      35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
      40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
      45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
      50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
      55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
      60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
      65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
      70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
      75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
    }

Apple Animation (changed)

type: custom:mushroom-template-card
primary: Apple
icon: mdi:food-apple
icon_color: green
card_mod:
  style: |
    ha-state-icon {
      animation: bite 4s infinite; 
    }
    @keyframes bite {
      0%, 19%, 100% { clip-path: inset(0 0 0 0); }
      20%, 39% { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 69% 62%, 74% 66%, 74% 66%, 79% 70%, 100% 75%, 100% 100%, 0 100%); }
      40%, 59%  { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%); }
      60%, 79%  { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%, 0 84%, 23% 75%, 29% 71%, 33% 66%, 35% 59%, 35% 52%, 34% 45%, 29% 40%, 23% 35%, 0 27%); }
      80%, 99%  { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%, 32% 88%, 37% 83%, 39% 76%, 39% 67%, 35% 59%, 35% 52%, 34% 45%, 29% 40%, 23% 35%, 0 27%); }
    }

Memory Animation (changed)

type: custom:mushroom-template-card
primary: Memory
icon: mdi:memory
icon_color: orange
card_mod:
  style: |
    ha-state-icon {
      animation: bit 250ms infinite; 
    }
    @keyframes bit {
      0%, 100% { clip-path: inset(0 0 0 0); }
      50% { clip-path: polygon(0% 0%, 0% 100%, 29% 100%, 30% 30%, 70% 30%, 70% 70%, 29% 70%, 29% 100%, 100% 100%, 100% 0%); }
    }

Pump Animation (changed)

type: custom:mushroom-template-card
primary: Pump
icon: mdi:water-pump
icon_color: light-blue
card_mod:
  style: |
    ha-state-icon {
      animation: drip 2s infinite; 
    }
    @keyframes drip {
      0%, 100% { clip-path: inset(0 0 0 0); }
      15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 57%, 64% 57%, 64% 100%, 0 100%); }
    }

Power Animation (changed)

type: custom:mushroom-template-card
primary: Power
icon: mdi:power
icon_color: teal
card_mod:
  style: |
    ha-state-icon {
      animation: power 1.5s infinite; 
    }
    @keyframes power {
      0%, 100% { clip-path: inset(0 0 0 0); }
      50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
    }

Garage Animation (changed)

type: custom:mushroom-template-card
primary: Garage
icon: mdi:garage
icon_color: amber
card_mod:
  style: |
    ha-state-icon {
      animation: door 3s steps(1) infinite alternate; 
    }
    @keyframes door {
      0% { clip-path: inset(0 0 0 0); }
      25%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 73%, 32% 73%, 31% 100%, 0 100%); }
      50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 61%, 32% 61%, 31% 100%, 0 100%); }
      75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 48%, 32% 48%, 31% 100%, 0 100%); }
    }

Coffee Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:coffee
    icon_color: brown
    primary: Coffee
    card_mod:
      style: |
        ha-state-icon {
          transform: scaleY(0.8);
          transform-origin: 50% 100%;
        }
  - type: custom:mushroom-template-card
    icon: mdi:pot-steam
    icon_color: brown
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            top: -2px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: steam 2s ease-in infinite;
            clip-path: inset(0 0 61% 0);
          }
          @keyframes steam {
            0%, 100% { opacity: 1; }
            80% { opacity: 0; }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Auto Fix Animation (changed)

type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: Auto Fix
card_mod:
  style: |
    ha-state-icon {
     animation: sparkle 1.8s linear infinite, kadabra 1.8s ease-in-out infinite;
     transform-origin: 10% 90%
    }
    @keyframes sparkle {
      0%, 69%, 74%, 79%, 85% { clip-path: inset(0 0 0 0); }
      70% { clip-path: polygon(0 100%, 0 76%, 75% 0, 100% 0, 100% 100%); }
      75% { clip-path: polygon(0 100%, 0 0, 39% 0, 100% 62%, 100% 100%); }
      80% { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 26%, 25% 100%); }
    } 
    @keyframes kadabra {
      0%, 65%, 100% { transform: rotate(-15deg); }
      70% { transform: rotate(20deg); }
      75% { transform: rotate(15deg); }
      80% { transform: rotate(25deg); }
    }

Grinder Animation (changed)

type: custom:mushroom-template-card
icon: mdi:blender
icon_color: orange
primary: Grinder
card_mod:
  style: |
    ha-state-icon {
      animation: shake 400ms ease-in-out infinite;
      transform-origin: 50% 90%;
      clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 33% 62%);
    }
    @keyframes shake {
      0%, 100% { transform: rotate(3deg); }
      50%  { transform: rotate(-3deg); }
    }

Solar Panel Animation (changed)

type: custom:mushroom-template-card
icon: mdi:solar-power-variant
icon_color: amber
primary: Solar Panel
card_mod:
  style: |
    ha-state-icon {
      animation: rays 2s infinite;
    }
    @keyframes rays {
      0%, 100% { clip-path: inset(0 0 0 0); }
      80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
    }

Light Bulb Animation (changed)

type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: amber
primary: Light Bulb
card_mod:
  style: |
    ha-state-icon {
      animation: illumination 2s infinite;
    }
    @keyframes illumination {
      0%, 100% { clip-path: inset(0 0 0 0); }
      80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
    }

Eureka Animation (changed)

type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: orange
primary: Eureka
card_mod:
  style: |
    ha-state-icon {
      animation: eureka 1.8s infinite;
    }
    @keyframes eureka {
      0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%, 53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45% 76%, 56% 76%, 54% 100%); }
      10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
      50% { transform: translateY(-2px) }
    }

Trash Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    primary: Trash
    card_mod:
      style: |
        ha-state-icon {
          clip-path: inset(26% 0 0 0);
        }
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            top: 0.3px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: lid 1s ease infinite;
            clip-path: inset(0 0 75% 0);
            transform-origin: 50% 25%;
          }
          @keyframes lid {
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-5px) rotate(-37deg); }
            20% { transform: translateY(-5px) rotate(31deg); }
            30% { transform: translateY(-5px) rotate(-25deg); }
            40% { transform: translateY(-5px) rotate(19deg); }
            60% { transform: translateY(-3px); }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Heat Pump Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:heat-pump-outline
    icon_color: deep-purple
    primary: Heat Pump
    card_mod:
      style: |
        ha-state-icon {
          clip-path: polygon(0% 0%, 0% 100%, 23% 100%, 23% 23%, 78% 22%, 77% 78%, 23% 78%, 22% 100%, 100% 100%, 100% 0%);
        }
  - type: custom:mushroom-template-card
    icon: mdi:heat-pump-outline
    icon_color: deep-purple
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            position: absolute;
            animation: spin 2s linear infinite;
            clip-path: circle(27.3% at 50% 50%);
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Air Purifier Animation (changed)

type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: cyan
primary: Air Purifier
card_mod:
  style: |
    ha-state-icon {
      animation: air 1s infinite;
    }
    @keyframes air {
      0%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
      75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
      50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
    }

Calendar Clock Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    icon_color: purple
    primary: Calendar Clock
    card_mod:
      style: |
        ha-state-icon {
          clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
        }
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    icon_color: purple
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: spin 1s linear infinite;
            transform-origin: 67% 67%;
            clip-path: circle(17% at 67% 67%);
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

CRT Animation (changed. i did also change the if statement structure here because i find this method easier to read and trouble shoot.)

type: custom:mushroom-template-card
primary: CRT
entity: switch.television
icon: mdi:television-classic
icon_color: '{{ ''orange'' if is_state(entity, ''on'') }}'
card_mod:
  style: |
      ha-state-icon {
      {% if is_state(config.entity, 'on') %}
        animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;
      {% else %}
        animation: tube-off 2s linear forwards;
      {% endif %}
      }
      @keyframes tube-off {
        1%, 15% { transform: scale(1, 0.2); }
        40%  { transform: scale(0.2); opacity: 1; }
        100%  { transform: scale(0.2); opacity: 0; }
      }
      @keyframes tube-on {
        0% { transform: scale(0.2); opacity: 0; }
        5%  { transform: scale(1, 0.2); opacity: 0.3; }
        15%  { transform: scale(1); opacity: 0.4; }
        100%  { transform: scale(1); opacity: 1; }
      }
      @keyframes flicker {
        0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
        32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 1; }
      }

Microwave Animation (changed)

type: custom:mushroom-template-card
icon: mdi:microwave
icon_color: blue
primary: Microwave
card_mod:
  style: |
    ha-state-icon:before {
      content: "";
      position: absolute;
      width: 25%;
      height: 25%;
      margin: 10%;
      animation: cook 1s linear infinite;
    }
    @keyframes cook { 
      0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
      33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
      66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
    }

Controlling the Animation in your Card

The animations can be controlled using a Jinja Template condition on the animation command.

For example if I wanted an animation when my coffee machine is on I would use an if statement like this:

{{ 'animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}

Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening the {% else %} is technically not even required.

{% if is_state(config.entity, 'on') %}
  animation: java 4s linear infinite;
{% else %}

{% endif %}

The complete card would look like this:

Coffee Machine Card (new if statements and structure changed)

type: custom:mushroom-template-card
entity: switch.coffee_machine
icon: mdi:coffee-maker
icon_color: '{{ ''brown'' if is_state(entity, ''on'') }}'
primary: Coffee Machine
card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, 'on') %}
        animation: java 4s linear infinite;
      {% else %}

      {% endif %}
    }
    @keyframes java {
      0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
      10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
      15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
      20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
      25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
      30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
      35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
      40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
      45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
      50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
      55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
      60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
      65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
      70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
      75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
    }

Or if I wanted to have the dryer animate when the load is over 4w I would do this:

{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}

Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening the {% else %} is technically not even required.

{% if states(sensor.dryer_power) | float > 4  %}
  animation: shake 400ms ease-in-out infinite, drum 1s infinite;
{% else %}

{% endif %}

The complete card would look like this:

Dryer Card (new if statements and structure changed)

type: custom:mushroom-template-card
entity: switch.dryer
icon: mdi:tumble-dryer
icon_color: '{{ ''teal'' if states(''sensor.dryer_power'') | float > 4 }}'
primary: Dryer
card_mod:
  style: |
    ha-state-icon {
      transform-origin: 50% 65%;
      {% if states('sensor.dryer_power') | float > 4 %}
        animation: shake 400ms ease-in-out infinite, drum 1s infinite;
      {% else %}

      {% end if %}
    }
    @keyframes shake {
      0%, 100% { transform: rotate(4deg); }
      50%  { transform: rotate(-4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
    }

You will need to add the if condition for each animation:, --icon-animation: or --shape-animation: command in the card.

Added by Dimitri.
This is not true if you complete the if statements in the way that i have showed. that is unless you need the animations to be based on different conditions.

Using the Animations with Tile Card

The structure of the new Tile Card is very similar to the Mushroom Cards, so it is easy to use these animations with it.

Mushroom Card (changed)

card_mod:
  style: |
    ha-state-icon {
    }

Tile Card (changed)

card_mod:
  style:
    ha-tile-icon$: |
      ha-icon {
      }

Animated Tile Card (changed)

type: tile
entity: fan.bathroom_fan
color: green
card_mod:
  style:
    ha-tile-icon$: |
      ha-icon {
        animation: rotate 1s linear infinite;
      }
      @keyframes rotate {
         100% { transform: rotate(360deg); }
      }

Updated Posts
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5

[dimitri.landerloos]

Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.

Mushroom Animations - Part 5

Mushroom Chip Animations

Chip Animated Scene (changed)

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:snail
    icon_color: brown
  - type: template
    icon: mdi:flower
    icon_color: amber
  - type: template
    icon: mdi:butterfly
    icon_color: cyan
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: bump 10s infinite;
        transform-origin: 50% 100%;
      }
      @keyframes bump {
        0% { transform: translateX(0); }
        1% { transform: translateX(-0.6px) rotate(-9deg); }
        2% { transform: translateX(0.5px) rotate(7deg); }
        3% { transform: translateX(-0.3px) rotate(-5deg); }
        4% { transform: translateX(0.2px) rotate(3deg); }
        5% { transform: translateX(0); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: slip 0.5s linear infinite alternate;
        transform-origin: 100% 100%;
      }
      @keyframes slip {
        from { transform: scale(1.05, 0.9);}
        to { transform: scale(0.9, 1.05); }
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        animation: bump 10s infinite;
        transform-origin: 50% 100%;
      }
      @keyframes bump {
        50% { transform: translateX(0); }
        51% { transform: translateX(-0.6px) rotate(-9deg); }
        52% { transform: translateX(0.5px) rotate(7deg); }
        53% { transform: translateX(-0.3px) rotate(-5deg); }
        54% { transform: translateX(0.2px) rotate(3deg); }
        55% { transform: translateX(0); }
      }
    mushroom-template-chip:nth-child(4)$: |
      ha-state-icon {
        animation: flutter 5s infinite alternate;
      }
      @keyframes flutter {
        0% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg) scalex({{ range(3, 7) | random / 10 }}); }
        100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      }
    .: |
      .chip-container {
        background: radial-gradient(circle, rgba(var(--rgb-light-blue), 0.1) 0%, transparent 100%);
        border-bottom: 3px dotted rgba(var(--rgb-green));
        border-radius: 20%;
        box-shadow: 0 5px 1px 0.1px rgba(var(--rgb-green), 0.2)
      }
      mushroom-template-chip:nth-child(2) {
        animation: slide 10s ease-in-out infinite;
      }
      @keyframes slide {
        0% { transform: translate(0px, 0px) rotateY(0deg); }
        50% { transform: translate(100px, 0px) rotateY(0deg); }
        50.1% { transform: translate(100px, 0px) rotateY(180deg); }
        100% { transform: translate(0px, 0px) rotateY(180deg); }
      }
      mushroom-template-chip:nth-child(3) {
          transform: translate(100px);
      }
      mushroom-template-chip:nth-child(4) {
          animation: by {{ range(5, 15) | random }}s ease infinite;
      }
      @keyframes by {
        0% { transform: translate(100px, 0px); }
        50% { transform: translate({{ range(110, 150) | random }}px, 0px); }
        100% { transform: translate(100px, 0px); }
      }

All of the below info regarding adding animations to chips is still true.

Adding Animations to Chips

Adding an animation to a Mushroom Chip is a bit more complicated than a normal Mushroom Card. You have the Chips ‘parent’ and multiple Chip ‘children’. The card_mod can be applied differently to each.

To the Chip

The simplest method is to add the card_mod to the Chip. The disadvantage of doing this is that we can’t address the icon directly, so animations such as clip-path will not work and we can’t have any text on the Chip. This method also breaks the GUI editor of the Chips, so you have to configure with YAML.

Chip Animation (unchanged)

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: |
        .content {
          animation: boing 3s ease infinite;
          transform-origin: 50% 90%;
        }
        @keyframes boing {
          0% { transform: scale3d(1, 1, 1); }
          7% { transform: scale3d(1.25, 0.75, 1); }
          10% { transform: scale3d(0.75, 1.25, 1); }
          12% { transform: scale3d(1.15, 0.85, 1); }
          16% { transform: scale3d(0.95, 1.05, 1); }
          19% { transform: scale3d(1.05, 0.95, 1); }
          25% { transform: scale3d(1, 1, 1); }
        }       
  - type: template
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: |
        .content {
          animation: spin 3s ease 1.5s infinite;
        }
        @keyframes spin {
          100% { transform: rotate(360deg); }
        } 

To the Chips

The more complex but correct method is to add the card_mod to the Chips (parent) and then address each Chip (child). This is done by referencing the mushroom-<chip-type>-chip:nth-child(x) where x is the number of the Chip and <chip-type> is type of Chip, such as template, entity, light etc. So, if I wanted to reference the 5th Entity Chip I would use mushroom-entity-chip:nth-child(5) or the 2nd Template Chip mushroom-template-chip:nth-child(2). The functionality of the GUI editor is retained with this method.

Chips Animation (changed)

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    content: Mushroom
    icon: mdi:mushroom
    icon_color: red
  - type: light
    entity: light.rocket_man
    icon: mdi:rocket-launch
    name: Rocket Man
    content_info: name
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: boing 3s ease infinite;
        transform-origin: 50% 90%;
      }
      @keyframes boing {
        0% { transform: scale3d(1, 1, 1); }
        7% { transform: scale3d(1.25, 0.75, 1); }
        10% { transform: scale3d(0.75, 1.25, 1); }
        12% { transform: scale3d(1.15, 0.85, 1); }
        16% { transform: scale3d(0.95, 1.05, 1); }
        19% { transform: scale3d(1.05, 0.95, 1); }
        25% { transform: scale3d(1, 1, 1); }
      }       
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: spin 3s ease 1.5s infinite;
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      }       
    mushroom-light-chip:nth-child(3)$: |
      ha-state-icon {
        {{ 'animation: thrust 100ms infinite, motion 3s ease-in-out infinite;' if is_state('light.rocket_man', 'on') }}
      }
      @keyframes thrust {
        0% { clip-path: polygon(0 0, 0 47%, 22% 57%, 28% 63%, 0 91%, 11% 100%, 37% 73%, 45% 77%, 55% 100%, 100% 100%, 100% 0%); }
        33% { clip-path: polygon(0 0, 0 47%, 24% 59%, 42% 76%, 54% 100%, 100% 100%, 100% 0); }
        66% { clip-path: polygon(0 0, 0 92%, 28% 64%, 36% 72%, 9% 100%, 100% 100%, 100% 0%); }
      }
      @keyframes motion {
        0%, 100% { transform: translateY(-2px) translateX(-3px); }
        50% { transform: translateY(3px) translateX(2px); }
      }

Even More Mushroom Card Icon Animations

Monitor Animation (changed)

type: custom:mushroom-template-card
icon: mdi:monitor
icon_color: purple
primary: Monitor
card_mod:
  style: |
    ha-state-icon:before {
      content: "";
      position: absolute;
      width: 40%;
      height: 30%;
      margin: 6%;
      animation: refresh 300ms linear infinite;
    }
    @keyframes refresh { 
      0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
      25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
      50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
      75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
      100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
    }

Email Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:email
    icon_color: orange
    primary: Email
    card_mod:
      style: |
        ha-state-icon {
          animation: email 4s infinite;
        }
        @keyframes email {
          0%, 32%, 100% { opacity: 1; }
          33%, 99% { opacity: 0; }
        }
  - type: custom:mushroom-template-card
    icon: mdi:email-open
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: email-open 4s infinite;
          }
          @keyframes email-open {
            0%, 32%, 100% { opacity: 0; }
            33%, 65% { opacity: 1; }
            66% { opacity: 0; }
          }
  - type: custom:mushroom-template-card
    icon: mdi:email-newsletter
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
          ha-state-icon {
            animation: email-newsletter 4s infinite;
          }
          @keyframes email-newsletter {
            0%, 65% { opacity: 0; }
            66% { opacity: 1; }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Email #2 Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:email
    icon_color: orange
    primary: 'Email #2'
    card_mod:
      style: |
        ha-state-icon {
          animation: email 2s infinite;
        }
        @keyframes email {
          0%, 49%, 100% { opacity: 1; }
          50%, 99% { opacity: 0; }
        }
  - type: custom:mushroom-template-card
    icon: mdi:email-open
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: email-open 2s infinite;
          }
          @keyframes email-open {
            0%, 49%, 100% { opacity: 0; }
            50%, 99% { opacity: 1; }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Christmas Tree #2 Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: 'Christmas Tree #2'
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:grain
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
          ha-state-icon {
            animation: flash 2s steps(1) infinite, lights 2s infinite;
            clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
          }
          @keyframes flash {
            50% { transform: rotateY(180deg); }
          }
          @keyframes lights {
            0%, 100% {color: rgb(var(--rgb-red)); }
            6.25% { color: rgb(var(--rgb-deep-orange)); }
            12.5% { color: rgb(var(--rgb-orange)); }
            18.75% { color: rgb(var(--rgb-amber)); }
            25% { color: rgb(var(--rgb-yellow)); }
            31.25% { color: rgb(var(--rgb-lime)); }
            37.5% { color: rgb(var(--rgb-light-green)); }
            43.75% { color: rgb(var(--rgb-green)); }
            50% { color: rgb(var(--rgb-teal)); }
            56.25% { color: rgb(var(--rgb-cyan)); }
            62.5% { color: rgb(var(--rgb-light-blue)); }
            68.75% { color: rgb(var(--rgb-blue)); }
            75% { color: rgb(var(--rgb-indigo)); }
            81.25% { color: rgb(var(--rgb-deep-purple)); }
            87.5% { color: rgb(var(--rgb-purple)); }
            93.75% { color: rgb(var(--rgb-pink)); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            --icon-size: 18px;
            top: 18px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -198px;
          }
          ha-state-icon {
            animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

3D Printing Animation (changed)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:printer-3d-nozzle
    icon_color: cyan
    primary: 3D Printing
    card_mod:
      style: |
        ha-state-icon {
          clip-path: inset(83% 72% 0 0);
        }
        ha-card {
          --ha-card-border-width: 0;
        }
  - type: custom:mushroom-template-card
    icon: mdi:printer-3d-nozzle
    icon_color: cyan
    primary: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
            --ha-card-border-width: 0;
          }
          ha-state-icon {
            animation: print 1s linear infinite alternate;
          }
          @keyframes print {
            0% { transform: translateX(4px); }
            30% { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 26%); }
            100% { transform: translateX(-4px); clip-path: polygon(0 0, 100% 0%, 100% 100%, 40% 100%, 0 26%); }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

3D Printer Animation (changed)

type: custom:mushroom-template-card
primary: 3D Printer
icon: mdi:printer-3d
icon_color: light-blue
card_mod:
  style: |
    ha-state-icon {
      animation: print 2s infinite;
    }
    @keyframes print {
      0%, 100% { clip-path: polygon(0 0, 0 51%, 20% 51%, 51% 33%, 81% 53%, 100% 53%, 100% 0); }
      10% { clip-path: polygon(0 0, 0 100%, 49% 100%, 85% 83%, 49% 98%, 50% 89%, 51% 82%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      20% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 56% 79%, 51% 83%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      30% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      40% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      50% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      60% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 55% 69%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      70% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      80% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 50% 50%, 51% 37%, 31% 44%, 30% 35%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
      90% { clip-path: polygon(0 0, 0 100%, 100% 100%, 77% 51%, 67% 42%, 64% 34%, 56% 34%, 50% 36%, 39% 40%, 31% 44%, 30% 35%, 41% 33%, 85% 53%, 100% 52%, 100% 0); }
    }

Auto Fix #2 Animation (changed)

type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: 'Auto Fix #2'
card_mod:
  style: |
    ha-state-icon {
      animation: sparkle 2s linear infinite, kadabra 2s ease-in-out infinite;
     transform-origin: 10% 90%
    }
    @keyframes sparkle {
      0%, 68%, 100% { clip-path: polygon(0% 100%, 1% 75%, 56% 22%, 80% 43%, 26% 100%); }
      69%, 74%, 79%, 85% { clip-path: inset(0 0 0 0); }
      70% { clip-path: polygon(0 100%, 0 76%, 75% 0, 100% 0, 100% 100%); }
      75% { clip-path: polygon(0 100%, 0 0, 39% 0, 100% 62%, 100% 100%); }
      80% { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 26%, 25% 100%); }
    } 
    @keyframes kadabra {
      0%, 65%, 100% { transform: rotate(-15deg); }
      70% { transform: rotate(20deg); }
      75% { transform: rotate(15deg); }
      80% { transform: rotate(25deg); }
    }

Vroom Animation (changed)

type: custom:mushroom-template-card
icon: mdi:car-hatchback
icon_color: red
primary: Vroom
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        clip-path: inset(0 0 0 0);
      }
    .: |
      ha-state-icon {
        animation: vroom 2s ease-in-out infinite;
      }
      @keyframes vroom {
        49% { opacity: 1;}
        50% { transform: translate(32px); opacity: 0; }
        51% { transform: translate(-32px); opacity: 0; }
        52% { opacity: 1; }
      }

Double Garage Animation (changed)

type: custom:mushroom-template-card
primary: Double Garage
icon: mdi:garage-variant
icon_color: amber
card_mod:
  style: |
    ha-state-icon {
      animation: door 3s steps(1) infinite alternate; 
    }
    @keyframes door {
      0% { clip-path: inset(0 0 0 0); }
      25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
      50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
      75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
    }

Updated Posts
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5

[msbjr88 (Michael)]

Does anyone see what is wrong here? The idea is to get the icon to wobble and the background of the card to be red if the state is unlocked. I have this working in another version but I was unable to get the shape color gone.

type: custom:mushroom-template-card
layout: vertical
secondary: |-
  {% if is_state(entity, 'unlocked') %}
  UNLOCKED
  {% else %}
  LOCKED
  {% endif %}
entity: lock.front_door_lock
primary: |
  Front Door
icon_color: |
  {% if is_state(entity, 'unlocked') %}
  red
  {% else %}
  green
  {% endif %}
icon: |
  {% if is_state(entity, 'unlocked') %}
  mdi:lock-open
  {% else %}
  mdi:lock
  {% endif %}
tap_action:
  action: more-info
hold_action:
  action: toggle
fill_container: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color:;
        --icon-size: 60px;
        --icon-symbol-size: 50px
      }
  .: |
    ha-state-icon {
      {{'animation: wobbling 0.7s linear infinite alternate;' if is_state('lock.front_door_lock', 'unlocked') }}
    }
    @keyframes wobbling {
      0% {transform: rotate(-50deg);}
      100% {transform: rotate(50deg);}
    }
    ha-card {

    background-color: {{ 'rgba(255, 0, 0, 0.4)' if
    is_state('lock.front_door_lock', 'unlocked') else 'rgba(0, 131, 0, .4)'}};
      height:161px !important;
    }

[dimitri.landerloos]

Only issue is your .: | placement. I also added the word none to your --shape-color entry. But i honestly dont think that this matters

type: custom:mushroom-template-card
layout: vertical
secondary: |-
  {% if is_state(entity, 'unlocked') %}
  UNLOCKED
  {% else %}
  LOCKED
  {% endif %}
entity: lock.front_door_lock
primary: |
  Front Door
icon_color: |
  {% if is_state(entity, 'unlocked') %}
  red
  {% else %}
  green
  {% endif %}
icon: |
  {% if is_state(entity, 'unlocked') %}
  mdi:lock-open
  {% else %}
  mdi:lock
  {% endif %}
tap_action:
  action: more-info
hold_action:
  action: toggle
fill_container: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none;
        --icon-size: 60px;
        --icon-symbol-size: 50px
      }
    .: |
      ha-state-icon {
        {{'animation: wobbling 0.7s linear infinite alternate;' if is_state('lock.front_door_lock', 'unlocked') }}
      }
      @keyframes wobbling {
        0% {transform: rotate(-50deg);}
        100% {transform: rotate(50deg);}
      }
      ha-card {

      background-color: {{ 'rgba(255, 0, 0, 0.4)' if
      is_state('lock.front_door_lock', 'unlocked') else 'rgba(0, 131, 0, .4)'}};
        height:161px !important;
      }

[dimitri.landerloos]

Appreciate the sentiment but updating them takes 100 x less time than coming up with the animations in the first place

I dont know a good vacuum map card unfortunately. I dont have a robo vacuum myself so i havent done much looking to be honest…

[msbjr88 (Michael)]

What editor do you use? Because visually the placement looks correct but when I copy and pasted your code, it worked fine.

[dimitri.landerloos]

Just the built in editor my friend.

How the indenting is meant to look.

How yours looked.

Its not huge but there is a definite difference

Basically think of the fact that the .: | should start at the same place you would place any other entry under style: see how in my example the mushroom-shape-icon$: | and the .: | start at the same indentation?

[remon1496 (Rémon)]

I would love to see some guru post the sollution here, I’m also looking into this.

[MrGrey]

I’m no guru, but I was looking for this a few days ago to show when a door was opened/closed. I’m not sure if it’s what you’re looking for, but I put…

{% if is_state(config.entity, 'off') %}
Closed {{ relative_time(states.binary_sensor.basement_door_state.last_changed) }} ago
{%else%}
Opened {{ relative_time(states.binary_sensor.basement_door_state.last_changed) }} ago
{%endif%}

… in and it works for me.

MrGrey.

[remon1496 (Rémon)]

The following worked for me:

{{ relative_time(states.media_player.sony_kd_65ag8.last_updated) | replace("hours", "uur") | replace("minute", "minuut") | replace("minutes", "minuten") | replace("second", "seconde") | replace("seconds", "seconden") }} geleden

I needed some translations because the relative time comes from the back-end. Please edit to your needs.

[remon1496 (Rémon)]

Nice, I also posted my sollution below. Thanks for the reply.

[dimitri.landerloos]

Fyi @MrGrey & @remon1496

What you have both posted works just fine but isnt super accurate. For example i have a sensor that states last changed 2 days 1 hour 55m ago. With you templates it only gives me 2 days ago.

I prefer the below. While it is long it also gives better accuracy. But of course to each their own

{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.bedroom_wardrobe_right_contact.last_changed)) | int  %}
  {%- set minutes = ((time % 3600) // 60) %}
  {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
  {%- set hours = ((time % 86400) // 3600) %}
  {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
  {%- set days = (time // 86400) %}
  {%- set days = '{}d '.format(days) if days > 0 else '' %}
  {{ 'Less than 1 min' if time < 60 else days + hours + minutes }}

You can then define however you want to call the days hours minutes. Right now it just does 2d 1h 55m.

[hsec]

@Boostin4HP What card are you using for the cameras?

[Boostin4HP]

They’re picture entity cards but when you touch one it opens a larger popup.

[galaxy]

GitHub - troinine/hass-config: My Home Assistant configuration