Wonderful. This is very good to know. Thanks for these codes.
Also, if I want the card to only glow when a specific entity state is on then how can I implement that? It will stay without the box shadow when my lights are off.
I was trying to make sense of your code in alarm card but i don’t think that code is applicable to how I want it.
Basically take the state of any entity you have and do this:
card_mod:
style: |
ha-card {
{% if states('entity_type.entity_id') == 'state' %}
box-shadow: your box shadow settings;
{% else %}
box-shadow: none (or maybe a different shadow?,
or if you want it to go back to default just leave this entire section blank. Dont even include the box shadow reference)
{% endif %}
The only reason i referred to config.entity in the alarm panel card is esentially a trick to use whatever entity is being used in the card itself as the entity being used for the if state template 
Works!
This was pretty good actually. I already had an if for lightbulb chip to appear at the bottom when the light is on but this is good to know that I could add a second if as well. Makes sense.
Hi @rhysb,
i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here.
i will also link to both your original post and my updated ones in my guide, but i will send people to your post for giving it a like
There are two built-in animations for Mushroom cards that can be used without specifying any @keyframes. These are spin, which is used for the rotating fan, and pulse, which fades in and out.
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
style: |
ha-state-icon {
animation: spin 1s linear infinite;
}
type: custom:mushroom-template-card
icon: mdi:pulse
icon_color: red
primary: Pulse
card_mod:
style: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@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% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
}
Climate Animated Icons
type: custom:mushroom-climate-card
entity: climate.office_air_conditioner
hvac_modes:
- heat_cool
- heat
- cool
- fan_only
- dry
show_temperature_control: true
collapsible_controls: false
name: Air Conditioner
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
type: custom:mushroom-template-card
primary: Boil
icon: mdi:kettle-steam
icon_color: red
card_mod:
style: |
ha-state-icon {
animation: boil 500ms infinite;
}
@keyframes boil {
0%, 100% { 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); clip-path: polygon(0 0, 66% 10%, 67% 30%, 88% 52%, 100% 100%, 0 100%); }
20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
}
type: custom:mushroom-template-card
primary: Fire
icon: mdi:fire
icon_color: red
card_mod:
style: |
ha-state-icon {
animation: fire 1.5s infinite;
transform-origin: 50% 85%;
}
@keyframes fire {
0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
}
type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: light-blue
primary: Shower
card_mod:
style: |
ha-state-icon {
animation: clip 0.7s ease-out infinite;
}
@keyframes clip {
0% {clip-path: inset(0 0 45% 0); }
100% { clip-path: inset(0 0 0 0); }
}
type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: cyan
primary: Sprinkler
card_mod:
style: |
ha-state-icon {
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: amber
primary: Washing Machine
card_mod:
style: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@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); }
}
@keyframes drum {
50% { 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); }
}
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: blue
primary: Dishwasher
card_mod:
style: |
ha-state-icon {
animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
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); }
}
type: custom:mushroom-template-card
icon: mdi:tumble-dryer
icon_color: teal
primary: Dryer
card_mod:
style: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
type: custom:mushroom-template-card
primary: Ding
icon: mdi:bell-ring
icon_color: indigo
card_mod:
style: |
ha-state-icon {
animation: ring 4s linear infinite;
transform-origin: 50% 15%;
}
@keyframes ring {
0% { transform: rotate(0); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
2% { transform: rotate(30deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
6% { transform: rotate(-28deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
10% { transform: rotate(34deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
14% { transform: rotate(-32deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
18% { transform: rotate(30deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
22% { transform: rotate(-28deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
26% { transform: rotate(26deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
30% { transform: rotate(-24deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
34% { transform: rotate(22deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
38% { transform: rotate(-20deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
42% { transform: rotate(18deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
46% { transform: rotate(-16deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
50% { transform: rotate(14deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
54% { transform: rotate(-12deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
58% { transform: rotate(10deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
62% { transform: rotate(-8deg); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
66% { transform: rotate(6deg); }
70% { transform: rotate(-4deg); }
74% { transform: rotate(2deg); }
78% { transform: rotate(-1deg); }
82% { transform: rotate(1deg); }
86% { transform: rotate(0); }
100% { transform: rotate(0); clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%, 85% 50%, 80% 30%, 60% 5%, 40% 5%, 20% 30%, 15% 50%); }
}
type: custom:mushroom-template-card
icon: mdi:alarm
icon_color: red
primary: Alarm
card_mod:
style: |
ha-state-icon {
animation: alarm 0.8s ease infinite;
}
@keyframes alarm {
0%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-2px) rotate(-27deg); }
20% { transform: translateY(-2px) rotate(21deg); }
30% { transform: translateY(-2px) rotate(-15deg); }
40% { transform: translateY(-2px) rotate(9deg); }
50% { transform: translateY(0); }
60% { transform: translateY(-1.2px) }
}
type: custom:mushroom-template-card
icon: mdi:rocket-launch
icon_color: deep-orange
primary: Rocket Man
card_mod:
style: |
ha-state-icon {
animation: thrust 100ms infinite, motion 3s ease-in-out infinite;
}
@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); }
}
type: custom:mushroom-template-card
primary: Fountain
icon: mdi:fountain
icon_color: light-blue
card_mod:
style: |
ha-state-icon {
animation: fountain 1.5s ease infinite;
}
@keyframes fountain {
0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
type: custom:mushroom-template-card
icon: mdi:motion-sensor
icon_color: blue
primary: Motion
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
}
.: |
ha-state-icon {
animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
type: custom:mushroom-template-card
primary: Cog
icon: mdi:cog
icon_color: grey
card_mod:
style: |
ha-state-icon {
animation: spin 1.5s steps(5) infinite;
}
type: custom:mushroom-template-card
icon: mdi:wifi
icon_color: green
primary: Signal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-state-icon {
animation: clip 2s steps(1) infinite;
}
@keyframes clip {
0% { clip-path: circle(0% at 50% 85%); }
20% { clip-path: circle(30% at 50% 85%); }
40% { clip-path: circle(55% at 50% 85%); }
60% { clip-path: circle(80% at 50% 85%); }
}
type: custom:mushroom-template-card
icon: mdi:alarm-light
icon_color: red
primary: Alert
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: alert-shape 0.8s infinite;
}
@keyframes alert-shape {
0%, 100% { --shape-color: rgba(var(--rgb-orange), 0.2); }
60% { --shape-color: rgba(var(--rgb-red), 0.2); }
}
.: |
ha-state-icon {
animation: alert 0.8s infinite;
}
@keyframes alert {
0%, 100% { color: rgb(var(--rgb-orange)); }
50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
}
type: custom:mushroom-template-card
icon: mdi:console-line
icon_color: grey
primary: Console
card_mod:
style: |
ha-state-icon {
animation: console 1s infinite;
}
@keyframes console {
50% { clip-path: polygon(0 0, 100% 0, 24% 100%, 0 100%); }
}
type: custom:mushroom-template-card
icon: mdi:dialpad
icon_color: blue
primary: Keypad
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 4s infinite;
}
@keyframes ping {
55% { box-shadow: 0 0 1px 0px rgba(var(--rgb-blue), 0.3) inset; }
100% { box-shadow: 0 0 5px 15px transparent inset; }
}
.: |
ha-state-icon {
animation: pin 4s infinite;
transform-origin: 50% 75%;
}
@keyframes pin {
0%, 15%, 25%, 35%, 45%, 55% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 100%, 1% 23%, 36% 23%, 36% 0%, 100% 0, 100% 100%); }
20% { clip-path: polygon(0% 100%, 0 0, 62% 0, 61% 25%, 100% 24%, 100% 100%); }
30% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 25%, 36% 25%, 37% 50%, 63% 49%, 62% 26%, 0 25%); }
40% { clip-path: polygon(0 51%, 0 0, 100% 0, 100% 100%, 36% 100%, 37% 51%); }
50% { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 50%, 64% 50%, 64% 100%); }
}
type: custom:mushroom-template-card
icon: mdi:eye
icon_color: blue
primary: Eye
card_mod:
style: |
ha-state-icon {
animation: wink 4s ease-in-out infinite;
}
@keyframes wink {
0%, 100% { transform: scale(1, 1); }
19% { transform: scale(1.05, 0.6); }
20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
25% { transform: scale(1, 1); }
28% { transform: scale(0.95, 1.05); }
30% { clip-path: inset(0 0 0 0); }
}
type: custom:mushroom-template-card
icon: mdi:cctv
icon_color: deep-purple
primary: 'Camera #1'
card_mod:
style: |
ha-state-icon {
animation: flip 8s ease-in-out infinite alternate;
}
@keyframes flip {
50% { transform: rotateY(180deg); }
}
type: custom:mushroom-template-card
primary: 'Camera #2'
icon: mdi:cctv
icon_color: deep-purple
card_mod:
style: |
ha-state-icon {
animation: scan 5s ease-in-out infinite;
transform-origin: 90% 80%
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}
type: custom:mushroom-template-card
icon: mdi:battery
icon_color: green
primary: 'Battery #1'
card_mod:
style: |
ha-state-icon {
animation: charge 3s linear infinite;
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
type: custom:mushroom-template-card
icon: mdi:battery-high
icon_color: green
primary: 'Battery #2'
card_mod:
style: |
ha-state-icon {
animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
type: custom:mushroom-template-card
primary: Wrench
icon: mdi:wrench
icon_color: grey
card_mod:
style: |
ha-state-icon {
animation: tighten 1.5s ease-in-out infinite;
transform-origin: 31% 31%
}
@keyframes tighten {
0%, 100% { transform: rotate(-20deg); }
80% { transform: rotate(15deg); }
}
This is just part 1 of the pack created by @rhysb. the remaining 4 more parts will be posted as i complete reviews of them to see what has changed. if you like any of these animations please go to the original post here and give it a like. i didnt create any of these animations. i just updated them for the newest format
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
@Boostin4HP Do you mind sharing the code for your dashboard?
Is that a single dashboard or there is some navigation involved?
Again, please like the original post by @rhysb here i have only updated some animations that needed updating.
These ones run once to transition in the Mushroom Title.
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); }
}
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; }
}
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; }
}
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; }
}
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; }
}
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; }
}
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; }
}
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)); }
}
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;
}
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;
}
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));
}
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));
}
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;
}
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)); }
}
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;
}
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;
}
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));
}
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; }
}
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)); }
}
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;
}
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));
}}
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));
}
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));
}
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;
}
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;
}
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;
}
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;
}
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);
}
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);
}
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); }
}
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;
}
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;
}
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;
}
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;
}
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
@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.
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)); }
}
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); }
}
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));}
}
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}};
}
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%); }
}
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); }
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); }
}
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); }
}
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%); }
}
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%); }
}
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); }
}
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); }
}
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); }
}
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); }
}
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); }
}
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); }
}
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%); }
}
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;
}
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%); }
}
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%); }
}
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%); }
}
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%); }
}
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;
}
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); }
}
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)); }
}
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); }
}
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); }
}
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); }
}
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); }
}
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); }
}
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%); }
}
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;}
}
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;
}
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); }
}
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;
}
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;
}
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
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.
- Part 4
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); }
}
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) }
}
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;
}
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); }
}
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); }
}
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); }
}
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); }
}
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); }
}
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); }
}
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%); }
}
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%); }
}
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%); }
}
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%); }
}
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%); }
}
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%); }
}
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%); }
}
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;
}
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); }
}
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); }
}
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%); }
}
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%); }
}
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) }
}
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;
}
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;
}
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%); }
}
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;
}
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; }
}
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%); }
}
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:
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:
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.
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 {
}
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
Again, please ONLY like the original posts by @rhysb here i have only updated some animations that needed updating.
- Part 5
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 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.
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.
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); }
}
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.
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); }
}
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%); }
}
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;
}
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;
}
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;
}
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;
}
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); }
}
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); }
}
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; }
}
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
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;
}
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…
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.
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?
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.