Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Thank you very much for the tip

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

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

@rhysb Following up on this, any thoughts?

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.

1 Like

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

2 Likes

Mushroom Animations :mushroom: - Part 4

Even More Mushroom Card Icon Animations

Mushroom HA Animation

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

Mushroom Surprise Animation

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

Mushroom Ring Animation

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

Mushroom Marker Animation

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

Mushroom Beat Animation

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

Mushroom Door Animation

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

Mushroom Bounce Animation

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

Mushroom Ghost Animation

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

Mushroom Ducky Animation

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

Mushroom Robot Animation

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

Mushroom Coffee Machine Animation

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

Mushroom Apple Animation

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

Mushroom Memory Animation

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

Mushroom Pump Animation

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

Mushroom Power Animation

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

Mushroom Garage Animation

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

Mushroom Coffee Animation

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

Mushroom Auto Fix Animation

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

Mushroom Grinder Animation

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

Mushroom Solar Panel Animation

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

Mushroom Light Bulb Animation

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

Mushroom Eureka Animation

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

Mushroom Trash Animation

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

Mushroom Heat Pump Animation

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

Mushroom Air Purifier Animation

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

Mushroom Calendar Clock Animation

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

Mushroom CRT Animation

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

Mushroom Microwave Animation

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

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

94 Likes

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

1 Like

Added one for Solar Power. Canā€™t rotate half a sun sorry. :slightly_frowning_face:

Not much to animate with the Thermostatā€¦ :thinking:

Would require a lot of work to do.

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

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

1 Like

@rhysb Thank you for sharing your knowledge :slight_smile:

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

1 Like

IOS on Ipad Pro

Can you share yours energy cards?

Works like a charm! Thanks again.

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

2 Likes
2 Likes
              - 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?

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).

2 Likes

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