@Boostin4HP Do you mind sharing the code for your dashboard?
Is that a single dashboard or there is some navigation involved?
1 Like
Again, please like the original post by @rhysb here i have only updated some animations that needed updating.
Mushroom Title Animations (all unchanged)
These ones run once to transition in the Mushroom Title.
Typewriter Animation (unchanged)
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Mushroom.
subtitle: Typewriter
card_mod:
style:
mushroom-title-card$: |
h1 {
width: 9ch;
animation: typing 5s steps(9), cursor 0.25s step-end 30 alternate;
overflow: hidden;
border-right: 2px solid transparent;
font-family: monospace;
}
@keyframes typing {
0% { width: 0; }
}
@keyframes cursor {
50% { border-color: var(--primary-text-color); }
}
Scale-in Animation (unchanged)
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Mushroom 🍄
subtitle: Scale-in
card_mod:
style:
mushroom-title-card$: |
* {
animation: scale-in 1s;
transform-origin: 15%;
}
@keyframes scale-in {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
Fade-in Animation (unchanged)
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Mushroom 🍄
subtitle: Fade-in
card_mod:
style:
mushroom-title-card$: |
* {
animation: fade 1s ease-in;
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
Focus Animation (unchanged)
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Mushroom 🍄
subtitle: Focus
card_mod:
style:
mushroom-title-card$: |
* {
animation: focus 1.5s;
}
@keyframes focus {
0% { filter: blur(10px); opacity: 0; }
}
Drop-in Animation (unchanged)
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Mushroom 🍄
subtitle: Drop-in
card_mod:
style:
mushroom-title-card$: |
* {
animation: drop-in 1.1s both;
}
@keyframes drop-in {
0% { transform: translateY(-400px); animation-timing-function: ease-in; filter: blur(40px); opacity: 0; }
38% { transform: translateY(0); animation-timing-function: ease-out; filter: blur(0); opacity: 1; }
55% { transform: translateY(-16px); animation-timing-function: ease-in; }
72% { transform: translateY(0); animation-timing-function: ease-out; }
81% { transform: translateY(-7px); animation-timing-function: ease-in; }
90% { transform: translateY(0); animation-timing-function: ease-out; }
95% { transform: translateY(-2px); animation-timing-function: ease-in; }
100% { transform: translateY(0); animation-timing-function: ease-out; }
}
Slide-in Animation (unchanged)
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Mushroom 🍄
subtitle: Slide-in
card_mod:
style:
mushroom-title-card$: |
* {
animation: slide-in 1.1s both;
}
@keyframes slide-in {
0% { transform: translateX(600px) scaleX(2.5) scaleY(0.2); animation-timing-function: ease-in; filter: blur(40px); opacity: 0; }
38% { transform: translateX(0) scaleY(1) scaleX(1); animation-timing-function: ease-out; filter: blur(0); opacity: 1; }
55% { transform: translateX(68px) scaleY(1.1) scaleX(0.95); animation-timing-function: ease-in; }
72% { transform: translateX(0) scaleY(1) scaleX(1); animation-timing-function: ease-out; }
81% { transform: translateX(32px) scaleY(1.05) scaleX(0.98); animation-timing-function: ease-in; }
90% { transform: translateX(0) scaleY(1) scaleX(1); animation-timing-function: ease-out; }
95% { transform: translateX(8px); animation-timing-function: ease-in; }
100% { transform: translateX(0); animation-timing-function: ease-out; }
}
Flicker Animation (unchanged)
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Mushroom 🍄
subtitle: Flicker
card_mod:
style:
mushroom-title-card$: |
* {
animation: flicker 1.1s both;
}
@keyframes flicker {
0%, 10%, 10.2%, 20%, 20.6%, 30%, 30.6%, 45%, 55.1%, 57%, 60.1%, 65%, 75.1%, 77%, 85.1%, 86% { opacity: 0; }
10.1%, 20.1%, 30.1%, 30.5%, 45.1%, 50%, 55%, 57.1%, 60%, 65.1%, 75%, 77.1%, 85%, 86.1%, 100% { opacity: 1; }
}
Mushroom Spinner Animations
Comet Spinner (unchanged)
type: custom:mushroom-template-card
icon: none
primary: Comet
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border-right: 4px solid;
border-bottom: 4px solid transparent;
--shape-animation: spin 1s linear infinite, comet 10s infinite;
--shape-color: none;
--icon-size: 38px;
}
@keyframes comet {
0% { border-right-color: rgb(var(--rgb-red)); }
6.25% { border-right-color: rgb(var(--rgb-deep-orange)); }
12.5% { border-right-color: rgb(var(--rgb-orange)); }
18.75% { border-right-color: rgb(var(--rgb-amber)); }
25% { border-right-color: rgb(var(--rgb-yellow)); }
31.25% { border-right-color: rgb(var(--rgb-lime)); }
37.5% { border-right-color: rgb(var(--rgb-light-green)); }
43.75% { border-right-color: rgb(var(--rgb-green)); }
50% { border-right-color: rgb(var(--rgb-teal)); }
56.25% { border-right-color: rgb(var(--rgb-cyan)); }
62.5% { border-right-color: rgb(var(--rgb-light-blue)); }
68.75% { border-right-color: rgb(var(--rgb-blue)); }
75% { border-right-color: rgb(var(--rgb-indigo)); }
81.25% { border-right-color: rgb(var(--rgb-deep-purple)); }
87.5% { border-right-color: rgb(var(--rgb-purple)); }
93.75% { border-right-color: rgb(var(--rgb-pink)); }
100% { border-right-color: rgb(var(--rgb-red)); }
}
Crescent Spinner (unchanged)
type: custom:mushroom-template-card
icon: none
primary: Crescent
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 1px solid rgba(var(--rgb-disabled), 0.8);
border-right: 3px solid rgba(var(--rgb-light-blue));
--shape-animation: spin 1s linear infinite;
--shape-color: none;
--icon-size: 40px;
}
Munch Spinner (changed)
type: custom:mushroom-template-card
icon: none
primary: Munch
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: spin 2s linear infinite;
border-radius: 50%;
border: 4px solid transparent;
border-right-color: rgb(var(--rgb-amber));
border-top-color: rgb(var(--rgb-amber));
--shape-color: none;
--icon-symbol-size: 34px;
--icon-size: 34px;
}
.: |
ha-state-icon {
animation: spin 1.5s linear infinite reverse;
border-radius: 50%;
border: 4px solid transparent;
border-right-color: rgb(var(--rgb-amber));
border-top-color: rgb(var(--rgb-amber));
--icon-symbol-size: 34px;
--icon-size: 34px;
}
Double Spinner (changed)
type: custom:mushroom-template-card
icon: none
primary: Double
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 4px double transparent;
border-left-color: rgb(var(--rgb-amber));
border-bottom-color: rgb(var(--rgb-amber));
--shape-animation: spin 2s linear infinite;
--shape-color: none;
--icon-symbol-size: 20px;
--icon-size: 34px;
}
.: |
ha-state-icon {
animation: spin 1s linear infinite reverse;
border-radius: 50%;
border: 4px double transparent;
border-right-color: rgb(var(--rgb-deep-orange));
border-top-color: rgb(var(--rgb-deep-orange));
}
St. Nick Spinner (changed, this one does look weird on firefox for me for some reason. works fine on mobile.)
type: custom:mushroom-template-card
icon: none
primary: St. Nick
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 4px dashed rgb(var(--rgb-green));
--shape-animation: spin 2s linear infinite;
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
.: |
ha-state-icon {
animation: spin 0.5s linear infinite reverse;
border-radius: 50%;
border: 8px dotted rgb(var(--rgb-red));
}
Gradient Spinner (unchanged)
type: custom:mushroom-template-card
icon: none
primary: Gradient
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(farthest-side, rgb(var(--rgb-blue)) 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, rgb(var(--rgb-blue)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
--shape-animation: spin 1s infinite linear;
}
Dots Spinner (unchanged)
type: custom:mushroom-template-card
icon: none
primary: Dots
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 4px dotted transparent;
--shape-animation: spin 800ms ease-in-out infinite, color 10s infinite;
--shape-color: none;
--icon-size: 34px;
}
@keyframes color {
0% { border-right-color: rgb(var(--rgb-red)); border-top-color: rgb(var(--rgb-red)); }
6.25% { border-right-color: rgb(var(--rgb-deep-orange)); border-top-color: rgb(var(--rgb-deep-orange)); }
12.5% { border-right-color: rgb(var(--rgb-orange)); border-top-color: rgb(var(--rgb-orange)); }
18.75% { border-right-color: rgb(var(--rgb-amber)); border-top-color: rgb(var(--rgb-amber)); }
25% { border-right-color: rgb(var(--rgb-yellow)); border-top-color: rgb(var(--rgb-yellow)); }
31.25% { border-right-color: rgb(var(--rgb-lime)); border-top-color: rgb(var(--rgb-lime)); }
37.5% { border-right-color: rgb(var(--rgb-light-green)); border-top-color: rgb(var(--rgb-light-green)); }
43.75% { border-right-color: rgb(var(--rgb-green)); border-top-color: rgb(var(--rgb-green)); }
50% { border-right-color: rgb(var(--rgb-teal)); border-top-color: rgb(var(--rgb-teal)); }
56.25% { border-right-color: rgb(var(--rgb-cyan)); border-top-color: rgb(var(--rgb-cyan)); }
62.5% { border-right-color: rgb(var(--rgb-light-blue)); border-top-color: rgb(var(--rgb-light-blue)); }
68.75% { border-right-color: rgb(var(--rgb-blue)); border-top-color: rgb(var(--rgb-blue)); }
75% { border-right-color: rgb(var(--rgb-indigo)); border-top-color: rgb(var(--rgb-indigo)); }
81.25% { border-right-color: rgb(var(--rgb-deep-purple)); border-top-color: rgb(var(--rgb-deep-purple)); }
87.5% { border-right-color: rgb(var(--rgb-purple)); border-top-color: rgb(var(--rgb-purple)); }
93.75% { border-right-color: rgb(var(--rgb-pink)); border-top-color: rgb(var(--rgb-pink)); }
100% { border-right-color: rgb(var(--rgb-red)); border-top-color: rgb(var(--rgb-red)); }
}
Radial Spinner (changed)
type: custom:mushroom-template-card
icon: none
primary: Radial
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 3px solid rgb(var(--rgb-red));
border-right-color: transparent;
--shape-animation: spin 2s linear infinite;
--shape-color: none;
--icon-symbol-size: 24px;
--icon-size: 36px;
}
.: |
ha-state-icon {
animation: spin 1.5s linear infinite;
border-radius: 50%;
border: 3px solid rgb(var(--rgb-blue));
border-right-color: transparent;
}
Dual Spinner (unchanged)
type: custom:mushroom-template-card
icon: none
primary: Dual
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: spin 1s ease infinite;
border: 4px solid transparent;
border-top-color: rgb(var(--rgb-deep-orange));
border-bottom-color: rgb(var(--rgb-deep-orange));
--shape-color: none !important;
--icon-size: 34px;
}
Morse Spinner (changed)
type: custom:mushroom-template-card
icon: none
primary: Morse
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 4px dashed transparent;
border-right-color: rgb(var(--rgb-purple));
border-left-color: rgb(var(--rgb-purple));
--shape-animation: spin 2s linear infinite;
--shape-color: none;
--icon-symbol-size: 20px;
--icon-size: 34px;
}
.: |
ha-state-icon {
animation: spin 1s linear infinite reverse;
border-radius: 50%;
border: 4px dashed transparent;
border-right-color: rgb(var(--rgb-pink));
border-left-color: rgb(var(--rgb-pink));
}
Fade Spinner (unchanged)
type: custom:mushroom-template-card
icon: none
primary: Fade
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: fade 25s linear infinite reverse;
--shape-color: none;
}
@keyframes fade {
6.24%, 12.49%, 18.74%, 24.99%, 31.24%, 37.49%, 43.74%, 49.99%, 56.24%, 62.49%, 68.74%, 74.99%, 81.24%, 87.49%, 93.74%, 100% { box-shadow: 0 0 20px 20px transparent inset; }
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7) inset; }
6.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-deep-orange), 0.7) inset; }
12.5% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7) inset; }
18.75% { box-shadow: 0 0 0 0 rgba(var(--rgb-amber), 0.7) inset; }
25% { box-shadow: 0 0 0 0 rgba(var(--rgb-yellow), 0.7) inset; }
31.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-lime), 0.7) inset; }
37.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-green), 0.7) inset; }
43.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-green), 0.7) inset; }
50% { box-shadow: 0 0 0 0 rgb(var(--rgb-teal), 0.7) inset; }
56.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-cyan), 0.7) inset; }
62.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-blue), 0.7) inset; }
68.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.7) inset; }
75% { box-shadow: 0 0 0 0 rgb(var(--rgb-indigo), 0.7) inset; }
81.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-deep-purple), 0.7) inset; }
87.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-purple), 0.7) inset; }
93.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-pink), 0.7) inset; }
}
Dotty Spinner (changed)
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
border: 5px dotted transparent;
--shape-animation: spin 2s linear infinite, color 60s infinite;
--icon-symbol-size: 30px;
--icon-size: 32px;
}
@keyframes color {
0% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
6.25% { border-color: rgb(var(--rgb-deep-orange)); color: rgb(var(--rgb-pink)); }
12.5% { border-color: rgb(var(--rgb-orange)); color: rgb(var(--rgb-purple)); }
18.75% { border-color: rgb(var(--rgb-amber)); color: rgb(var(--rgb-deep-purple)); }
25% { border-color: rgb(var(--rgb-yellow)); color: rgb(var(--rgb-indigo)); }
31.25% { border-color: rgb(var(--rgb-lime)); color: rgb(var(--rgb-blue)); }
37.5% { border-color: rgb(var(--rgb-light-green)); color: rgb(var(--rgb-light-blue)); }
43.75% { border-color: rgb(var(--rgb-green)); color: rgb(var(--rgb-cyan)); }
50% { border-color: rgb(var(--rgb-teal)); color: rgb(var(--rgb-teal)); }
56.25% { border-color: rgb(var(--rgb-cyan)); color: rgb(var(--rgb-green)); }
62.5% { border-color: rgb(var(--rgb-light-blue)); color: rgb(var(--rgb-light-green)); }
68.75% { border-color: rgb(var(--rgb-blue)); color: rgb(var(--rgb-lime)); }
75% { border-color: rgb(var(--rgb-indigo)); color: rgb(var(--rgb-yellow)); }
81.25% { border-color: rgb(var(--rgb-deep-purple)); color: rgb(var(--rgb-amber)); }
87.5% { border-color: rgb(var(--rgb-purple)); color: rgb(var(--rgb-orange)); }
93.75% { border-color: rgb(var(--rgb-pink)); color: rgb(var(--rgb-deep-orange)); }
100% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
}
.: |
ha-state-icon {
animation: spin 1s linear infinite reverse, color 60s infinite;
}
@keyframes color {
0% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
6.25% { border-color: rgb(var(--rgb-deep-orange)); color: rgb(var(--rgb-pink)); }
12.5% { border-color: rgb(var(--rgb-orange)); color: rgb(var(--rgb-purple)); }
18.75% { border-color: rgb(var(--rgb-amber)); color: rgb(var(--rgb-deep-purple)); }
25% { border-color: rgb(var(--rgb-yellow)); color: rgb(var(--rgb-indigo)); }
31.25% { border-color: rgb(var(--rgb-lime)); color: rgb(var(--rgb-blue)); }
37.5% { border-color: rgb(var(--rgb-light-green)); color: rgb(var(--rgb-light-blue)); }
43.75% { border-color: rgb(var(--rgb-green)); color: rgb(var(--rgb-cyan)); }
50% { border-color: rgb(var(--rgb-teal)); color: rgb(var(--rgb-teal)); }
56.25% { border-color: rgb(var(--rgb-cyan)); color: rgb(var(--rgb-green)); }
62.5% { border-color: rgb(var(--rgb-light-blue)); color: rgb(var(--rgb-light-green)); }
68.75% { border-color: rgb(var(--rgb-blue)); color: rgb(var(--rgb-lime)); }
75% { border-color: rgb(var(--rgb-indigo)); color: rgb(var(--rgb-yellow)); }
81.25% { border-color: rgb(var(--rgb-deep-purple)); color: rgb(var(--rgb-amber)); }
87.5% { border-color: rgb(var(--rgb-purple)); color: rgb(var(--rgb-orange)); }
93.75% { border-color: rgb(var(--rgb-pink)); color: rgb(var(--rgb-deep-orange)); }
100% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
}
Plain Spinner (unchanged)
type: custom:mushroom-template-card
icon: none
primary: Plain
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 5px solid rgb(var(--rgb-disabled));
border-left-color: transparent;
--shape-animation: spin 1s linear infinite;
--shape-color: none;
--icon-size: 32px;
}
Toggle Spinner (changed)
type: custom:mushroom-template-card
icon: none
primary: Toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 4px solid transparent;
border-top-color: rgb(var(--rgb-cyan));
border-left-color: rgb(var(--rgb-cyan));
--shape-animation: spin 1s linear infinite;
--shape-color: none;
--icon-symbol-size: 34px;
--icon-size: 34px;
.: |
ha-state-icon {
animation: spin 1s linear infinite reverse;
border-radius: 50%;
border: 4px solid transparent;
border-right-color: rgb(var(--rgb-cyan));
border-left-color: rgb(var(--rgb-cyan));
}}
Spheres Spinner (changed, this one looks very weird on firefox for me. but works fine on mobile.)
type: custom:mushroom-template-card
icon: none
primary: Spheres
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 12px dotted transparent;
border-right-color: rgb(var(--rgb-red));
border-left-color: rgb(var(--rgb-red));
--shape-animation: spin 2s linear infinite;
--shape-color: none;
--icon-symbol-size: 18px;
--icon-size: 18px;
}
.: |
ha-state-icon {
animation: spin 1s linear infinite reverse;
border-radius: 50%;
border: 12px dotted transparent;
border-right-color: rgb(var(--rgb-blue));
border-left-color: rgb(var(--rgb-blue));
}
Triple Spinner (changed)
type: custom:mushroom-template-card
icon: mdi:loading
icon_color: red
primary: Triple
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
border: 4px solid transparent;
border-bottom-color: rgb(var(--rgb-green));
--shape-animation: spin 2s linear infinite;
--shape-color: none;
--icon-symbol-size: 42px;
--icon-size: 34px;
}
.: |
ha-state-icon {
animation: spin 4s linear infinite;
border-radius: 50%;
border: 4px solid transparent;
border-bottom-color: rgb(var(--rgb-blue));
}
Mushroom Card Active Animations (all unchanged)
Activate Background (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Background
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transition: 0s;
}
Activate Box-Shadow (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Box-Shadow
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card:active {
box-shadow: 0 0 20px rgba(var(--rgb-disabled), 0.8);
transition: 0s;
}
Activate Scale-Out (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale-Out
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
Activate Scale-In (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale-In
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
Activate Push Down (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Push Down
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
Activate Push In (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Push In
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card:active {
transform: translateY(-1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
Activate Ripple (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Ripple
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
overflow: hidden;
}
ha-card:after {
display: none;
content: "";
position: absolute;
border-radius: 50%;
background-color: rgba(var(--rgb-disabled), 0.1);
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
top: 50%;
left: 50%;
animation: ripple 750ms;
opacity: 0;
}
ha-card:active:after {
display: block;
}
@keyframes ripple {
from { opacity: 1; transform: scale(0); }
to { opacity: 0; transform: scale(10); }
}
Activate 3D Perspective (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: 3D Perspective
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
perspective: 900px;
}
ha-card:active {
transform: rotateY(20deg);
transition: 0s;
}
Activate 3D Tilt (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: 3D Tilt
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
perspective: 1000px;
}
ha-card:active {
transform: rotate3d(0.5, -0.9, 0, 10deg) rotate(1deg);
transition: 0s;
}
Activate 3D Flap (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: 3D Flap
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
:host {
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
Activate Icon Spin (unchanged)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Icon Spin
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card:active mushroom-shape-icon {
display: flex;
#--icon-animation: spin 1s;
transform: rotate(360deg);
transition: 500ms;
}
Applying Active Animations to your Theme (unchanged)
Rather than applying the active animations to each card, you can apply the to all cards by adding the card_mod to your theme.
Mushroom Custom:
card-mod-theme: "Mushroom Custom"
card-mod-card: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
Reference documentation
Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub
lovelace-card-mod/README-themes.md at master · thomasloven/lovelace-card-mod · GitHub
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
20 Likes
@dimitri.landerloos
I have a swipe card for my living room where it should show the temperature on the left top and chip for on/off on the right top followed by mini graph chart right underneath for temperature and humidity in my living room. I have done that successfully but unable to reduce the space between them so it can come to visually pleasing size.
I tried it in both vertical-stack way and grid way.
Here is with grid way:
type: custom:swipe-card
cards:
- type: custom:stack-in-card
cards:
- type: grid
columns: 2
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
Here it is with vertical stack way:
type: custom:swipe-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
Space in the vertical stack way shown later is preferable but without showing both cards separately.
My objective is to include all three things (temperature and chip entities horizontally on top and temperature/humidity chart right under those) while the whole card swipes to individual lights.
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
