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

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

[TommyWelle (Tommy Welle Jacobsson)]

Sorry but that didn’t work either.

Posting my whole card yaml for reference.

It works when i post your code in a single card, but not when i add it to my code.

square: false
columns: 2
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.verisure_rv_stua_temp
    icon: mdi:television
    icon_color: blue
    name: Stua
    tap_action:
      action: false
    hold_action:
      action: navigate
      navigation_path: /lovelace-panel/stua
  - type: custom:mushroom-entity-card
    entity: sensor.aqara_multisensor_kjokkenet_temp
    icon: mdi:silverware-fork-knife
    icon_color: purple
    name: Kjøkkenet
    tap_action:
      action: false
    hold_action:
      action: navigate
      navigation_path: /lovelace-panel/kjokken
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if is_state(config.entity, 'on') %}
            mdi:radiator
          {% else %}
            mdi:radiator-off
          {% endif %}
        entity: switch.hue_kontakt_stua_1
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          red
          {% else %}
          blue
          {% endif %}
        tap_action:
          action: more-info
      - type: light
        entity: light.stua_uten_stuebordlys_dz
        icon: mdi:lamp-outline
        content_info: none
        tap_action:
          action: toggle
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:mushroom
            icon_color: red
            entity: binary_sensor.aqara_motion_stua_motion_1
        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); }
              }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |-
          {% if is_state(config.entity, 'heat') %}
            mdi:radiator
          {% else %}
            mdi:radiator-off
          {% endif %}
        entity: climate.mill_ovn_kjokkenet
        icon_color: |-
          {% if is_state(config.entity, 'heat') %}
          red
          {% else %}
          blue
          {% endif %}
        tap_action:
          action: more-info
      - type: light
        entity: light.taklyset_pa_kjokken
        icon: mdi:ceiling-light-outline
        content_info: none
        tap_action:
          action: toggle
      - type: light
        entity: light.kjokkenbenken
        content_info: none
        icon: hue:lightstrip
        tap_action:
          action: toggle
      - type: template
        entity: switch.aqara_kontakt_kjokkenet_1
        content_info: none
        icon: |-
          {% if is_state(config.entity, 'on') %}
            hue:plug
          {% else %}
            hue:plug
          {% endif %}
        icon_color: |-
          {% if is_state(config.entity, 'on') %}
          green
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: toggle
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-top: -10px;

[rhysb (Rhys)]

Your indentation is incorrect. Chip card_mod needs to be moved left to align with chips:.

[TommyWelle (Tommy Welle Jacobsson)]

Whatever i change i cant seem to figure it out, it looks aligned correctly but there might be something im overlooking or dont understand. Thank you for your time though

[Andrea_Ciullini]

Hello, how do you create entity: media_player.currently_playing ?
thank you

[rhysb (Rhys)]

Have a look here:

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

I combine all my media players using a Universal Media Player: media_player: - platform: universal name: Currently Playing children: - media_player.lounge_tv - media_player.lounge - media_player.family_room_tv - media_player.family_room - media_player.office - media_player.bedroom - media_player.garage - media_player.elijahs_bedroom I then conditionally display the Universal Media Player when it is not off: type: conditional conditions…