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

[rhysb (Rhys)]

This should do the trick:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: '{{ states(''sensor.livingroom'') }}'
    icon: mdi:garage
    entity: input_boolean.garage_light
    tap_action:
      action: navigate
      navigation_path: garage
    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: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 56px;
          height: 66px;
          margin-left: -22px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:washing-machine
        icon_color: |2-
            {% if is_state(entity, 'off') %}
            grey
            {% else %}
            blue
            {% endif %}
        entity: sensor.washer
        tap_action:
          action: more-info
      - type: template
        icon: mdi:tumble-dryer
        icon_color: |2-
            {% if is_state(entity, 'off') %}
            grey
            {% else %}
            red
            {% endif %}
        entity: sensor.dryer
        tap_action:
          action: more-info
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          {% if is_state('sensor.washer','on') %}
          ha-icon {
            animation: shake 800ms ease-in-out infinite, drum 2s ease infinite;
          }
          @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); }
          }
          @keyframes drum {
            50%  { 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); }
          }  
          {% else %}

          {% endif %}
          }
        mushroom-template-chip:nth-child(2)$: |
          {% if is_state('sensor.dryer','on') %}
          ha-icon {
            animation: shake 800ms ease-in-out infinite, drum 1s infinite;
            transform-origin: 100% 100%;
          }
          @keyframes shake {
            0%, 100% { transform: rotate(4deg); }
            50%  { transform: rotate(-4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
          }
          {% else %}

          {% endif %}
          }
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
          }
    alignment: end
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('input_boolean.garage_light', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

[pbohannon (PB)]

This is super exciting! I’ve been keeping a close eye on your examples, and am really excited to finally leverage (a.k.a. borrow :)) your code. Thanks again for being willing to share it.

[rhysb (Rhys)]

Mushroom Animations - Part 2

Hit the limit for characters in a single post so have had to split it

Mushroom Title Animations

These ones run once to transition in the Mushroom Title.

Typewriter Animation

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Mushroom.
  subtitle: Typewriter
card_mod:
  style:
    mushroom-title-card$: |
      h1 {
        width: 9ch;
        animation: typing 5s steps(9), cursor 0.25s step-end 30 alternate;
        overflow: hidden;
        border-right: 2px solid transparent;
        font-family: monospace;
      }
       @keyframes typing {
        0% { width: 0; }
      }
      @keyframes cursor {
        50% { border-color: var(--primary-text-color); }
      }

Scale-in Animation

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Mushroom 🍄
  subtitle: Scale-in
card_mod:
  style:
    mushroom-title-card$: |
      * {
          animation: scale-in 1s;
          transform-origin: 15%;
      }
      @keyframes scale-in {
        0% { transform: scale(0); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
      }

Fade-in Animation

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Mushroom 🍄
  subtitle: Fade-in
card_mod:
  style:
    mushroom-title-card$: |
      * {
        animation: fade 1s ease-in;
      }
      @keyframes fade {
        0% { opacity: 0; }
        100% { opacity: 1; }
      }

Focus Animation

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Mushroom 🍄
  subtitle: Focus
card_mod:
  style:
    mushroom-title-card$: |
      * {
        animation: focus 1.5s;
      }
      @keyframes focus {
        0% { filter: blur(10px); opacity: 0; }
      }

Drop-in Animation

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Mushroom 🍄
  subtitle: Drop-in
card_mod:
  style:
    mushroom-title-card$: |
      * {
        animation: drop-in 1.1s both;
      }
      @keyframes drop-in {
        0% { transform: translateY(-400px); animation-timing-function: ease-in; filter: blur(40px); opacity: 0; }
        38% { transform: translateY(0); animation-timing-function: ease-out; filter: blur(0); opacity: 1; }
        55% { transform: translateY(-16px); animation-timing-function: ease-in; }
        72% { transform: translateY(0); animation-timing-function: ease-out; }
        81% { transform: translateY(-7px); animation-timing-function: ease-in; }
        90% { transform: translateY(0); animation-timing-function: ease-out; }
        95% { transform: translateY(-2px); animation-timing-function: ease-in; }
        100% { transform: translateY(0); animation-timing-function: ease-out; }
      }

Slide-in Animation

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Mushroom 🍄
  subtitle: Slide-in
card_mod:
  style:
    mushroom-title-card$: |
      * {
        animation: slide-in 1.1s both;
      }
      @keyframes slide-in {
        0% { transform: translateX(600px) scaleX(2.5) scaleY(0.2); animation-timing-function: ease-in; filter: blur(40px); opacity: 0; }
        38% { transform: translateX(0) scaleY(1) scaleX(1); animation-timing-function: ease-out; filter: blur(0); opacity: 1; }
        55% { transform: translateX(68px) scaleY(1.1) scaleX(0.95); animation-timing-function: ease-in; }
        72% { transform: translateX(0) scaleY(1) scaleX(1); animation-timing-function: ease-out; }
        81% { transform: translateX(32px) scaleY(1.05) scaleX(0.98); animation-timing-function: ease-in; }
        90% { transform: translateX(0) scaleY(1) scaleX(1); animation-timing-function: ease-out; }
        95% { transform: translateX(8px); animation-timing-function: ease-in; }
        100% { transform: translateX(0); animation-timing-function: ease-out; }
      }

Flicker Animation

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Mushroom 🍄
  subtitle: Flicker
card_mod:
  style:
    mushroom-title-card$: |
      * {
        animation: flicker 1.1s both;
      }
      @keyframes flicker {
        0%, 10%, 10.2%, 20%, 20.6%, 30%, 30.6%, 45%, 55.1%, 57%, 60.1%, 65%, 75.1%, 77%, 85.1%, 86% { opacity: 0; }
        10.1%, 20.1%, 30.1%, 30.5%, 45.1%, 50%, 55%, 57.1%, 60%, 65.1%, 75%, 77.1%, 85%, 86.1%, 100% { opacity: 1; }
      }

Mushroom Spinner Animations

Comet Spinner

type: custom:mushroom-template-card
icon: none
primary: Comet
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        border-right: 4px solid;
        border-bottom: 4px solid transparent;
        --shape-animation: spin 1s linear infinite, comet 10s infinite;
        --shape-color: none;
        --icon-size: 38px;
      }
      @keyframes comet {
        0% { border-right-color: rgb(var(--rgb-red)); }
        6.25% { border-right-color: rgb(var(--rgb-deep-orange)); }
        12.5% { border-right-color: rgb(var(--rgb-orange)); }
        18.75% { border-right-color: rgb(var(--rgb-amber)); }
        25% { border-right-color: rgb(var(--rgb-yellow)); }
        31.25% { border-right-color: rgb(var(--rgb-lime)); }
        37.5% { border-right-color: rgb(var(--rgb-light-green)); }
        43.75% { border-right-color: rgb(var(--rgb-green)); }
        50% { border-right-color: rgb(var(--rgb-teal)); }
        56.25% { border-right-color: rgb(var(--rgb-cyan)); }
        62.5% { border-right-color: rgb(var(--rgb-light-blue)); }
        68.75% { border-right-color: rgb(var(--rgb-blue)); }
        75% { border-right-color: rgb(var(--rgb-indigo)); }
        81.25% { border-right-color: rgb(var(--rgb-deep-purple)); }
        87.5% { border-right-color: rgb(var(--rgb-purple)); }
        93.75% { border-right-color: rgb(var(--rgb-pink)); }
        100% { border-right-color: rgb(var(--rgb-red)); }
      }

Crescent Spinner

type: custom:mushroom-template-card
icon: none
primary: Crescent
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        border: 1px solid rgba(var(--rgb-disabled), 0.8);
        border-right: 3px solid rgba(var(--rgb-light-blue));
        --shape-animation: spin 1s linear infinite;
        --shape-color: none;
        --icon-size: 40px;
      }

Munch Spinner

type: custom:mushroom-template-card
icon: none
primary: Munch
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon, .shape {
        --icon-animation: spin 1.5s linear infinite reverse;
        --shape-animation: spin 2s linear infinite;
        border-radius: 50%;
        border: 4px solid transparent;
        border-right-color: rgb(var(--rgb-amber));
        border-top-color: rgb(var(--rgb-amber));
        --shape-color: none;
        --icon-symbol-size: 34px;
        --icon-size: 34px;
      }

Double Spinner

type: custom:mushroom-template-card
icon: none
primary: Double
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite reverse;
        border-radius: 50%;
        border: 4px double transparent;
        border-right-color: rgb(var(--rgb-deep-orange));
        border-top-color: rgb(var(--rgb-deep-orange));
      }
      .shape {
        border: 4px double transparent;
        border-left-color: rgb(var(--rgb-amber));
        border-bottom-color: rgb(var(--rgb-amber));
        --shape-animation: spin 2s linear infinite;
        --shape-color: none;
        --icon-symbol-size: 20px;
        --icon-size: 34px;
      }

St. Nick Spinner

type: custom:mushroom-template-card
icon: none
primary: St. Nick
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 0.5s linear infinite reverse;
        border-radius: 50%;
        border: 8px dotted rgb(var(--rgb-red));
      }
      .shape {
        border: 4px dashed rgb(var(--rgb-green));
        --shape-animation: spin 2s linear infinite;
        --shape-color: none;
        --icon-symbol-size: 5px;
        --icon-size: 34px;
      }

Gradient Spinner

type: custom:mushroom-template-card
icon: none
primary: Gradient
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
         background: radial-gradient(farthest-side, rgb(var(--rgb-blue)) 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, rgb(var(--rgb-blue)));
         -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
         --shape-animation: spin 1s infinite linear;
      }

Dots Spinner

type: custom:mushroom-template-card
icon: none
primary: Dots
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
          border: 4px dotted transparent;
          --shape-animation: spin 800ms ease-in-out infinite, color 10s infinite;
          --shape-color: none;
          --icon-size: 34px;
      }
      @keyframes color {
        0% { border-right-color: rgb(var(--rgb-red)); border-top-color: rgb(var(--rgb-red)); }
        6.25% { border-right-color: rgb(var(--rgb-deep-orange)); border-top-color: rgb(var(--rgb-deep-orange)); }
        12.5% { border-right-color: rgb(var(--rgb-orange)); border-top-color: rgb(var(--rgb-orange)); }
        18.75% { border-right-color: rgb(var(--rgb-amber)); border-top-color: rgb(var(--rgb-amber)); }
        25% { border-right-color: rgb(var(--rgb-yellow)); border-top-color: rgb(var(--rgb-yellow)); }
        31.25% { border-right-color: rgb(var(--rgb-lime)); border-top-color: rgb(var(--rgb-lime)); }
        37.5% { border-right-color: rgb(var(--rgb-light-green)); border-top-color: rgb(var(--rgb-light-green)); }
        43.75% { border-right-color: rgb(var(--rgb-green)); border-top-color: rgb(var(--rgb-green)); }
        50% { border-right-color: rgb(var(--rgb-teal)); border-top-color: rgb(var(--rgb-teal)); }
        56.25% { border-right-color: rgb(var(--rgb-cyan)); border-top-color: rgb(var(--rgb-cyan)); }
        62.5% { border-right-color: rgb(var(--rgb-light-blue)); border-top-color: rgb(var(--rgb-light-blue)); }
        68.75% { border-right-color: rgb(var(--rgb-blue)); border-top-color: rgb(var(--rgb-blue)); }
        75% { border-right-color: rgb(var(--rgb-indigo)); border-top-color: rgb(var(--rgb-indigo)); }
        81.25% { border-right-color: rgb(var(--rgb-deep-purple)); border-top-color: rgb(var(--rgb-deep-purple)); }
        87.5% { border-right-color: rgb(var(--rgb-purple)); border-top-color: rgb(var(--rgb-purple)); }
        93.75% { border-right-color: rgb(var(--rgb-pink)); border-top-color: rgb(var(--rgb-pink)); }
        100% { border-right-color: rgb(var(--rgb-red)); border-top-color: rgb(var(--rgb-red)); }
      }

Radial Spinner

type: custom:mushroom-template-card
icon: none
primary: Radial
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1.5s linear infinite;
        border-radius: 50%;
        border: 3px solid rgb(var(--rgb-blue));
        border-right-color: transparent;
      }
      .shape {
        border: 3px solid rgb(var(--rgb-red));
        border-right-color: transparent;
        --shape-animation: spin 2s linear infinite;
        --shape-color: none;
        --icon-symbol-size: 24px;
        --icon-size: 36px;
      }

Dual Spinner

type: custom:mushroom-template-card
icon: none
primary: Dual
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: spin 1s ease infinite;
        border: 4px solid transparent;
        border-top-color: rgb(var(--rgb-deep-orange));
        border-bottom-color: rgb(var(--rgb-deep-orange));
        --shape-color: none !important;
        --icon-size: 34px;
      }

Morse Spinner

type: custom:mushroom-template-card
icon: none
primary: Morse
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite reverse;
        border-radius: 50%;
        border: 4px dashed transparent;
        border-right-color: rgb(var(--rgb-pink));
        border-left-color: rgb(var(--rgb-pink));
      }
      .shape {
        border: 4px dashed transparent;
        border-right-color: rgb(var(--rgb-purple));
        border-left-color: rgb(var(--rgb-purple));
        --shape-animation: spin 2s linear infinite;
        --shape-color: none;
        --icon-symbol-size: 20px;
        --icon-size: 34px;
      }

Fade Spinner

type: custom:mushroom-template-card
icon: none
primary: Fade
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: fade 25s linear infinite reverse;
        --shape-color: none;
      }
      @keyframes fade {
        6.24%, 12.49%, 18.74%, 24.99%, 31.24%, 37.49%, 43.74%, 49.99%, 56.24%, 62.49%, 68.74%, 74.99%, 81.24%, 87.49%, 93.74%, 100%  { box-shadow: 0 0 20px 20px transparent inset; }
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7) inset; }
        6.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-deep-orange), 0.7) inset; }
        12.5% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7) inset; }
        18.75% { box-shadow: 0 0 0 0 rgba(var(--rgb-amber), 0.7) inset; }
        25% { box-shadow: 0 0 0 0 rgba(var(--rgb-yellow), 0.7) inset; }
        31.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-lime), 0.7) inset; }
        37.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-green), 0.7) inset; }
        43.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-green), 0.7) inset; }
        50% { box-shadow: 0 0 0 0 rgb(var(--rgb-teal), 0.7) inset; }
        56.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-cyan), 0.7) inset; }
        62.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-blue), 0.7) inset; }
        68.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.7) inset; }
        75% { box-shadow: 0 0 0 0 rgb(var(--rgb-indigo), 0.7) inset; }
        81.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-deep-purple), 0.7) inset; }
        87.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-purple), 0.7) inset; }
        93.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-pink), 0.7) inset; }
      }

Dotty Spinner

type: custom:mushroom-template-card
icon: mdi:dots-circle
primary: Dotty
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite reverse, color 60s infinite;
      }
      @keyframes color {
        0% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
        6.25% { border-color: rgb(var(--rgb-deep-orange)); color: rgb(var(--rgb-pink)); }
        12.5% { border-color: rgb(var(--rgb-orange)); color: rgb(var(--rgb-purple)); }
        18.75% { border-color: rgb(var(--rgb-amber)); color: rgb(var(--rgb-deep-purple)); }
        25% { border-color: rgb(var(--rgb-yellow)); color: rgb(var(--rgb-indigo)); }
        31.25% { border-color: rgb(var(--rgb-lime)); color: rgb(var(--rgb-blue)); }
        37.5% { border-color: rgb(var(--rgb-light-green)); color: rgb(var(--rgb-light-blue)); }
        43.75% { border-color: rgb(var(--rgb-green)); color: rgb(var(--rgb-cyan)); }
        50% { border-color: rgb(var(--rgb-teal)); color: rgb(var(--rgb-teal)); }
        56.25% { border-color: rgb(var(--rgb-cyan)); color: rgb(var(--rgb-green)); }
        62.5% { border-color: rgb(var(--rgb-light-blue)); color: rgb(var(--rgb-light-green)); }
        68.75% { border-color: rgb(var(--rgb-blue)); color: rgb(var(--rgb-lime)); }
        75% { border-color: rgb(var(--rgb-indigo)); color: rgb(var(--rgb-yellow)); }
        81.25% { border-color: rgb(var(--rgb-deep-purple)); color: rgb(var(--rgb-amber)); }
        87.5% { border-color: rgb(var(--rgb-purple)); color: rgb(var(--rgb-orange)); }
        93.75% { border-color: rgb(var(--rgb-pink)); color: rgb(var(--rgb-deep-orange)); }
        100% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
      }
      .shape {
        --shape-color: none;
        border: 5px dotted transparent;
        --shape-animation: spin 2s linear infinite, color 60s infinite;
        --icon-symbol-size: 30px;
        --icon-size: 32px;
      }

Plain Spinner

type: custom:mushroom-template-card
icon: none
primary: Plain
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        border: 5px solid rgb(var(--rgb-disabled));
        border-left-color: transparent;
        --shape-animation: spin 1s linear infinite;
        --shape-color: none;
        --icon-size: 32px;
      }

Toggle Spinner

type: custom:mushroom-template-card
icon: none
primary: Toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite reverse;
        border-radius: 50%;
        border: 4px solid transparent;
        border-right-color: rgb(var(--rgb-cyan));
        border-left-color: rgb(var(--rgb-cyan));
      }
      .shape {
        border: 4px solid transparent;
        border-top-color: rgb(var(--rgb-cyan));
        border-left-color: rgb(var(--rgb-cyan));
        --shape-animation: spin 1s linear infinite;
        --shape-color: none;
        --icon-symbol-size: 34px;
        --icon-size: 34px;
      }

Spheres Spinner

type: custom:mushroom-template-card
icon: none
primary: Spheres
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite reverse;
        border-radius: 50%;
        border: 12px dotted transparent;
        border-right-color: rgb(var(--rgb-blue));
        border-left-color: rgb(var(--rgb-blue));
      }
      .shape  {
        border: 12px dotted transparent;
        border-right-color: rgb(var(--rgb-red));
        border-left-color: rgb(var(--rgb-red));
        --shape-animation: spin 2s linear infinite;
        --shape-color: none;
        --icon-symbol-size: 18px;
        --icon-size: 18px;
      }

Triple Spinner

type: custom:mushroom-template-card
icon: mdi:loading
icon_color: red
primary: Triple
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 4s linear infinite;
        border-radius: 50%;
        border: 4px solid transparent;
        border-bottom-color: rgb(var(--rgb-blue));
      }
      .shape {
        --shape-color: none !important;
        border: 4px solid transparent;
        border-bottom-color: rgb(var(--rgb-green));
        --shape-animation: spin 2s linear infinite;
        --shape-color: none;
        --icon-symbol-size: 42px;
        --icon-size: 34px;
      }

Mushroom Card Active Animations

Activate Background

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Background
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active {
      background: rgba(var(--rgb-disabled), 0.1);
      transition: 0s;
    }

Activate Box-Shadow

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Box-Shadow
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active {
      box-shadow: 0 0 20px rgba(var(--rgb-disabled), 0.8);
      transition: 0s;
    }

Activate Scale-Out

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale-Out
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active {
      transform: scale(1.02);
      transition: 0s;
    }

Activate Scale-In

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale-In
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active {
      transform: scale(0.975);
      transition: 0s;
    }

Activate Push Down

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Push Down
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active {
      transform: translateY(1.5px);
      transition: 0s;
      box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
    }

Activate Push In

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Push In
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active {
      transform: translateY(-1.5px);
      transition: 0s;
      box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
    }

Activate Ripple

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Ripple
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card {
      overflow: hidden;
    }  
    ha-card:after {
      display: none;
      content: "";
      position: absolute;
      border-radius: 50%;
      background-color: rgba(var(--rgb-disabled), 0.1);
      width: 100px;
      height: 100px;
      margin-top: -50px;
      margin-left: -50px;
      top: 50%;
      left: 50%;
      animation: ripple 750ms;
      opacity: 0;
    }
    ha-card:active:after {
      display: block;
    }
    @keyframes ripple {
      from { opacity: 1; transform: scale(0); }
      to { opacity: 0; transform: scale(10); }
    }

Activate 3D Perspective

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: 3D Perspective
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    :host {
      perspective: 900px;
    }
    ha-card:active {
      transform: rotateY(20deg);
      transition: 0s;
    }

Activate 3D Tilt

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: 3D Tilt
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    :host {
      perspective: 1000px;
    }
    ha-card:active {
      transform: rotate3d(0.5, -0.9, 0, 10deg) rotate(1deg);
      transition: 0s;
    }

Activate 3D Flap

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: 3D Flap
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    :host {
      perspective: 900px;
    }
    ha-card:active {
      transform: rotateX(25deg);
      transform-origin: center bottom;
      transition: 0s;
    }

Activate Icon Spin

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Icon Spin
tap_action:
  action: none
hold_action:
  action: none
card_mod:
  style: |
    ha-card:active mushroom-shape-icon { 
        display: flex;
        #--icon-animation: spin 1s;
        transform: rotate(360deg);
        transition: 500ms;
    }

Applying Active Animations to your Theme

Rather than applying the active animations to each card, you can apply the to all cards by adding the card_mod to your theme.

Mushroom Custom:
  card-mod-theme: "Mushroom Custom"

  card-mod-card: |
    ha-card:active {
      transform: scale(1.02);
      transition: 0s;
    }

Reference documentation

Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub
lovelace-card-mod/README-themes.md at master · thomasloven/lovelace-card-mod · GitHub

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

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