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

Agreedā€¦ +1

Thanks a lotā€¦ it workedā€¦

1 Like

For Scent you could try something like this:

Scent Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:scent
    icon_color: light-green
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        animation: wave 6s infinite;
      }
      @keyframes wave {
        50% {
          transform: rotatey(180deg);
          --color: rgb(var(--rgb-cyan));
        }
      }

I like my kettle boil animation:

Kettle Boil Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:kettle-steam
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        animation: boil 0.5s linear alternate infinite;
      }
      @keyframes boil {
        0% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      }

And this one is just for fun, so why not:

Mushroom Snail Animation

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:snail
    icon_color: green
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-icon {
        animation: flip 1s ease-in-out infinite;
      }
      @keyframes flip {
        0% {
          transform: scaley(1.05);
        }
        50% {
          transform: scaley(0.9);
        }
      }
    .: |
      mushroom-template-chip:nth-child(2) {
          animation: slide 8s linear infinite;
        }
        @keyframes slide {
          0% {
            transform: translate(0px, 0px) rotateY(0deg);
          }
          50% {
            transform: translate(100px, 0px) rotateY(0deg);
          }
          50.1% {
            transform: translate(100px, 0px) rotateY(180deg);
          }
          100% {
            transform: translate(0px, 0px) rotateY(180deg);
          }
        }
14 Likes

how can I change the icon color of the climate card?
with card-mod

Thanks

You can add transition: 0s; to make the effect more responsive.

1 Like

Is this what you wanted?

Mushroom Avatar/Picture Border:

type: custom:mushroom-template-card
primary: 'Mushroom '
picture: /local/mushroom_icon.png
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        border: solid rgb(var(--rgb-green));
      }
3 Likes

You can kind of do it like this.

Mushroom Chip Badge:

Mushroom Chip Badge

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: group.all_windows
        state: 'on'
    chip:
      type: template
      icon: mdi:window-open
      content: >-
        {{ expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') |
        list | count }}
      entity: group.all_windows
      icon_color: light-blue
      tap_action:
        action: none
  - type: conditional
    conditions:
      - entity: group.all_lights
        state: 'on'
    chip:
      type: template
      icon: mdi:lightbulb
      content: >-
        {{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
        list | count }}
      entity: group.all_lights
      icon_color: amber
      tap_action:
        action: none
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        span {
          position: relative;
          right: 6px;
          top: -6px;
          width: 0px;
          font-size: 10px;
          margin-right: -5px;
        }
    mushroom-conditional-chip:nth-child(2):
      mushroom-template-chip$: |
        span {
          position: relative;
          right: 6px;
          top: -6px;
          width: 0px;
          font-size: 10px;
          margin-right: -5px;
        }
    .: |
      ha-card {
        height: 36px !important;
      }
14 Likes

Thanks @rhysb for all these animation examples. These are really useful.

There was one animation example from your earlier post.

type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 1s linear infinite;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
        }
        
        70% {
          box-shadow: 0 0 0 10px transparent;
        }
        
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }

how can I apply this effect to a mushroom chip template card ?

1 Like

Like this:

1 Like

@rhysb I meant this kind of effect with red ring glowā€¦ please guide

Mushroom Radiator Animation

You can change the default colors of the Mushroom Climate Card like this:

type: custom:mushroom-climate-card
entity: climate.air_conditioner
show_temperature_control: true
collapsible_controls: false
hvac_modes:
  - heat_cool
  - heat
  - cool
  - dry
  - fan_only
card_mod:
  style: |
    :host {
      --mush-rgb-state-climate-auto: var(--rgb-green);
      --mush-rgb-state-climate-cool: var(--rgb-blue);
      --mush-rgb-state-climate-dry: var(--rgb-amber);
      --mush-rgb-state-climate-fan-only: var(--rgb-teal);
      --mush-rgb-state-climate-heat: var(--rgb-deep-orange);
      --mush-rgb-state-climate-heat-cool: var(--rgb-green);
      --mush-rgb-state-climate-idle: var(--rgb-grey);
      --mush-rgb-state-climate-off: var(--rgb-disabled);
    }
5 Likes

Ah, you can do that like this.

Mushroom Chip Ping animation:

Mushroom Chip Ping

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$:
      mushroom-chip$: |
        ha-card {
          animation: ping 2s ease-out infinite ;
        }
        @keyframes ping {
          0% {
            box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
          }
          100% {
            box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
          }
        }
15 Likes

100% @rhysb should be making his own custom dashboards or working for nabu casa!

4 Likes

I choose to look on the bright side :sunny:. Perhaps now we may get a bit of :mushroom: with our HA :crossed_fingers:.

5 Likes

thank you so much @rhysb :slight_smile:

You have really helped alot.

  1. Please tell how to have the same red ring animation effect for mushroom-entity-card
type: custom:mushroom-entity-card
entity: person.myhome
primary_info: none
secondary_info: none
layout: vertical
use_entity_picture: true
  1. Can we change the volume steps when we press volume up or volume down (currently its 5) ?

Kindly guide.

1 Like

Perfect, thanks

1 Like

Seriously, this is insane what you are doing in this thread!

And the animations are just awesome!

2 Likes

New room setup! Yesā€¦ I canā€™t stopā€¦

The base card is the climate card, all in idle now.
The rest are just the most used lights or covers

Other similar things
image

Code for one card

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.cameradalettoknx
    icon: mdi:bed-double-outline
    tap_action:
      action: navigate
      navigation_path: camere
    hold_action:
      action: more-info
    multiline_secondary: true
    card_mod:
      style: |
        :host {
          --mush-rgb-state-climate-auto: var(--rgb-deep-purple);
          --mush-rgb-state-climate-cool: var(--rgb-deep-purple);
          --mush-rgb-state-climate-dry: var(--rgb-deep-purple);
          --mush-rgb-state-climate-fan-only: var(--rgb-deep-purple);
          --mush-rgb-state-climate-heat: var(--rgb-deep-purple);
          --mush-rgb-state-climate-heat-cool: var(--rgb-deep-purple);
          --mush-rgb-state-climate-idle: var(--rgb-gray);
          --mush-rgb-state-climate-off: var(--rgb-deep-purple);
        }
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: light
        entity: light.camera_da_letto_knx
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }
      - type: light
        entity: light.lamp1_cloud_180911
        content_info: none
        icon: mdi:desk-lamp
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }
      - type: entity
        entity: cover.camera_da_letto_tenda_alta_knx
        content_info: none
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }

18 Likes

Hi all! This thread is a goldmine! :slight_smile:
I have a question about the ā€œchipā€ (using a template). Iā€™m trying to ā€œaddā€ some information after the ā€œstatusā€ on the entity in the card. But when I pick the ā€œstatusā€ manually, itā€™s not translated to the selected language. Is there a way to get the translated status in the template card as well? So it appears the same way as in the unmodified entity card. Here is an example with both cardsā€¦

And the actual codeā€¦ :slight_smile:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: vacuum.rupert
    icon: mdi:robot-mower
    content: >
      {{ states('vacuum.rupert') }}
  - type: entity
    entity: vacuum.rupert
    content_info: state
alignment: center

Thank you! :slight_smile:

This is my favourite visualisation of a button press:

        card_mod:
          style: |
            ha-card:active {
                transform: scale(1.1);
                transition: 0s;
            }

A nice subtle ā€œpopā€ that makes it much more obvious youā€™ve activated an action, especially on a device with no haptics. Iā€™d really like an option on cards for something like this. Thanks again @rhysb!

2 Likes

The box-shadow animation for Mushroom Card is different for icon and picture.

Picture:

Mushroom Entity Picture Pulse

type: custom:mushroom-entity-card
entity: person.rhys
icon_type: entity-picture
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
        }
        
        100% {
          box-shadow: 0 0 5px 15px transparent;
        }
      }

Icon:

Mushroom Entity Icon Pulse

type: custom:mushroom-entity-card
entity: person.rhys
icon: mdi:face-man
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
        }
        
        100% {
          box-shadow: 0 0 5px 15px transparent;
        }
      }
13 Likes