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

[LiQuid_cOOled]

You need to rename the animation something other than pulse. Pulse is a standard Mushroom animation and appears to conflict with your keyframes css.

code with renamed animation to test

type: vertical-stack
cards:
  - type: custom:button-card
    icon: mdi:cog-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mushroom/net
    entity: sensor.cpu_temperature
    show_state: true
    name: ' '
    custom_fields:
      btn:
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              icon: mdi:pi-hole
              entity: input_boolean.pi_hole_timer
              card_mod:
                style: |
                  ha-card {
                    --chip-background: transparent;
                    padding: 5px !important;
                    border-radius: 100px !important;
                    color: yellow !important;
                    border: none !important;
                    {% if is_state('input_boolean.pi_hole_timer', 'on') %}
                      opacity: 1 !important;
                      animation: test 2s infinite !important;
                    {% else %}
                      opacity: 0.4 !important;
                      animation: none !important;
                    {% endif %}
                  }
                  @keyframes test {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.2); }
                    100% { transform: scale(1); }
                  }
            - type: template
              tap_action:
                action: toggle
              icon: mdi:fan
              entity: sensor.argon_one_addon_fan_speed
              card_mod:
                style: |
                  ha-card {
                    --chip-background: transparent;
                    padding: 5px!important;
                    border-radius: 100px!important;
                    color: yellow!important;
                    border: none!important;
                    {% set fan_speed = states('sensor.argon_one_addon_fan_speed') %}
                    {% if fan_speed != 'unknown' and fan_speed | int > 0 %}
                      opacity: 1 !important;
                      animation: spin 1s linear infinite !important;
                     {% else %}
                      opacity: 0.4 !important;
                      animation: none !important;
                    {% endif %}
                  }
                  @keyframes spin {
                    100% { transform: rotate(360deg); }
                  }
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(135deg, rgba(220, 20, 60, 1) 0%, rgba(0, 0, 0, 1) 100%);
          border: transparent!important;
          color: white;
          box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
          padding: 20px;
        }
    styles:
      grid:
        - grid-template-areas: '"n btn" "s btn" "i btn"'
        - grid-template-columns: 1fr min-content
        - grid-template-rows: min-content min-content 1fr
      card:
        - padding: 10px 2px 91px 10px
      img_cell:
        - justify-content: start
        - position: absolute
        - width: 150px
        - height: 150px
        - left: 0
        - bottom: 0
        - margin: 0 0 -30px -30px
        - background: transparent;
        - border-radius: 500px
      icon:
        - width: 60px
        - color: black
        - opacity: 1
      custom_fields:
        btn:
          - justify-content: end
          - align-self: start
      name:
        - justify-self: start
        - align-self: start
        - font-size: 18px
        - font-weight: 500
        - color: white
      state:
        - min-height: 80px
        - justify-self: start
        - align-self: start
        - font-size: 14px
        - opacity: 0.7
columns: 3

[Faecon (Jo)]

I have a mushroom template card , where I want the background a litlle darker. I have this cardmod
but it is not working. what is wrong here ?

            card_mod:
              style: 
                .: | 
                  ha-card {
                    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
                  }
                  :host {
                  background: rgba(rgb({{ states("input_text.kleur_iconen")}}), 0.2);
                  }  

[Frosty]

I am sure you could have worked it out on your own.

card_mod:
  style: | 
    ha-card {
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
      background: rgba(rgb({{ states("input_text.kleur_iconen")}}), 0.2);
    }

[Faecon (Jo)]

          - type: custom:mushroom-template-card

            primary: '{{ states(''input_text.ruimte_1'')}}'
            secondary: "{{ states('sensor.ruimte1_temperatuur') | round(1) | float(0) }} °C"

            icon: >
              {% set STRING = states('input_text.ruimte_1') %}
              {% if is_state('input_boolean.ruimte1', 'on') %} 
                mdi:lightbulb
              {% else %}
                mdi:alpha-{{STRING[0]| lower}}-circle-outline
              {% endif %}
            entity: input_boolean.ruimte1

            tap_action:
              action: navigate
              navigation_path: ruimte1
            hold_action:
              action: toggle
                  
            icon_color: >
              {% if is_state("input_boolean.ruimte1", 'on') %} 
                {{ states("input_text.kleur_iconen")}}
              {% else %}
                disabled
              {% endif %}

            fill_container: true
            layout: horizontal
            multiline_secondary: false


            card_mod:
              style: |
                ha-card {
                  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
                  background-color: blue;
                }

it is getting blue, but after half a second it is gone ( white or transparant I don’t know)

[Frosty]

try !important on the end

[Faecon (Jo)]

@Frosty

rgba(rgb({{ states("input_text.kleur_iconen")}}), 0.2);

thanks to @Frosty this is what it has to be

            card_mod:
              style: | 
                ha-card {
                  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
                  background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
                }

[Faecon (Jo)]

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: climate.eetplaats
        icon_color: "{{ states("input_text.kleur_iconen_hex")}}"

is it possible that it is not possible to use states(“input_text.kleur_iconen_hex”) ?

I have this error

invalid key: “{‘states(“input_text.kleur_iconen_hex”)’: None}” in “/config/ui_lovelace_minimalist/dashboard/views/home.yaml”, line 17, column 0

[Frosty]

try

icon_color: '{{ states(''input_select.test'') }}'
 

I take it your using a input select drop down helper with the colours

EDIT:

either will work

[Jonae]

Thanks, that worked!

[Mar1us]

fixed mine:

The important thing is the card_mod for the template-card and the chips card

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Schlafzimmer
    secondary: >-
      🌡️ {{ states('sensor.schlafzimmer_raumthermostat_temperature') | round(1)
      }} °C
    icon: mdi:bed-double
    entity: light.schlafzimmer
    tap_action:
      action: navigate
      navigation_path: schlafzimmer
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        ha-card {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --icon-size: 76px;
          margin-top: -20px !important;
          margin-left: -18px !important;
          margin-bottom: -11px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: climate.schlafzimmer_thermostat
            state_not: 'off'
        chip:
          type: template
          entity: climate.schlafzimmer_thermostat
          icon: |-
            {% if is_state(entity, 'heat') %}
              mdi:fire
            {% endif %} 
          icon_color: red
      - type: conditional
        conditions:
          - entity: binary_sensor.schlafzimmer_fenster
            state: 'on'
        chip:
          type: template
          icon_color: amber
          icon: mdi:window-open
          entity: binary_sensor.schlafzimmer_fenster
          tap_action:
            action: more-info
      - type: light
        entity: light.schlafzimmer
        content_info: none
        use_light_color: true
        icon: mdi:lightbulb
        tap_action:
          action: toggle
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 1;
          margin-top: -10px !important;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.schlafzimmer', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

[billyjoebob999]

Same problem as well. I was able to narrow it down to the following lines of code

    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.3);
        } 
        :host {
          background: rgba(var(--rgb-primary-background-color), 0.3);
          --icon-size: 80px;
          height: 76px !important;
          margin-left: -23px !important;
          margin-bottom: -10px !important;
        }

If I changed it to the following it works correctly

    multiline_secondary: false
    card_mod:
      style: |
        ha-card{
          --icon-size: 80px;
          height: 76px !important;
          margin-left: -23px !important;
          margin-bottom: -10px !important;
        }

No clue if this is the correct way to fix it but it worked for me.

[billyjoebob999]

Didn’t see this before I posted. This also worked for me.

    multiline_secondary: false
    card_mod:
      style: |
        ha-card([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        ha-card {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --icon-size: 76px;
          margin-top: -20px !important;
          margin-left: -18px !important;
          margin-bottom: -11px !important;
        }

[jkseamons]

Since 2024.07 I’ve not been able to get negative values to work with chip spacing. Positive values work, but not negative.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Entry
    secondary: |-
      🌡️ {{ state_attr('weather.home', 'temperature') }}°F |
      💦 {{ state_attr('weather.home', 'humidity') }}%
    icon: mdi:coach-lamp
    entity: light.entry_lights
    icon_color: blue
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          height: 35px !important;
          background: transparent;
          border-style: none;
          left: -25px;
          top: 5px;
          --icon-size: 75px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.front_porch_light
        icon: mdi:coach-lamp
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
      - type: template
        entity: light.permanent_outdoor_lights
        icon: mdi:led-strip-variant
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
      - type: template
        entity: binary_sensor.mail_notify
        icon: mdi:mailbox-open-up-outline
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
      - type: template
        entity: binary_sensor.door_front
        icon: mdi:door-open
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
    card_mod:
      style: |
        .chip-container {
          --chip-spacing: -10px;
        }          
    alignment: end

I’ve tried both with !important and without with no success.

[GTunney]

I am also having the same issue, reported it in the card_mod topic but had no reply

[tofrie (Tobias)]

This worked for me and fixed the padding:

    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        } 
        ha-card {
          background: rgba(var(--rgb-primary-text-color), 0.025) !important;
          height: 55px;
          width: 500px;
          position: relative;
          left: -18px;
          top: -18px;
          --spacing: 12px 10px 0 12px;
          --icon-size: 76px;
          --ha-card-border-width: 0;
        }
        mushroom-state-info {
          padding-left: 5px !important;
        }

[Dmitry3650 (Dmitry)]

Hello! help me please! how can I edit my code so as to preserve the animation of the icon but at the same time add a temperature adjustment on the side as in the second picture. I photoshopped this picture

type: custom:mushroom-template-card
entity: climate.otoplenie_zal
secondary: |
  {% if states(config.entity) == 'heat' %}
  On -
   {{state_attr(config.entity, 'temperature')}}%
  {% else %}
    off
  {% endif %}
tap_action:
  action: more-info
icon: mdi:fire
layout: vertical
icon_color: |
  {{ '#ff6f22' if is_state(config.entity, 'heat') else 'grey' }}
primary: Hall
fill_container: false
multiline_secondary: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {

       }
    .: |

      ha-state-icon {
      {% if state_attr(config.entity, 'hvac_action') ==
      'heating'  %}

        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      {% endif %} }

      ha-card {
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
        }
      @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}}; }
      }

[Faecon (Jo)]

I have an icon I want to spin. but it is not working

the state of climate.ruimte1_airco is “cool”. What is wrong ?

                card_mod:
                  style:
                    mushroom-state-info$: |
                      .container {
                        margin: 10px;
                      }
                    mushroom-shape-icon$: |
                      .shape {
                      margin-top: 0px;
                      }
                    .: |
                      ha-state-icon {
                        {{ 'animation: spin 1s linear infinite;' if not is_state('climate.ruimte1_airco','off') }}
                        }
                        @keyframes spin {
                        100% { transform: rotate(360deg); }
                        }
                      ha-card {
                        --chip-background: transparent;
                        border: none !important;
                        box-shadow: none !important;
                      }

[Spl4sh (Kevin)]

Hi @rhysb ! I have a problem with this card since the last update

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

Something like this? [Mushroom Triple Gauges] type: grid square: false columns: 3 cards: - type: custom:stack-in-card cards: - type: custom:apexcharts-card chart_type: radialBar series: - entity: sensor.processor_use_percent color: rgb(76, 175, 80) max: 100 show: legend_value: false apex_config: plotOptions: radialBar: offsetY: 0 startAngle: -108 …

Here’s how it looks on a smartphone :

Thank you in advance ! And sorry for my bad english

[dimitri.landerloos]

Like this:

type: custom:mushroom-climate-card
entity: climate.office_heating
collapsible_controls: false
show_temperature_control: true
layout: horizontal
layout_options:
  grid_columns: 4
  grid_rows: 1
icon: mdi:fire
card_mod:
  style: |
    ha-state-icon {
      {% if state_attr(config.entity, 'hvac_action') == 'heating'  %}
        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      {% endif %} 
    }
    ha-card {
      box-shadow: none;
      margin-left: -0px !important;
      margin-right: 0px !important;
      margin-bottom: 0px !important;
    }
    @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}}; }
    }

or like this:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: climate.lounge_heating
    secondary: |
      {% if states(config.entity) == 'heat' %}
        On -
       {{state_attr(config.entity, 'temperature')}}%
      {% else %}
        Off
      {% endif %}
    tap_action:
      action: more-info
    icon: mdi:fire
    layout: horizontal
    icon_color: |
      {{ '#ff6f22' if is_state(config.entity, 'heat') else 'grey' }}
    primary: Hall
    fill_container: false
    multiline_secondary: false
    card_mod:
      style: |
        ha-state-icon {
          {% if state_attr(config.entity, 'hvac_action') == 'heating'  %}
            animation: fire 3.5s infinite;
            transform-origin: 50% 85%;
          {% endif %} 
        }
        ha-card {
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
        }
        @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}}; }
        }
  - type: custom:mushroom-climate-card
    entity: climate.lounge_heating
    collapsible_controls: false
    show_temperature_control: true
    layout: horizontal
    card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }

both give the same kinda effect:

[dimitri.landerloos]

works fine for me:

type: custom:mushroom-climate-card
entity: climate.office_heating
collapsible_controls: false
show_temperature_control: true
layout: horizontal
layout_options:
  grid_columns: 4
  grid_rows: 1
icon: mdi:fire
card_mod:
  style: |
    ha-state-icon {
      {{ 'animation: spin 1s linear infinite;' if not is_state('climate.bedroom_heating','off') }}
    }
    @keyframes spin {
      100% { transform: rotate(360deg); }
    }