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

[flemmingss]

@cloudbr34k

|-

quick question, what does “|-” before template mean?

[Mariusthvdb (Marius)]

it’s yaml for multi-line use https://yaml-multiline.info or https://www.w3schools.io/file/yaml-multiline-strings/

[tamesch]

@Boostin4HP

- type: custom:mushroom-template-card

hi i Copied exact your code. It seems like coloring the bar is not working. May you can help me

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 42px auto 12px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.water_filter_days_remaining
        icon: mdi:air-filter
        icon_color: |
          {% set filter_days = states(entity) | int %}
          {% if filter_days < 31 %} 
            red
          {% elif filter_days < 91 %}
            orange
          {% else %}
            green
          {% endif %} 
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:bar-card
        entity: sensor.water_filter_days_remaining
        height: 42px
        min: '0'
        max: '200'
        entity_row: true
        severity:
          - color: rgb(var(--mush-rgb-green))
            from: 110
            to: 200
          - color: rgb(var(--mush-rgb-orange))
            from: 31
            to: 109
          - color: rgb(var(--mush-rgb-red))
            from: 0
            to: 30
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.water_filter_dropdown
        icon: mdi:chevron-down
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon:
              $: |
                .shape ha-icon {
                  transition: transform 0.14s !important;
                  {{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
                }
              .: |
                ha-card {
                  align-items: flex-end;
                  box-shadow: none;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: input_datetime.water_filter_replaced
        icon: mdi:calendar
        name: Last Replaced
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: sensor.water_filter_days_since_replacement
        name: Since Replaced
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: input_number.water_filter_threshold
        icon: mdi:calendar-edit
        name: Replacement Interval
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-template-card
        primary: Reset
        secondary: ''
        icon: mdi:refresh
        layout: vertical
        tap_action:
          action: call-service
          service: script.reset_water_filter_date_to_today
          data: {}
          target: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
    card_mod:
      style: |
        ha-card { 
          margin-top: -14px;
        }
card_mod:
  style: |
    ha-card {
      {{ 'height: 66px;' if is_state('input_boolean.water_filter_dropdown', 'off') }}
    }

[hiddevanbrussel]

Hello the cards I see here are great, but my design skills are beter in Adobe then do the technical stuff :). I was wondering if somebody can build this card. I have an airco which I can turn on/off with a outlet and also show the power. I like to have them bought in one card. Is this possible and how?

[tamesch]

Im sure someone else can do it better

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: switch.solar
        icon: mdi:toggle-switch
        icon_color: light-green
        content_info: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
  - type: custom:mini-graph-card
    entities:
      - sensor.solar_energy
    label: null
    show:
      labels: true
      icon: false
    color_thresholds:
      - value: 0
        color: '#c5dde3'
      - value: 5
        color: '#12c2f3'
      - value: 8
        color: '#b3f312'

[Boostin4HP]

Add the mushroom variables to your theme file.

GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace...

[Art1]

Hey, how have you removed the default dashboard bar at the top? By “default bar” I mean this one:

Your custom one looks really sleek, those are mushroom chips, am I right?

[hiddevanbrussel]

Use the kiosk mode or sidebar-card in HACS. Set the hideTopMenu on True

sidebar:
  digitalClock: true
  date: true
  dateFormat: dddd DD MMMM YYYY
  hideTopMenu: false

[hiddevanbrussel]

Thank you for the quick service :). This is a good start.

[Fabian_V]

looking in how to get the on for CCTV working, I can get it working but only for both icons, but want to have it only for one, any idea how to fix that if possible?

type: custom:vertical-stack-in-card
mode: vertical
fill_container: true
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-template-card
        entity: switch.cctv
        layout: vertical
        icon: |-
          {% if is_state('switch.cctv', 'on') %}
            mdi:cctv
          {% else %}
            mdi:cctv-off
          {% endif %}
        icon_color: |-
          {% if is_state('switch.cctv', 'on') %}
            yellow
          {% else %}
            #6f6f6f
          {% endif %}

[rhysb (Rhys)]

Just add your if/on to the --icon-animation like this:

type: custom:vertical-stack-in-card
mode: vertical
fill_container: true
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-template-card
        entity: switch.cctv
        layout: vertical
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:cctv
          {% else %}
            mdi:cctv-off
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %}
            yellow
          {% else %}
            #6f6f6f
          {% endif %}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {% if is_state(config.entity, 'on') %}
                  --icon-animation: scan 5s ease-in-out infinite;
                {% endif %}
                transform-origin: 90% 80%
              }
              @keyframes scan {
                0%, 100% { transform: rotate(20deg); }
                50% { transform: rotate(-15deg); }
              }

[apricotpie]

Does anybody know how I could add battery levels for my blinds into upper right corner of the cover card? Completely lost here…

type: custom:mushroom-cover-card
entity: cover.living_room_blinds
name: Living Room Blinds
show_position_control: true
show_buttons_control: true

[wernazz]

sorry for the late reply i was out of town. Im also using an iphone but i dont have those borders. Neither on an android device.

But i think u already found a solution

[Fabian_V]

great! this part I was missing: {% if is_state(config.entity, ‘on’) %}

keep up the good work!

[rhysb (Rhys)]

Mushroom Animations - Part 3

More Mushroom Card Icon Animations

Flash Animation

type: custom:mushroom-template-card
icon: mdi:flash
icon_color: amber
primary: Flash
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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); --icon-color: rgb(var(--rgb-amber)); }
        38% { transform: translate(0px, 0px); --icon-color: rgb(var(--rgb-white)); }
        40% { --icon-color: rgb(var(--rgb-amber)); }
      }

Charge Animation

type: custom:mushroom-template-card
icon: mdi:lightning-bolt
icon_color: amber
primary: Charge
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
icon: mdi:looks
primary: Double Rainbow
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: double 3s linear infinite alternate;
      }
      @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); }
      }
      .shape {
        --shape-animation: rainbow 40s linear infinite;
      }
      @keyframes rainbow {
        0%, 100% {--icon-color: rgb(var(--rgb-red)); --shape-color: rgb(var(--rgb-red), 0.2); }
        6.25% { --icon-color: rgb(var(--rgb-deep-orange)); --shape-color: rgb(var(--rgb-deep-orange), 0.2); }
        12.5% { --icon-color: rgb(var(--rgb-orange)); --shape-color: rgb(var(--rgb-orange), 0.2); }
        18.75% { --icon-color: rgb(var(--rgb-amber)); --shape-color: rgb(var(--rgb-amber), 0.2); }
        25% { --icon-color: rgb(var(--rgb-yellow)); --shape-color: rgb(var(--rgb-yellow), 0.2); }
        31.25% { --icon-color: rgb(var(--rgb-lime)); --shape-color: rgb(var(--rgb-lime), 0.2); }
        37.5% { --icon-color: rgb(var(--rgb-light-green)); --shape-color: rgb(var(--rgb-light-green), 0.2); }
        43.75% { --icon-color: rgb(var(--rgb-green)); --shape-color: rgb(var(--rgb-green), 0.2); }
        50% { --icon-color: rgb(var(--rgb-teal)); --shape-color: rgb(var(--rgb-teal), 0.2); }
        56.25% { --icon-color: rgb(var(--rgb-cyan)); --shape-color: rgb(var(--rgb-cyan), 0.2); }
        62.5% { --icon-color: rgb(var(--rgb-light-blue)); --shape-color: rgb(var(--rgb-light-blue), 0.2); }
        68.75% { --icon-color: rgb(var(--rgb-blue)); --shape-color: rgb(var(--rgb-blue), 0.2); }
        75% { --icon-color: rgb(var(--rgb-indigo)); --shape-color: rgb(var(--rgb-indigo), 0.2); }
        81.25% { --icon-color: rgb(var(--rgb-deep-purple)); --shape-color: rgb(var(--rgb-deep-purple), 0.2); }
        87.5% { --icon-color: rgb(var(--rgb-purple)); --shape-color: rgb(var(--rgb-purple), 0.2); }
        93.75% { --icon-color: rgb(var(--rgb-pink)); --shape-color: rgb(var(--rgb-pink), 0.2); }
      }

Random 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

type: custom:mushroom-template-card
icon: mdi:shimmer
icon_color: amber
primary: Sparkle
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: stars 4s linear infinite;
      }
      .shape {
        --shape-color: rgba(var(--rgb-disabled), 0.2);
      }
      @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

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

Sunny Animation

type: custom:mushroom-template-card
primary: Sunny
icon: mdi:weather-sunny
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Cloudy
icon: mdi:weather-cloudy
icon_color: grey
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Rainy
icon: mdi:weather-rainy
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Pouring
icon: mdi:weather-pouring
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Tornado
icon: mdi:weather-tornado
icon_color: orange
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Lightning
icon: mdi:weather-lightning
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
icon: mdi:weather-night
icon_color: amber
primary: Clear Night
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Windy
icon: mdi:weather-windy
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Wind
icon: mdi:weather-windy-variant
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Snow
icon: mdi:weather-snowy
icon_color: grey
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Hail
icon: mdi:weather-hail
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

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

Dust Animation

type: custom:mushroom-template-card
primary: Dust
icon: mdi:weather-dust
icon_color: brown
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Foggy
icon: mdi:weather-fog
icon_color: grey
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Cloudy
icon: mdi:weather-partly-cloudy
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
primary: Fireplace
icon: mdi:fireplace
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

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:
        mushroom-shape-icon$: |
          ha-icon {
            --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$: |
          ha-icon {
            --icon-animation: spin 1s linear infinite;
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Pot Animation

type: custom:mushroom-template-card
icon: mdi:pot-steam
icon_color: grey
primary: Pot
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

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

Music #1 Animation

type: custom:mushroom-template-card
primary: 'Music #1'
icon: mdi:music
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: music 2s ease-in-out infinite alternate;
        transform-origin: 50% 100%
      }
      .shape {
        perspective: 7px;
      }
      @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

type: custom:mushroom-template-card
primary: 'Music #2'
icon: mdi:music
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

type: custom:mushroom-template-card
icon: mdi:format-list-bulleted-square
icon_color: purple
primary: Playlist
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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

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

Focus Animation

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

Access Point Animation

type: custom:mushroom-template-card
icon: mdi:access-point
icon_color: teal
primary: Access Point
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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%); }
      }
      .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; }
      }

Alert Animation

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

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

type: custom:mushroom-template-card
primary: Heart
icon: mdi:heart
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-animation: beat 1.3s ease-out infinite both;
        transform-origin: 50% 60%;
        --shape-animation: heart 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); }
      }
      @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); }
      }

Play Animation

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

Christmas Tree Animation

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$: |
          ha-icon {
            --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); }
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --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) }
          }
          .shape {
            --shape-color: none;
            --icon-size: 20px;
            top: 16px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Doggy Animation

type: custom:mushroom-template-card
primary: Doggy
icon: mdi:dog
icon_color: brown
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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); }
      }

Continued in Part 1, Part 2, Part 4 & Part 5

[Fabian_V]

can we request mdi:fireplace?

[TommyWelle (Tommy Welle Jacobsson)]

Cant really get those animation to work.
What am i doing wrong?

- type: custom:mushroom-template-card
        entity: binary_sensor.aqara_motion_stua_motion_1
        content_info: none
        icon: mdi:eye
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: wink 4s ease-in-out infinite;
              }
              @keyframes wink {
                0%, 100% { transform: scale(1, 1); }
                19% { transform: scale(1.05, 0.6); }
                20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
                25% { transform: scale(1, 1); }
                28% { transform: scale(0.95, 1.05); }
                30% { clip-path: inset(0 0 0 0); }
              }

[Fabian_V]

try this, modify your entity

type: custom:mushroom-template-card
entity: switch.adguard_home_filtering
content_info: none
icon: mdi:eye
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: wink 4s ease-in-out infinite;
      }
      @keyframes wink {
        0%, 100% { transform: scale(1, 1); }
        19% { transform: scale(1.05, 0.6); }
        20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
        25% { transform: scale(1, 1); }
        28% { transform: scale(0.95, 1.05); }
        30% { clip-path: inset(0 0 0 0); }
      }

[TommyWelle (Tommy Welle Jacobsson)]

Thank you, but it just returns white.

[rhysb (Rhys)]

It looks like you are trying to apply the animation to a Mushroom Chip? You can apply it to a Chip like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:eye
    icon_color: blue
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        animation: wink 4s ease-in-out infinite;
      }
      @keyframes wink {
        0%, 100% { transform: scale(1, 1); }
        19% { transform: scale(1.05, 0.6); }
        20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
        25% { transform: scale(1, 1); }
        28% { transform: scale(0.95, 1.05); }
        30% { clip-path: inset(0 0 0 0); }
      }