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

[tempus2016 (Tempus)]

how are you tracking your d/load & u/load totals?

[boggy (John Bogdaniec)]

Did you get this resolved, I have the same problem and not sure how to proceed

[KyleBrown0221]

@rhysb Following up on this, any thoughts?

[gnec220 (Ratna Kumar)]

Hi, thank you very much for your wondeful work.
when you have time can you please add ‘mdi:thermostat’ and ‘mdi:solar-power-variant( sun turns while the panel stays)’.

thank you.

[Fabian_V]

maybe this helps: Lovelace: Migrate from storage to yaml mode - Configuration / Frontend - Home Assistant Community (home-assistant.io)

[rhysb (Rhys)]

Mushroom Animations - Part 4

Even More Mushroom Card Icon Animations

HA Animation

type: custom:mushroom-template-card
icon: mdi:home-assistant
icon_color: blue
primary: Home Assistant
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: boing 3s ease infinite;
        transform-origin: 50% 90%;
      }
      @keyframes boing {
        0% { transform: scale3d(1, 1, 1); }
        7% { transform: scale3d(1.25, 0.75, 1); }
        10% { transform: scale3d(0.75, 1.25, 1); }
        12% { transform: scale3d(1.15, 0.85, 1); }
        16% { transform: scale3d(0.95, 1.05, 1); }
        19% { transform: scale3d(1.05, 0.95, 1); }
        25% { transform: scale3d(1, 1, 1); }
      }

Surprise Animation

type: custom:mushroom-template-card
icon: mdi:gift
icon_color: deep-orange
primary: Surprise
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: surprise 3s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-6px) rotate(-14deg); }
        5% { transform: translateY(-6px) rotate(11deg); }
        7.5% { transform: translateY(-6px) rotate(-8deg); }
        10% { transform: translateY(-6px) rotate(5deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-3px) }
      }

Ring Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:phone-classic
    icon_color: light-green
    primary: Ring
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: polygon(0 100%, 100% 100%, 100% 67%, 66% 39%, 66% 25%, 34% 25%, 34% 40%, 0 68%);
          }
  - type: custom:mushroom-template-card
    icon: mdi:phone-hangup
    icon_color: light-green
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: ring 1s ease infinite;
          }
          @keyframes ring {
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-4px) rotate(-27deg); }
            20% { transform: translateY(-4px) rotate(21deg); }
            30% { transform: translateY(-4px) rotate(-15deg); }
            40% { transform: translateY(-4px) rotate(9deg); }
            60% { transform: translateY(-2.4px); }
          }
          .shape {
            --shape-color: none;
            top: -4px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Marker Animation

type: custom:mushroom-template-card
icon: mdi:map-marker
icon_color: red
primary: Marker
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: boing 3s ease infinite;
        transform-origin: 50% 90%;
      }
      @keyframes boing {
        0% { transform: scale3d(1, 1, 1); }
        7% { transform: translateY(-4px) scale3d(0.75, 1.25, 1); }
        10% { transform: scale3d(1.25, 0.75, 1); }
        12% { transform: translateY(-2px) scale3d(0.85, 1.15, 1); }
        16% { transform: scale3d(1.05, 0.95, 1); }
        19% { transform: scale3d(0.95, 1.05, 1); }
        25% { transform: scale3d(1, 1, 1); }
      }

Beat Animation

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

Door Animation

type: custom:mushroom-template-card
icon: mdi:door
icon_color: brown
primary: Door
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: open 6s ease-in-out infinite;
        transform-origin: 30%;
      }
      @keyframes open {
        0%, 66% { transform: rotateY(0deg); }
        33% { transform: rotateY(-120deg); }
      }
      .shape {
        perspective: 45px;
      }

Bounce Animation

type: custom:mushroom-template-card
icon: mdi:tennis-ball
icon_color: amber
primary: Bounce
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: bounce 0.6s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
        transform-origin: 50% 100%;
      }
      @keyframes bounce { 
        0%, 100% { transform: translateY(0px) scaleY(0.9); }
        80% { transform: translateY(-3px); }
      }

Ghost Animation

type: custom:mushroom-template-card
primary: Ghost
icon: mdi:ghost-outline
icon_color: grey
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: drift 10s ease-in-out infinite, blink 4s infinite; 
      }
      @keyframes drift {
        0%, 100% { transform: translate(3px, 0px); }
        30% { transform: translate(-1px, 2px); }
        45% { transform: translate(1.5px, 0px); }
        75% { transform: translate(-3.2px, -3px); }
      }
      @keyframes blink {
        0%, 24%, 35%, 74%, 85%, 100% { clip-path: inset(0 0 0 0); }
        25% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 25% 52%, 27% 31%, 49% 31%, 49% 54%, 100% 54%, 100% 0); }
        75%  { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 53%, 49% 51%, 52% 30%, 73% 31%, 75% 52%, 100% 54%, 100% 0); }
      }

Ducky Animation

type: custom:mushroom-template-card
primary: Rubber Ducky
icon: mdi:duck
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: ducky 2s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes ducky {
        0%, 100% { transform: rotate(-15deg); }
        50% { transform: rotate(15deg); }
      }

Robot Animation

type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: tilt 4s steps(1) infinite, blink 4s infinite; 
        transform-origin: 50% 92%;
      }
      @keyframes tilt {
        0%, 100% { transform: rotate(0deg); }
        33% { transform: rotate(8deg); }
        66% { transform: rotate(-8deg); }
      }
      @keyframes blink {
        0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
        25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
        50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
        75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
      }

Coffee Machine Animation

type: custom:mushroom-template-card
icon: mdi:coffee-maker
icon_color: brown
primary: Coffee Machine
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: java 4s linear infinite;
      }
      @keyframes java {
        0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
        10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
        15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
        20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
        25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
        30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
        35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
        40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
        45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
        50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
        55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
        60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
        65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
        70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
        75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
      }

Apple Animation

type: custom:mushroom-template-card
primary: Apple
icon: mdi:food-apple
icon_color: green
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: bite 4s infinite; 
      }
      @keyframes bite {
        0%, 19%, 100% { clip-path: inset(0 0 0 0); }
        20%, 39% { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 69% 62%, 74% 66%, 74% 66%, 79% 70%, 100% 75%, 100% 100%, 0 100%); }
        40%, 59%  { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%); }
        60%, 79%  { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%, 0 84%, 23% 75%, 29% 71%, 33% 66%, 35% 59%, 35% 52%, 34% 45%, 29% 40%, 23% 35%, 0 27%); }
        80%, 99%  { clip-path: polygon(0 0, 100% 0, 100% 30%, 78% 36%, 69% 41%, 68% 48%, 67% 55%, 63% 60%, 61% 66%, 59% 72%, 61% 79%, 63% 85%, 66% 91%, 76% 100%, 0 100%, 32% 88%, 37% 83%, 39% 76%, 39% 67%, 35% 59%, 35% 52%, 34% 45%, 29% 40%, 23% 35%, 0 27%); }
      }

Memory Animation

type: custom:mushroom-template-card
primary: Memory
icon: mdi:memory
icon_color: orange
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: bit 250ms infinite; 
      }
      @keyframes bit {
        0%, 100% { clip-path: inset(0 0 0 0); }
        50% { clip-path: polygon(0% 0%, 0% 100%, 29% 100%, 30% 30%, 70% 30%, 70% 70%, 29% 70%, 29% 100%, 100% 100%, 100% 0%); }
      }

Pump Animation

type: custom:mushroom-template-card
primary: Pump
icon: mdi:water-pump
icon_color: light-blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: drip 2s infinite; 
      }
      @keyframes drip {
        0%, 100% { clip-path: inset(0 0 0 0); }
        15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 57%, 64% 57%, 64% 100%, 0 100%); }
      }

Power Animation

type: custom:mushroom-template-card
primary: Power
icon: mdi:power
icon_color: teal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: power 1.5s infinite; 
      }
      @keyframes power {
        0%, 100% { clip-path: inset(0 0 0 0); }
        50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
      }

Garage Animation

type: custom:mushroom-template-card
primary: Garage
icon: mdi:garage
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: door 3s steps(1) infinite alternate; 
      }
      @keyframes door {
        0% { clip-path: inset(0 0 0 0); }
        25%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 73%, 32% 73%, 31% 100%, 0 100%); }
        50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 61%, 32% 61%, 31% 100%, 0 100%); }
        75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 48%, 32% 48%, 31% 100%, 0 100%); }
      }

Coffee Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:coffee
    icon_color: brown
    primary: Coffee
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            transform: scaleY(0.8);
            transform-origin: 50% 100%;
          }
  - type: custom:mushroom-template-card
    icon: mdi:pot-steam
    icon_color: brown
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: steam 2s ease-in infinite;
            clip-path: inset(0 0 61% 0);
          }
          @keyframes steam {
            0%, 100% { opacity: 1; }
            80% { opacity: 0; }
          }
          .shape {
            --shape-color: none;
            top: -2px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Auto Fix Animation

type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: Auto Fix
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: sparkle 1.8s linear infinite, kadabra 1.8s ease-in-out infinite;
       transform-origin: 10% 90%
      }
      @keyframes sparkle {
        0%, 69%, 74%, 79%, 85% { clip-path: inset(0 0 0 0); }
        70% { clip-path: polygon(0 100%, 0 76%, 75% 0, 100% 0, 100% 100%); }
        75% { clip-path: polygon(0 100%, 0 0, 39% 0, 100% 62%, 100% 100%); }
        80% { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 26%, 25% 100%); }
      } 
      @keyframes kadabra {
        0%, 65%, 100% { transform: rotate(-15deg); }
        70% { transform: rotate(20deg); }
        75% { transform: rotate(15deg); }
        80% { transform: rotate(25deg); }
      }

Grinder Animation

type: custom:mushroom-template-card
icon: mdi:blender
icon_color: orange
primary: Grinder
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: shake 400ms ease-in-out infinite;
        transform-origin: 50% 90%;
        clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 33% 62%);
      }
      @keyframes shake {
        0%, 100% { transform: rotate(3deg); }
        50%  { transform: rotate(-3deg); }
      }

Solar Panel Animation

type: custom:mushroom-template-card
icon: mdi:solar-power-variant
icon_color: amber
primary: Solar Panel
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: rays 2s infinite;
      }
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
      }

Light Bulb Animation

type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: amber
primary: Light Bulb
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: illumination 2s infinite;
      }
      @keyframes illumination {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
      }

Eureka Animation

type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: orange
primary: Eureka
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: eureka 1.8s infinite;
      }
      @keyframes eureka {
        0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%, 53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45% 76%, 56% 76%, 54% 100%); }
        10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
        50% { transform: translateY(-2px) }
      }

Trash Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    primary: Trash
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: inset(26% 0 0 0);
          }
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: lid 1s ease infinite;
            clip-path: inset(0 0 75% 0);
            transform-origin: 50% 25%;
          }
          @keyframes lid {
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-5px) rotate(-37deg); }
            20% { transform: translateY(-5px) rotate(31deg); }
            30% { transform: translateY(-5px) rotate(-25deg); }
            40% { transform: translateY(-5px) rotate(19deg); }
            60% { transform: translateY(-3px); }
          }
          .shape {
            --shape-color: none;
            top: 0.3px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Heat Pump Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:heat-pump-outline
    icon_color: deep-purple
    primary: Heat Pump
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: polygon(0% 0%, 0% 100%, 23% 100%, 23% 23%, 78% 22%, 77% 78%, 23% 78%, 22% 100%, 100% 100%, 100% 0%);
          }
  - type: custom:mushroom-template-card
    icon: mdi:heat-pump-outline
    icon_color: deep-purple
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            position: absolute;
            --icon-animation: spin 2s linear infinite;
            clip-path: circle(27.3% at 50% 50%);
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Air Purifier Animation

type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: cyan
primary: Air Purifier
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: air 1s infinite;
      }
      @keyframes air {
        0%, 100% { clip-path: inset(0 0 0 0); }
        25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
        75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
        50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
      }

Calendar Clock Animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    icon_color: purple
    primary: Calendar Clock
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
          }
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    icon_color: purple
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: spin 1s linear infinite;
            transform-origin: 67% 67%;
            clip-path: circle(17% at 67% 67%);
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

CRT Animation

type: custom:mushroom-template-card
primary: CRT
entity: switch.television
icon: mdi:television-classic
icon_color: '{{ ''orange'' if is_state(entity, ''on'') }}'
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;' if is_state(config.entity, 'on') else '--icon-animation: tube-off 2s linear forwards;' }}
      }
      @keyframes tube-off {
        1%, 15% { transform: scale(1, 0.2); }
        40%  { transform: scale(0.2); opacity: 1; }
        100%  { transform: scale(0.2); opacity: 0; }
      }
      @keyframes tube-on {
        0% { transform: scale(0.2); opacity: 0; }
        5%  { transform: scale(1, 0.2); opacity: 0.3; }
        15%  { transform: scale(1); opacity: 0.4; }
        100%  { transform: scale(1); opacity: 1; }
      }
      @keyframes flicker {
        0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
        32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 1; }
      }

Microwave Animation

type: custom:mushroom-template-card
icon: mdi:microwave
icon_color: blue
primary: Microwave
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon:before {
        content: "";
        position: absolute;
        width: 25%;
        height: 25%;
        margin: 10%;
        animation: cook 1s linear infinite;
      }
      @keyframes cook { 
        0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
        33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
        66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
      }

Controlling the Animation in your Card

The animations can be controlled using a Jinja Template condition on the animation command.

For example if I wanted an animation when my coffee machine is on I would use an if statement like this:

{{ '--icon-animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}

The complete card would look like this:

Coffee Machine Card

type: custom:mushroom-template-card
entity: switch.coffee_machine
icon: mdi:coffee-maker
icon_color: '{{ ''brown'' if is_state(entity, ''on'') }}'
primary: Coffee Machine
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}
      }
      @keyframes java {
        0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
        10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
        15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
        20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
        25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
        30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
        35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
        40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
        45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
        50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
        55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
        60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
        65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
        70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
        75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
      }

Or if I wanted to have the dryer animate when the load is over 4w I would do this:

{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}

The complete card would look like this:

Dryer Card

type: custom:mushroom-template-card
entity: switch.dryer
icon: mdi:tumble-dryer
icon_color: '{{ ''teal'' if states(''sensor.dryer_power'') | float > 4 }}'
primary: Dryer
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}
        transform-origin: 50% 65%;
      }
      @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); }
      }

You will need to add the if condition for each animation:, --icon-animation: or --shape-animation: command in the card.

Using the Animations with Tile Card

The structure of the new Tile Card is very similar to the Mushroom Cards, so it is easy to use these animations with it.

Mushroom Card

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
      }

Tile Card

card_mod:
  style:
    ha-tile-icon$: |
      ha-svg-icon {
      }

Animated Tile Card

type: tile
entity: fan.bathroom_fan
color: green
card_mod:
  style:
    ha-tile-icon$: |
      ha-svg-icon {
        animation: rotate 1s linear infinite;
      }
      @keyframes rotate {
        100% { transform: rotate(360deg); }
      }

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

[Abeksis]

@rhysb Thank you so much on the door. And thank you for investing.

[rhysb (Rhys)]

Added one for Solar Power. Can’t rotate half a sun sorry.

Not much to animate with the Thermostat…

[rhysb (Rhys)]

Would require a lot of work to do.

[rhysb (Rhys)]

This should do what you want:

type: custom:mushroom-template-card
primary: Heater
secondary: >-
  {{ 'Heating' if states('sensor.smartplug_heater_2nd_floor_power') | float >
  4 else 'Idle' }}
icon: mdi:heat-wave
entity: switch.smartplug_heater_2nd_floor
icon_color: '{{ ''red'' if is_state(entity, ''on'') }}'
tap_action:
  action: toggle

[filikun]

This is really amazing work! Love it, many thanks! If I where to wish for one animation it would be for the light bulb.

[RaA11]

@rhysb Thank you for sharing your knowledge

How can I use the animation only when the state of the entity is on?

[Andrea_Ciullini]

IOS on Ipad Pro

[Andrea_Ciullini]

Can you share yours energy cards?

[krth8 (Kristian)]

Works like a charm! Thanks again.

Btw, with all the work you contribute in this thread you should have a patreon

[Valdorama]

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

Just wrap the --icon-animation in an if, like this: {{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}

[RaA11]

              - type: custom:mushroom-template-card
                primary: AC
                secondary: >-
                  {% set ac_on = expand(states.group.ac) | selectattr( 'state', 'eq','on') |
                  list | count %} {% if ac_on > 1 %}
                  {{ ac_on }} On
                  {% elif ac_on == 1 %}
                  {{ ac_on }} On
                  {% else %} {% endif %}
                layout: vertical
                icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }} '
                entity: group.ac
                tap_action:
                  action: more-info
                hold_action:
                  action: toggle
                icon: mdi:snowflake
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      ha-icon { 
                        {{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
                      }

The animation not working, any idea?

[Valdorama]

One of the biggest ‘quality-of-life’ improvements (in my view) to the Mushroom cards would be for only the icon portion of a card to toggle the entity, rather than the whole card being one giant active button.

Quite often I’ve inadvertently grazed over part of a card only to toggle a light/fan/switch etc. unexpectedly. This also happens when trying to go back to the previous screen using the ‘swipe from edge’ feature on Android. (Obviously these issues are touchscreen-specific).

There’s already an open issue for this: [Feature]: limit tap target area to the button · Issue #446 · piitaya/lovelace-mushroom · GitHub

However it hasn’t been progressed in months so not sure how likely it is to be officially implemented.

So…is there anyway some of these cardmod tricks could be used to achieve this? Ideally I’d love for just the icon to toggle the underlying entity, and clicking anywhere else on the card would bring up the more-info dialog (or something else).

[Valdorama]

I think the is_state(config.entity, 'on') should be just is_state(entity, 'on')

[RaA11]

@Valdorama

is_state(entity, ‘on’)

Still no animation…