Where are these from btw? @galaxy
Edit: easier way is just to just declare square: false in the grid card 
type: custom:swipe-card
cards:
- type: custom:stack-in-card
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-entity-card
entity: sensor.living_temperature
name: Living Room
icon: None
tap_action:
action: navigate
navigation_path: living-room
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.livingroom_lights_2
use_light_color: true
alignment: end
- type: custom:mini-graph-card
keep:
margin: false
box_shadow: false
background: false
entities:
- entity: sensor.living_temperature
name: Temperature
color: var(--green-color)
- entity: sensor.living_humidity
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.lr_ceiling_lights
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.lr_ceiling_lights_2
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.lr_ceiling_lights_3
icon: phu:recessed-ceiling
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.swing_lights
icon: mdi:circle-double
Original Response:
Probably not the most elegant solution, but the first one i thought of. You could just add your vertical stack into a stack in card like this:
type: custom:swipe-card
cards:
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: sensor.living_temperature
name: Living Room
icon: None
tap_action:
action: navigate
navigation_path: living-room
alignment: start
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.livingroom_lights_2
use_light_color: true
alignment: end
- type: custom:mini-graph-card
keep:
margin: false
box_shadow: false
background: false
entities:
- entity: sensor.living_temperature
name: Temperature
color: var(--green-color)
- entity: sensor.living_humidity
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.lr_ceiling_lights
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.lr_ceiling_lights_2
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.lr_ceiling_lights_3
icon: phu:recessed-ceiling
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.swing_lights
icon: mdi:circle-double
Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.
More Mushroom Card Icon Animations
Flash Animation (changed)
card_mod:
style: |
ha-state-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); color: rgb(var(--rgb-amber)); }
38% { transform: translate(0px, 0px); color: rgb(var(--rgb-white)); }
40% { color: rgb(var(--rgb-amber)); }
}
Charge Animation (changed)
type: custom:mushroom-template-card
icon: mdi:lightning-bolt
icon_color: amber
primary: Charge
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:looks
primary: Double Rainbow
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: rainbow 40s linear infinite;
}
@keyframes rainbow {
0%, 100% {background: rgb(var(--rgb-red), 0.2);}
6.25% { background: rgb(var(--rgb-deep-orange), 0.2);}
12.5% { background: rgb(var(--rgb-orange), 0.2);}
18.75% { background: rgb(var(--rgb-amber), 0.2);}
25% { background: rgb(var(--rgb-yellow), 0.2); }
31.25% { background: rgb(var(--rgb-lime), 0.2);}
37.5% { background: rgb(var(--rgb-light-green), 0.2);}
43.75% { background: rgb(var(--rgb-green), 0.2);}
50% { background: rgb(var(--rgb-teal), 0.2);}
56.25% { background: rgb(var(--rgb-cyan), 0.2);}
62.5% { background: rgb(var(--rgb-light-blue), 0.2);}
68.75% { background: rgb(var(--rgb-blue), 0.2); }
75% { background: rgb(var(--rgb-indigo), 0.2);}
81.25% { -background: rgb(var(--rgb-deep-purple), 0.2);}
87.5% { background: rgb(var(--rgb-purple), 0.2);}
93.75% { background: rgb(var(--rgb-pink), 0.2);}
}
.: |
ha-state-icon {
animation: double 3s linear infinite alternate, rainbow 40s linear infinite
}
@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); }
}
@keyframes rainbow {
0%, 100% {color: rgb(var(--rgb-red));}
6.25% { color: rgb(var(--rgb-deep-orange));}
12.5% { color: rgb(var(--rgb-orange));}
18.75% { color: rgb(var(--rgb-amber));}
25% { color: rgb(var(--rgb-yellow));}
31.25% { color: rgb(var(--rgb-lime));}
37.5% { color: rgb(var(--rgb-light-green));}
43.75% { color: rgb(var(--rgb-green));}
50% { color: rgb(var(--rgb-teal));}
56.25% { color: rgb(var(--rgb-cyan));}
62.5% { color: rgb(var(--rgb-light-blue));}
68.75% { color: rgb(var(--rgb-blue));}
75% { color: rgb(var(--rgb-indigo));}
81.25% { color: rgb(var(--rgb-deep-purple));}
87.5% { color: rgb(var(--rgb-purple));}
93.75% { color: rgb(var(--rgb-pink));}
}
Random Animation (unchanged, FYI if you dont know. this only updates when the page is refreshed. it is not an active 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 (changed)
type: custom:mushroom-template-card
icon: mdi:shimmer
icon_color: amber
primary: Sparkle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(var(--rgb-disabled), 0.2);
}
.: |
ha-state-icon {
animation: stars 4s linear infinite;
}
@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 (changed)
type: custom:mushroom-template-card
icon: mdi:bacteria
icon_color: light-green
primary: Eeeew
card_mod:
style: |
ha-state-icon {
animation: wiggle 0.5s ease infinite;
transform-origin: 80% 80%;
}
mushroom-shape-icon {
display: flex;
animation: spin 20s infinite;
}
@keyframes wiggle {
0%, 100% { transform: scale(1) rotate(1deg); }
50% { transform: scale(1.04) rotate(-2deg); }
Sunny Animation (changed)
type: custom:mushroom-template-card
primary: Sunny
icon: mdi:weather-sunny
icon_color: amber
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Cloudy
icon: mdi:weather-cloudy
icon_color: grey
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Rainy
icon: mdi:weather-rainy
icon_color: blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Pouring
icon: mdi:weather-pouring
icon_color: blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Tornado
icon: mdi:weather-tornado
icon_color: orange
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Lightning
icon: mdi:weather-lightning
icon_color: amber
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:weather-night
icon_color: amber
primary: Clear Night
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Windy
icon: mdi:weather-windy
icon_color: blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Wind
icon: mdi:weather-windy-variant
icon_color: blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Snow
icon: mdi:weather-snowy
icon_color: grey
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Hail
icon: mdi:weather-hail
icon_color: blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Hurricane
icon: mdi:weather-hurricane
icon_color: red
card_mod:
style: |
ha-state-icon {
animation: spin 1.5s linear infinite reverse;
}
Dust Animation (changed)
type: custom:mushroom-template-card
primary: Dust
icon: mdi:weather-dust
icon_color: brown
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Foggy
icon: mdi:weather-fog
icon_color: grey
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Cloudy
icon: mdi:weather-partly-cloudy
icon_color: amber
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Fireplace
icon: mdi:fireplace
icon_color: red
card_mod:
style: |
ha-state-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 (changed, fyi you can even make the drum a different color to the main icon.)
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: |
ha-state-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$: |
.shape {
background: none !important;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
Pot Animation (changed)
type: custom:mushroom-template-card
icon: mdi:pot-steam
icon_color: grey
primary: Pot
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Serenity
icon: mdi:scent
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: color 6s ease infinite;
}
@keyframes color {
50% { background: rgba(var(--rgb-cyan), 0.2); }
}
.: |
ha-state-icon {
animation: wave 6s ease infinite;
}
@keyframes wave {
50% { transform: rotatey(180deg); color: rgb(var(--rgb-cyan)); }
}
Music #1 Animation (changed)
type: custom:mushroom-template-card
primary: 'Music #1'
icon: mdi:music
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
perspective: 7px;
}
.: |
ha-state-icon {
animation: music 2s ease-in-out infinite alternate;
transform-origin: 50% 100%
}
@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 (changed)
type: custom:mushroom-template-card
primary: 'Music #2'
icon: mdi:music
icon_color: blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:format-list-bulleted-square
icon_color: purple
primary: Playlist
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:grain
icon_color: brown
primary: Grain
card_mod:
style: |
ha-state-icon {
animation: flip 1s steps(1) infinite;
}
@keyframes flip {
50% { transform: rotateY(180deg); }
}
Focus Animation (changed)
type: custom:mushroom-template-card
icon: mdi:bullseye
icon_color: purple
primary: Focus
card_mod:
style: |
ha-state-icon {
animation: focus 4s linear infinite alternate;
}
@keyframes focus {
50% { filter: blur(10px); }
}
Access Point Animation (changed)
type: custom:mushroom-template-card
icon: mdi:access-point
icon_color: teal
primary: Access Point
card_mod:
style:
mushroom-shape-icon$: |
.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; }
}
.: |
ha-state-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%); }
}
Alert Animation (unchanged)
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 (unchanged, doesnt work well on a dark background unless you set a --shape-color.)
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 (changed)
type: custom:mushroom-template-card
primary: Heart
icon: mdi:heart
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
transform-origin: 50% 60%;
--shape-animation: heart 1.3s ease-out infinite both;
}
@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); }
}
.: |
ha-state-icon {
animation: beat 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); }
}
Play Animation (changed)
type: custom:mushroom-template-card
icon: mdi:play
icon_color: orange
primary: Play
card_mod:
style: |
ha-state-icon {
animation: spin 4s steps(4) infinite;
}
Christmas Tree Animation (changed)
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$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-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); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-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) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Doggy Animation (changed)
type: custom:mushroom-template-card
primary: Doggy
icon: mdi:dog
icon_color: brown
card_mod:
style: |
ha-state-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); }
}
Updated Posts 
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5
15 Likes
Sorry Dimitri, but I want to like your post, as you are doing a great job! 
And btw. I already liked the original posts from @rhysb when I first read them 
Itās really great, that you do give credit, where credit is due, but you do invest work and time here as well, so your work should be valued as well! 
Valuing the work of @rhysb doesnāt mean, yourās shouldnāt be valued! 
Btw. you do not happen to know a good vacuum map card, that fits the mushroom design, do you?
Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.
Mushroom Animations 
- Part 4
Even More Mushroom Card Icon Animations
HA Animation (changed)
type: custom:mushroom-template-card
icon: mdi:home-assistant
icon_color: blue
primary: Home Assistant
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:gift
icon_color: deep-orange
primary: Surprise
card_mod:
style: |
ha-state-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 (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:phone-classic
icon_color: light-green
primary: Ring
card_mod:
style: |
ha-state-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$: |
.shape {
--shape-color: none;
top: -4px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-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); }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Marker Animation (changed)
type: custom:mushroom-template-card
icon: mdi:map-marker
icon_color: red
primary: Marker
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Beat
icon: mdi:speaker
icon_color: blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:door
icon_color: brown
primary: Door
card_mod:
style:
mushroom-shape-icon$: |
.shape {
perspective: 45px;
}
.: |
ha-state-icon {
animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
Bounce Animation (changed)
type: custom:mushroom-template-card
icon: mdi:tennis-ball
icon_color: amber
primary: Bounce
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Ghost
icon: mdi:ghost-outline
icon_color: grey
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Rubber Ducky
icon: mdi:duck
icon_color: amber
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:coffee-maker
icon_color: brown
primary: Coffee Machine
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Apple
icon: mdi:food-apple
icon_color: green
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Memory
icon: mdi:memory
icon_color: orange
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Pump
icon: mdi:water-pump
icon_color: light-blue
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Power
icon: mdi:power
icon_color: teal
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
primary: Garage
icon: mdi:garage
icon_color: amber
card_mod:
style: |
ha-state-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 (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:coffee
icon_color: brown
primary: Coffee
card_mod:
style: |
ha-state-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$: |
.shape {
--shape-color: none;
top: -2px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: steam 2s ease-in infinite;
clip-path: inset(0 0 61% 0);
}
@keyframes steam {
0%, 100% { opacity: 1; }
80% { opacity: 0; }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Auto Fix Animation (changed)
type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: Auto Fix
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:blender
icon_color: orange
primary: Grinder
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:solar-power-variant
icon_color: amber
primary: Solar Panel
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: amber
primary: Light Bulb
card_mod:
style: |
ha-state-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 (changed)
type: custom:mushroom-template-card
icon: mdi:lightbulb-on
icon_color: orange
primary: Eureka
card_mod:
style: |
ha-state-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 (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
primary: Trash
card_mod:
style: |
ha-state-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$: |
.shape {
--shape-color: none;
top: 0.3px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-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); }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Heat Pump Animation (changed)
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: |
ha-state-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$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
position: absolute;
animation: spin 2s linear infinite;
clip-path: circle(27.3% at 50% 50%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
Air Purifier Animation (changed)
type: custom:mushroom-template-card
icon: mdi:air-purifier
icon_color: cyan
primary: Air Purifier
card_mod:
style: |
ha-state-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 (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:calendar-clock
icon_color: purple
primary: Calendar Clock
card_mod:
style: |
ha-state-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$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 67% 67%;
clip-path: circle(17% at 67% 67%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
CRT Animation (changed. i did also change the if statement structure here because i find this method easier to read and trouble shoot.)
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: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;
{% else %}
animation: tube-off 2s linear forwards;
{% endif %}
}
@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 (changed)
type: custom:mushroom-template-card
icon: mdi:microwave
icon_color: blue
primary: Microwave
card_mod:
style: |
ha-state-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:
{{ 'animation: java 4s linear infinite;' if is_state(config.entity, 'on') }}
Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening the {% else %} is technically not even required.
{% if is_state(config.entity, 'on') %}
animation: java 4s linear infinite;
{% else %}
{% endif %}
The complete card would look like this:
Coffee Machine Card (new if statements and structure changed)
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: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: java 4s linear infinite;
{% else %}
{% endif %}
}
@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:
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.dryer_power') | float > 4 }}
Added by Dimitri.
Or you can make your if statement block like this instead. i think this is easier to read. it does take up more space in the code, but easier to see what is happening the {% else %} is technically not even required.
{% if states(sensor.dryer_power) | float > 4 %}
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
{% else %}
{% endif %}
The complete card would look like this:
Dryer Card (new if statements and structure changed)
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: |
ha-state-icon {
transform-origin: 50% 65%;
{% if states('sensor.dryer_power') | float > 4 %}
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
{% else %}
{% end if %}
}
@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.
Added by Dimitri.
This is not true if you complete the if statements in the way that i have showed. that is unless you need the animations to be based on different conditions.
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 (changed)
card_mod:
style: |
ha-state-icon {
}
Tile Card (changed)
card_mod:
style:
ha-tile-icon$: |
ha-icon {
}
Animated Tile Card (changed)
type: tile
entity: fan.bathroom_fan
color: green
card_mod:
style:
ha-tile-icon$: |
ha-icon {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
Updated Posts
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5
17 Likes
Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.
Mushroom Animations - Part 5
Mushroom Chip Animations
Chip Animated Scene (changed)
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
icon: mdi:snail
icon_color: brown
- type: template
icon: mdi:flower
icon_color: amber
- type: template
icon: mdi:butterfly
icon_color: cyan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: bump 10s infinite;
transform-origin: 50% 100%;
}
@keyframes bump {
0% { transform: translateX(0); }
1% { transform: translateX(-0.6px) rotate(-9deg); }
2% { transform: translateX(0.5px) rotate(7deg); }
3% { transform: translateX(-0.3px) rotate(-5deg); }
4% { transform: translateX(0.2px) rotate(3deg); }
5% { transform: translateX(0); }
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
animation: slip 0.5s linear infinite alternate;
transform-origin: 100% 100%;
}
@keyframes slip {
from { transform: scale(1.05, 0.9);}
to { transform: scale(0.9, 1.05); }
}
mushroom-template-chip:nth-child(3)$: |
ha-state-icon {
animation: bump 10s infinite;
transform-origin: 50% 100%;
}
@keyframes bump {
50% { transform: translateX(0); }
51% { transform: translateX(-0.6px) rotate(-9deg); }
52% { transform: translateX(0.5px) rotate(7deg); }
53% { transform: translateX(-0.3px) rotate(-5deg); }
54% { transform: translateX(0.2px) rotate(3deg); }
55% { transform: translateX(0); }
}
mushroom-template-chip:nth-child(4)$: |
ha-state-icon {
animation: flutter 5s infinite alternate;
}
@keyframes flutter {
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) scalex({{ range(3, 7) | random / 10 }}); }
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) scalex({{ range(3, 7) | random / 10 }}); }
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) scalex({{ range(3, 7) | random / 10 }}); }
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) scalex({{ range(3, 7) | random / 10 }}); }
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) scalex({{ range(3, 7) | random / 10 }}); }
100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
}
.: |
.chip-container {
background: radial-gradient(circle, rgba(var(--rgb-light-blue), 0.1) 0%, transparent 100%);
border-bottom: 3px dotted rgba(var(--rgb-green));
border-radius: 20%;
box-shadow: 0 5px 1px 0.1px rgba(var(--rgb-green), 0.2)
}
mushroom-template-chip:nth-child(2) {
animation: slide 10s ease-in-out 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); }
}
mushroom-template-chip:nth-child(3) {
transform: translate(100px);
}
mushroom-template-chip:nth-child(4) {
animation: by {{ range(5, 15) | random }}s ease infinite;
}
@keyframes by {
0% { transform: translate(100px, 0px); }
50% { transform: translate({{ range(110, 150) | random }}px, 0px); }
100% { transform: translate(100px, 0px); }
}
All of the below info regarding adding animations to chips is still true.
Adding Animations to Chips
Adding an animation to a Mushroom Chip is a bit more complicated than a normal Mushroom Card. You have the Chips āparentā and multiple Chip āchildrenā. The card_mod can be applied differently to each.
To the Chip
The simplest method is to add the card_mod to the Chip. The disadvantage of doing this is that we canāt address the icon directly, so animations such as clip-path will not work and we canāt have any text on the Chip. This method also breaks the GUI editor of the Chips, so you have to configure with YAML.
Chip Animation (unchanged)
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
.content {
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); }
}
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
.content {
animation: spin 3s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
To the Chips
The more complex but correct method is to add the card_mod to the Chips (parent) and then address each Chip (child). This is done by referencing the mushroom-<chip-type>-chip:nth-child(x) where x is the number of the Chip and <chip-type> is type of Chip, such as template, entity, light etc. So, if I wanted to reference the 5th Entity Chip I would use mushroom-entity-chip:nth-child(5) or the 2nd Template Chip mushroom-template-chip:nth-child(2). The functionality of the GUI editor is retained with this method.
Chips Animation (changed)
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
content: Mushroom
icon: mdi:mushroom
icon_color: red
- type: light
entity: light.rocket_man
icon: mdi:rocket-launch
name: Rocket Man
content_info: name
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-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-template-chip:nth-child(2)$: |
ha-state-icon {
animation: spin 3s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-light-chip:nth-child(3)$: |
ha-state-icon {
{{ 'animation: thrust 100ms infinite, motion 3s ease-in-out infinite;' if is_state('light.rocket_man', 'on') }}
}
@keyframes thrust {
0% { clip-path: polygon(0 0, 0 47%, 22% 57%, 28% 63%, 0 91%, 11% 100%, 37% 73%, 45% 77%, 55% 100%, 100% 100%, 100% 0%); }
33% { clip-path: polygon(0 0, 0 47%, 24% 59%, 42% 76%, 54% 100%, 100% 100%, 100% 0); }
66% { clip-path: polygon(0 0, 0 92%, 28% 64%, 36% 72%, 9% 100%, 100% 100%, 100% 0%); }
}
@keyframes motion {
0%, 100% { transform: translateY(-2px) translateX(-3px); }
50% { transform: translateY(3px) translateX(2px); }
}
Even More Mushroom Card Icon Animations
Monitor Animation (changed)
type: custom:mushroom-template-card
icon: mdi:monitor
icon_color: purple
primary: Monitor
card_mod:
style: |
ha-state-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
Email Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:email
icon_color: orange
primary: Email
card_mod:
style: |
ha-state-icon {
animation: email 4s infinite;
}
@keyframes email {
0%, 32%, 100% { opacity: 1; }
33%, 99% { opacity: 0; }
}
- type: custom:mushroom-template-card
icon: mdi:email-open
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: email-open 4s infinite;
}
@keyframes email-open {
0%, 32%, 100% { opacity: 0; }
33%, 65% { opacity: 1; }
66% { opacity: 0; }
}
- type: custom:mushroom-template-card
icon: mdi:email-newsletter
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: email-newsletter 4s infinite;
}
@keyframes email-newsletter {
0%, 65% { opacity: 0; }
66% { opacity: 1; }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Email #2 Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:email
icon_color: orange
primary: 'Email #2'
card_mod:
style: |
ha-state-icon {
animation: email 2s infinite;
}
@keyframes email {
0%, 49%, 100% { opacity: 1; }
50%, 99% { opacity: 0; }
}
- type: custom:mushroom-template-card
icon: mdi:email-open
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: email-open 2s infinite;
}
@keyframes email-open {
0%, 49%, 100% { opacity: 0; }
50%, 99% { opacity: 1; }
}
card_mod:
style: |
ha-card {
height: 66px;
}
Christmas Tree #2 Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
primary: 'Christmas Tree #2'
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-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); }
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {color: rgb(var(--rgb-red)); }
6.25% { color: rgb(var(--rgb-deep-orange)); }
12.5% { color: rgb(var(--rgb-orange)); }
18.75% { color: rgb(var(--rgb-amber)); }
25% { color: rgb(var(--rgb-yellow)); }
31.25% { color: rgb(var(--rgb-lime)); }
37.5% { color: rgb(var(--rgb-light-green)); }
43.75% { color: rgb(var(--rgb-green)); }
50% { color: rgb(var(--rgb-teal)); }
56.25% { color: rgb(var(--rgb-cyan)); }
62.5% { color: rgb(var(--rgb-light-blue)); }
68.75% { color: rgb(var(--rgb-blue)); }
75% { color: rgb(var(--rgb-indigo)); }
81.25% { color: rgb(var(--rgb-deep-purple)); }
87.5% { color: rgb(var(--rgb-purple)); }
93.75% { color: rgb(var(--rgb-pink)); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
ha-state-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) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
3D Printing Animation (changed)
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:printer-3d-nozzle
icon_color: cyan
primary: 3D Printing
card_mod:
style: |
ha-state-icon {
clip-path: inset(83% 72% 0 0);
}
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:printer-3d-nozzle
icon_color: cyan
primary: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
--ha-card-border-width: 0;
}
ha-state-icon {
animation: print 1s linear infinite alternate;
}
@keyframes print {
0% { transform: translateX(4px); }
30% { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 26%); }
100% { transform: translateX(-4px); clip-path: polygon(0 0, 100% 0%, 100% 100%, 40% 100%, 0 26%); }
}
card_mod:
style: |
ha-card {
height: 66px;
}
3D Printer Animation (changed)
type: custom:mushroom-template-card
primary: 3D Printer
icon: mdi:printer-3d
icon_color: light-blue
card_mod:
style: |
ha-state-icon {
animation: print 2s infinite;
}
@keyframes print {
0%, 100% { clip-path: polygon(0 0, 0 51%, 20% 51%, 51% 33%, 81% 53%, 100% 53%, 100% 0); }
10% { clip-path: polygon(0 0, 0 100%, 49% 100%, 85% 83%, 49% 98%, 50% 89%, 51% 82%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
20% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 56% 79%, 51% 83%, 46% 79%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
30% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 36% 73%, 17% 82%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
40% { clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 83%, 66% 73%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 54% 69%, 50% 61%, 45% 69%, 34% 63%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
60% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 66% 63%, 55% 69%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
70% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 39% 55%, 32% 55%, 25% 54%, 20% 50%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
80% { clip-path: polygon(0 0, 0 100%, 100% 100%, 76% 51%, 68% 53%, 60% 55%, 50% 61%, 50% 50%, 51% 37%, 31% 44%, 30% 35%, 51% 33%, 81% 52%, 100% 52%, 100% 0); }
90% { clip-path: polygon(0 0, 0 100%, 100% 100%, 77% 51%, 67% 42%, 64% 34%, 56% 34%, 50% 36%, 39% 40%, 31% 44%, 30% 35%, 41% 33%, 85% 53%, 100% 52%, 100% 0); }
}
Auto Fix #2 Animation (changed)
type: custom:mushroom-template-card
icon: mdi:auto-fix
icon_color: cyan
primary: 'Auto Fix #2'
card_mod:
style: |
ha-state-icon {
animation: sparkle 2s linear infinite, kadabra 2s ease-in-out infinite;
transform-origin: 10% 90%
}
@keyframes sparkle {
0%, 68%, 100% { clip-path: polygon(0% 100%, 1% 75%, 56% 22%, 80% 43%, 26% 100%); }
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); }
}
Vroom Animation (changed)
type: custom:mushroom-template-card
icon: mdi:car-hatchback
icon_color: red
primary: Vroom
card_mod:
style:
mushroom-shape-icon$: |
.shape {
clip-path: inset(0 0 0 0);
}
.: |
ha-state-icon {
animation: vroom 2s ease-in-out infinite;
}
@keyframes vroom {
49% { opacity: 1;}
50% { transform: translate(32px); opacity: 0; }
51% { transform: translate(-32px); opacity: 0; }
52% { opacity: 1; }
}
Double Garage Animation (changed)
type: custom:mushroom-template-card
primary: Double Garage
icon: mdi:garage-variant
icon_color: amber
card_mod:
style: |
ha-state-icon {
animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
Updated Posts
Part 1, Part 2, Part 3, Part 4, Part 5
Original Posts by @rhysb please only like his posts.
Part 1, Part 2, Part 3, Part 4, Part 5
15 Likes
Does anyone see what is wrong here? The idea is to get the icon to wobble and the background of the card to be red if the state is unlocked. I have this working in another version but I was unable to get the shape color gone.
type: custom:mushroom-template-card
layout: vertical
secondary: |-
{% if is_state(entity, 'unlocked') %}
UNLOCKED
{% else %}
LOCKED
{% endif %}
entity: lock.front_door_lock
primary: |
Front Door
icon_color: |
{% if is_state(entity, 'unlocked') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state(entity, 'unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif %}
tap_action:
action: more-info
hold_action:
action: toggle
fill_container: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color:;
--icon-size: 60px;
--icon-symbol-size: 50px
}
.: |
ha-state-icon {
{{'animation: wobbling 0.7s linear infinite alternate;' if is_state('lock.front_door_lock', 'unlocked') }}
}
@keyframes wobbling {
0% {transform: rotate(-50deg);}
100% {transform: rotate(50deg);}
}
ha-card {
background-color: {{ 'rgba(255, 0, 0, 0.4)' if
is_state('lock.front_door_lock', 'unlocked') else 'rgba(0, 131, 0, .4)'}};
height:161px !important;
}
Only issue is your .: | placement. I also added the word none to your --shape-color entry. But i honestly dont think that this matters
type: custom:mushroom-template-card
layout: vertical
secondary: |-
{% if is_state(entity, 'unlocked') %}
UNLOCKED
{% else %}
LOCKED
{% endif %}
entity: lock.front_door_lock
primary: |
Front Door
icon_color: |
{% if is_state(entity, 'unlocked') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state(entity, 'unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif %}
tap_action:
action: more-info
hold_action:
action: toggle
fill_container: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 60px;
--icon-symbol-size: 50px
}
.: |
ha-state-icon {
{{'animation: wobbling 0.7s linear infinite alternate;' if is_state('lock.front_door_lock', 'unlocked') }}
}
@keyframes wobbling {
0% {transform: rotate(-50deg);}
100% {transform: rotate(50deg);}
}
ha-card {
background-color: {{ 'rgba(255, 0, 0, 0.4)' if
is_state('lock.front_door_lock', 'unlocked') else 'rgba(0, 131, 0, .4)'}};
height:161px !important;
}
1 Like
Appreciate the sentiment but updating them takes 100 x less time than coming up with the animations in the first place
I dont know a good vacuum map card unfortunately. I dont have a robo vacuum myself so i havent done much looking to be honestā¦
1 Like
What editor do you use? Because visually the placement looks correct but when I copy and pasted your code, it worked fine.
Just the built in editor my friend.
How the indenting is meant to look.
How yours looked.
Its not huge but there is a definite difference
Basically think of the fact that the .: | should start at the same place you would place any other entry under style: see how in my example the mushroom-shape-icon$: | and the .: | start at the same indentation?
1 Like
I would love to see some guru post the sollution here, Iām also looking into this.
Iām no guru, but I was looking for this a few days ago to show when a door was opened/closed. Iām not sure if itās what youāre looking for, but I putā¦
{% if is_state(config.entity, 'off') %}
Closed {{ relative_time(states.binary_sensor.basement_door_state.last_changed) }} ago
{%else%}
Opened {{ relative_time(states.binary_sensor.basement_door_state.last_changed) }} ago
{%endif%}
ā¦ in and it works for me.
MrGrey.
1 Like
The following worked for me:
{{ relative_time(states.media_player.sony_kd_65ag8.last_updated) | replace("hours", "uur") | replace("minute", "minuut") | replace("minutes", "minuten") | replace("second", "seconde") | replace("seconds", "seconden") }} geleden
I needed some translations because the relative time comes from the back-end. Please edit to your needs.
Nice, I also posted my sollution below. Thanks for the reply.
Fyi @MrGrey & @remon1496
What you have both posted works just fine but isnt super accurate. For example i have a sensor that states last changed 2 days 1 hour 55m ago. With you templates it only gives me 2 days ago.
I prefer the below. While it is long it also gives better accuracy. But of course to each their own
{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.bedroom_wardrobe_right_contact.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }}
You can then define however you want to call the days hours minutes. Right now it just does 2d 1h 55m.
2 Likes
Theyāre picture entity cards but when you touch one it opens a larger popup.
My Home Assistant configurationThank you! This would come in handy in the future! Indeed, mine isnāt super accurate, but itās good enough for my specific usecase (the state changes at least once a day).