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

Kixx · March 26, 2024, 7:48am

My explanation was incomplete/unclear, sorry. The chips are on the correct spot. What i would like is that the word (mushroom title card) ‘Woonkamer’ is centered on the green line between the both chip cards.

LiQuid_cOOled · March 26, 2024, 8:11am

you can do it like this…

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr 1fr
      margin: 0px 0px 0px 0px
    cards:
     - type: custom:mushroom-chips-card
       chips:
        - type: action
          tap_action:
            action: navigate
            navigation_path: /dashboard-mobile/home
          hold_action:
            action: none
          double_tap_action:
            action: none
          icon: mdi:arrow-left
          card_mod: 
           style: |
             ha-card {
               top: 20px;
               --chip-background: transparent;
              box-shadow: none;
              border: none;
                          } 
     - type: custom:mushroom-title-card
       title: Woonkamer
      
       title_tap_action:
            action: none
       subtitle_tap_action:
           action: none
     - type: custom:mushroom-chips-card
       alignment: end 
       chips:
         - type: entity
           entity: sensor.time
           tap_action:
             action: none
           hold_action:
            action: none
           double_tap_action:
             action: none
           card_mod: 
            style: |
             ha-card {
               top: 20px;
               --chip-background: transparent;
               box-shadow: none;
               border: none;
                          }

roydestroy · March 26, 2024, 8:32am

I’ve been getting these animations directly from the forum post here. I don’t know what is going on. Anyway thanks again!

Dmitry3650 · March 26, 2024, 2:49pm

Friends, please help. Problem with animation stopping when the device is turned off. If you turn off the device, the animation around the icon should disappear, instead it continues its animation… How to make the animation disappear after turning off the device?

Иконки

type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: Dual
secondary: ''
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
       --shape-color: none;
       }
      .shape:after {
       content: '';
       position: absolute;
       width: inherit;
       height: inherit;
       border: 4px solid transparent;
       border-top-color: rgb(var(--rgb-deep-orange));
       border-bottom-color: rgb(var(--rgb-deep-orange));
       border-radius:50%;
       animation: spin 8s ease infinite;
       }
      @keyframes circle {
       0% {transform: rotate(0deg);}
       100% {transform:rotate(360deg);}
      }

LiQuid_cOOled · March 26, 2024, 4:11pm

Like this…

type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: Dual
secondary: ''
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
       --shape-color: none;
       }
       {% if states('input_boolean.vkliuchenie_rozetok_kukhnia') == 'on' %}
      .shape:after {
       content: '';
       position: absolute;
       width: inherit;
       height: inherit;
       border: 4px solid transparent;
       border-top-color: rgb(var(--rgb-deep-orange));
       border-bottom-color: rgb(var(--rgb-deep-orange));
       border-radius:50%;
       animation: spin 8s ease infinite;
       }
      @keyframes circle {
       0% {transform: rotate(0deg);}
       100% {transform:rotate(360deg);}
      }
       {% endif %}

jacopoventura01 · March 26, 2024, 4:23pm

hi guys I have a frontend problem in my Lovelace. I hope someone can help me.

As you can see the bottom of the chips is hidden. I think the to solve this issue is enough pull up the chips a little bit.
here the code:

  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Stanze
        secondary: null
        icon: null
        layout: horizontal
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              --card-primary-font-weight: normal;
              --card-secondary-font-weight: normal;
              --card-primary-font-size: 23px;
              --card-secondary-font-size: 15px;
              background-color: rgba(0,0,0,0);
              --ha-card-border-width: 0;
            }
                :host {
                  margin-top: 8px !important;
                  margin-bottom: 0px !important;
                }
      - type: custom:mushroom-template-card
        primary: null
        secondary: Piano Terra
        icon: null
        layout: horizontal
        tap_action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              --card-primary-font-weight: normal;
              --card-secondary-font-weight: normal;
              --card-primary-font-size: 0px;
              --card-secondary-font-size: 15px;
              background-color: rgba(0,0,0,0);
              --ha-card-border-width: 0;
              }
            :host {
                    margin-top: -15px !important;
                    margin-bottom: 15px !important;
                                              }
      - type: horizontal-stack
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Esterno
                secondary: >-
                  {{ states('sensor.salone_outside_temperature') |
                  round(0) }} °C
                icon: mdi:flower
                entity: light.gruppo_luci_esterno
                tap_action:
                  action: navigate
                  navigation_path: luci-esterne
                hold_action:
                  action: toggle
                icon_color: yellow
                fill_container: true
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    :host([dark-mode]) {
                      background: rgba(var(--rgb-primary-background-color), 0.2);
                    } 
                    :host {
                      background: rgba(var(--rgb-primary-text-color), 0.025);
                      --mush-icon-size: 90px;
                      height: 70px;
                      margin-left: -22px !important;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.motion_portico_occupancy
                        state: 'on'
                    chip:
                      type: template
                      entity: binary_sensor.motion_portico_occupancy
                      tap_action:
                        action: none
                      icon_color: null
                      icon: mdi:motion-sensor
                  - type: conditional
                    conditions:
                      - entity: light.gruppo_luci_esterno
                        state: 'on'
                    chip:
                      type: template
                      entity: light.gruppo_luci_esterno
                      tap_action:
                        action: toggle
                      icon_color: amber
                      icon: mdi:lightbulb
                  - type: template
                    entity: input_boolean.non_servo_a_nulla
                    double_tap_action:
                      action: none
                    tap_action:
                      action: navigate
                      navigation_path: macchina
                    hold_action:
                      action: none
                    icon: mdi:car-electric
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;;
                      --chip-background: none;
                      --chip-spacing: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  height: 102px;
                  {% if is_state('light.gruppo_luci_esterno', 'on') %}
                     background: rgba(255, 255, 0, 0.1);
                  {% endif %}
                }
                :host {
                        margin-top: -15px !important;
                      }
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Ingresso
                secondary: >-
                  {{ states('sensor.temp_pt_temperature') | round(0)
                  }} °C
                icon: mdi:door
                entity: light.gruppo_luci_interno_p0
                tap_action:
                  action: navigate
                  navigation_path: ingresso
                hold_action:
                  action: toggle
                icon_color: orange
                fill_container: true
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    :host([dark-mode]) {
                      background: rgba(var(--rgb-primary-background-color), 0.2);
                    } 
                    :host {
                      background: rgba(var(--rgb-primary-text-color), 0.025);
                      --mush-icon-size: 90px;
                      height: 70px;
                      margin-left: -22px !important;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.motion_scala_pt_occupancy
                        state: 'on'
                    chip:
                      type: template
                      entity: binary_sensor.motion_scala_pt_occupancy
                      tap_action:
                        action: none
                      icon_color: null
                      icon: mdi:motion-sensor
                  - type: conditional
                    conditions:
                      - entity: light.gruppo_luci_interno_p0
                        state: 'on'
                    chip:
                      type: template
                      entity: light.gruppo_luci_interno_p0
                      tap_action:
                        action: toggle
                      icon_color: amber
                      icon: mdi:lightbulb
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                      --chip-background: none;
                      --chip-spacing: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  height: 102px;
                  {% if is_state('light.gruppo_luci_interno_p0', 'on') %}
                     background: rgba(255, 165, 0, 0.1);
                  {% endif %}
                }
                :host {
                        margin-top: -15px !important;
                      }

LiQuid_cOOled · March 26, 2024, 4:34pm

Just add top: -10px to the chips cards

  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.motion_portico_occupancy
            state: 'on'
        chip:
          type: template
          entity: binary_sensor.motion_portico_occupancy
          tap_action:
            action: none
          icon_color: null
          icon: mdi:motion-sensor
      - type: conditional
        conditions:
          - entity: light.gruppo_luci_esterno
            state: 'on'
        chip:
          type: template
          entity: light.gruppo_luci_esterno
          tap_action:
            action: toggle
          icon_color: amber
          icon: mdi:lightbulb
      - type: template
        entity: input_boolean.non_servo_a_nulla
        double_tap_action:
          action: none
        tap_action:
          action: navigate
          navigation_path: macchina
        hold_action:
          action: none
        icon: mdi:car-electric
    alignment: end
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0;;
          --chip-background: none;
          --chip-spacing: 0;
          top: -10px;
        }

Dmitry3650 · March 26, 2024, 5:07pm

Thank you!!!

jacopoventura01 · March 26, 2024, 6:25pm

thank you very much!!!

Valen · March 26, 2024, 8:00pm

Hello, can anyone help with my problem? How can I remove the glow background when it is active? It is necessary for the fan icon to turn on without lighting around it. I will attach 2 screenshots. The first photo is as it is now, the second is how I want to take it, thanks in advance!

fan

type: custom:mushroom-template-card
entity: fan.ventilation_pwm_fan1
tap_action:
  action: toggle
icon: mdi:fan
icon_color: |
  {{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
  style: |
    ha-state-icon {
      
          {% set pwr = states(config.entity) %} 
          {% set perc = state_attr(config.entity,'percentage')|int %}

          {% if (perc <= 17 and pwr == 'on') %} animation: rotation 2.5s linear infinite
          {% elif (perc <= 34 and pwr == 'on') %} animation: rotation 2s linear infinite
          {% elif (perc <= 51 and pwr == 'on') %} animation: rotation 1.5s linear infinite
          {% elif (perc <= 67 and pwr == 'on') %} animation: rotation 1s linear infinite
          {% elif (perc <= 84 and pwr == 'on') %} animation: rotation .75s linear infinite
          {% elif (perc <= 100 and pwr == 'on') %} animation: rotation .5s linear infinite
          {%- else  %} animation: rotation 0s linear infinite
                
          {% endif %};
           }
        ha-card {
          background: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          #width: 75%;
        }
          @keyframes rotation {
          0% {transform: rotate(0deg);}
          100% {transform: rotate(-360deg);
          }

LiQuid_cOOled · March 26, 2024, 8:13pm

This will remove the background of the shape.

type: custom:mushroom-template-card
entity: fan.ventilation_pwm_fan1
tap_action:
  action: toggle
icon: mdi:fan
icon_color: |
  {{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
       }
    .: |
      ha-state-icon {
      
          {% set pwr = states(config.entity) %} 
          {% set perc = state_attr(config.entity,'percentage')|int %}

          {% if (perc <= 17 and pwr == 'on') %} animation: rotation 2.5s linear infinite
          {% elif (perc <= 34 and pwr == 'on') %} animation: rotation 2s linear infinite
          {% elif (perc <= 51 and pwr == 'on') %} animation: rotation 1.5s linear infinite
          {% elif (perc <= 67 and pwr == 'on') %} animation: rotation 1s linear infinite
          {% elif (perc <= 84 and pwr == 'on') %} animation: rotation .75s linear infinite
          {% elif (perc <= 100 and pwr == 'on') %} animation: rotation .5s linear infinite
          {%- else  %} animation: rotation 0s linear infinite
                
          {% endif %};
           }
        ha-card {
          background: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          #width: 75%;
        }
          @keyframes rotation {
          0% {transform: rotate(0deg);}
          100% {transform: rotate(-360deg);
          }

Valen · March 26, 2024, 8:18pm

Thank you kind person!

president75 · March 26, 2024, 9:28pm

HI,
I can’t get this animation to work.
My tv entity is “media_player.tv_samsung_58”.

What should be included in content!?

Because it does not work!?

type: custom:mushroom-template-card
icon: mdi:monitor
icon_color: purple
primary: Monitor
card_mod:
   style:
     mushroom-shape-icon$: |
       ha-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%); }
       }

Dmitry3650 · March 26, 2024, 9:43pm

Help please… I don’t understand what’s wrong with the code. The problem is that when the device is turned off, the icon continues to be active, although the code says to turn off the icon if the device turns off, what’s wrong?
fan2

type: custom:mushroom-template-card
icon: mdi:fire
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
       }
    .: |
      ha-state-icon {
        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      }
        ha-card {
          background: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          #width: 75%;
        }
      @keyframes fire {
        0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      }

roydestroy · March 26, 2024, 10:02pm

I’d like some help again please. So I have implemented some stack-in cards with chips next to template cards. In my phone it renders fine as you can see in this picture:

However, on my lady’s IPhone it renders like this:

Once I flip the screen to landscape and back to portrait the problem gets fixed. Is there anyway to create a permanent fix? Here is my code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Office
    secondary: >-
      {{ states('sensor.office_sensor_temperature') }}°C - {{
      states('sensor.office_sensor_humidity') }}%
    icon: >-
      {% if is_state('automation.auto_office_light_toggle', 'off') or
      is_state('input_boolean.of_off_blocker', 'on') %}

      mdi:pause

      {% else %}

      mdi:desktop-classic

      {%endif%}
    tap_action:
      action: navigate
      navigation_path: /lovelace-mushroom/office
    icon_color: >-
      {% if is_state('switch.sonoff_100169edd5_2', 'on')%}
        orange
      {% elif is_state('automation.auto_office_light_toggle', 'off') or
      is_state('input_boolean.of_off_blocker', 'on') %}
        red
      {%endif%}
    double_tap_action:
      action: call-service
      service: light.toggle
      target:
        entity_id: light.office_light
      data: {}
    hold_action:
      action: call-service
      service: script.of_auto_lights
      target: {}
    badge_color: >-
      {% if is_state('automation.auto_office_light_toggle', 'on') and
      is_state('input_boolean.of_off_blocker', 'off') and
      is_state('binary_sensor.office_motion_sensor_motion', 'on') %}
        orange
      {% elif is_state('binary_sensor.lumi_lumi_sensor_wleak_aq1_moisture_3',
      'on')%}
        brown
      {%endif%}
    badge_icon: >-
      {% if is_state('automation.auto_office_light_toggle', 'on') and
      is_state('input_boolean.of_off_blocker', 'off') and
      is_state('binary_sensor.office_motion_sensor_motion', 'on') %}
        mdi:walk
      {% elif is_state('binary_sensor.lumi_lumi_sensor_wleak_aq1_moisture_3',
      'on')%}
        mdi:seat
      {%endif%}
    card_mod:
      style: |
        :host {
          --ha-card-border-width: 0px;
          z-index: 1;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: sensor.amd_dpc_amd_dpc_loggeduser
            state: panag
        chip:
          type: template
          icon_color: blue
          icon: mdi:desktop-tower
    alignment: end
    card_mod:
      style: |
        ha-card {
          top: -42px;
          z-index: 0;                
        }
        :host {
          --ha-card-border-width: 0px;
        }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

LiQuid_cOOled · March 26, 2024, 10:33pm

It’s ha-state-icon not ha-icon

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%); }
    }

LiQuid_cOOled · March 26, 2024, 10:42pm

Does this work for you?

type: custom:mushroom-template-card
icon: mdi:fire
icon_color: |
   {{ 'red' if is_state(config.entity, 'on') else 'disabled' }}
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
       }
    .: |
      {% if states(config.entity) == 'on'  %}
      ha-state-icon {
        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      }
        ha-card {
          background: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          #width: 75%;
        }
      @keyframes fire {
        0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      }
      {% endif %}

Dmitry3650 · March 26, 2024, 10:45pm

Thank you very much! it works!

Valen · March 27, 2024, 1:11pm

Please help me with this problem… I can’t get the animation to work correctly. The animation is running all the time, I can’t turn it off. Or it doesn’t turn off all the time. I wrote down the conditions for the on and off state, but apparently there is an error somewhere. Help me find the error…

type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: |
  {{ 'cyan' if is_state(config.entity, 'on') else 'disabled' }}
entity: input_boolean.konditsionery
tap_action:
  action: toggle
card_mod:
  style: ''
  mushroom-shape-icon$: |
    .shape {
       background: none !important;
     }
    .: |
      {% if states(config.entity) == 'on'  %}
    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%); }
    }

Dmitry3650 · March 27, 2024, 1:51pm

Hello Friend! Yesterday you helped with the icon, thank you! but there is another problem… For this icon I am using a generic thermostat, this thermostat has a relay entity. If I specify a thermostat in the essence of the animated icon, it does not respond to changes in state. The icon only works if I specify some ordinary switch in the entity. Is there any way to adapt the entity so that it reacts to changes in the thermostat state? I wanted it like this:

Thermostat off icon gray
The thermostat is turned on, the icon has become red
The thermostat in heating mode turns on its relay and then the red icon becomes animated. Is it really possible to do this?

Heat849×780 77.9 KB

heat121614×459 30.9 KB

type: custom:mushroom-template-card
icon: mdi:fire
icon_color: |
  {{ 'red' if is_state(config.entity, 'on') else 'disabled' }}
entity: input_boolean.teplyi_pol_1
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
       }
    .: |
      {% if states(config.entity) == 'on'  %}
      ha-state-icon {
        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      }
        ha-card {
          background: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          #width: 75%;
        }
      @keyframes fire {
        0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      }
      {% endif %}