Weather Card Preview
Connected to weather.forecast_home with dynamic time-based greeting and animated states.
type: custom:mushroom-template-card
entity: weather.forecast_home
primary: |
{% set hour = now().hour %}
{% if hour >= 23 or hour < 5 %}
Good Night, Ludwig!
{% elif hour >= 18 %}
Good Evening, Ludwig!
{% elif hour >= 12 %}
Good Afternoon, Ludwig!
{% else %}
Good Morning, Ludwig!
{% endif %}
secondary: >
It's {{ state_attr(entity,'temperature') | round(0) }}°C and {{ states(entity)
| replace('-', ' ') | title }}
multiline_secondary: false
icon: |
{% set mapper = {
'sunny': 'mdi:weather-sunny',
'clear-night': 'mdi:weather-night',
'cloudy': 'mdi:weather-cloudy',
'partlycloudy': 'mdi:weather-partly-cloudy',
'rainy': 'mdi:weather-rainy'
} %}
{{ mapper.get(states(entity), 'mdi:weather-cloudy') }}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border-radius: 999px !important;
padding-left: 12px;
padding-right: 20px;
}
Chips Badges Row
Click chips to toggle states. Lights show amber bulb & count; doors & curtains adapt color dynamically.
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: sensor.lights_on_count
icon: "{{ 'mdi:lightbulb-on' if states(entity) | int(0) > 0 else 'mdi:lightbulb' }}"
content: "{{ states(entity) if states(entity) | int(0) > 0 else '' }}"
icon_color: "{{ 'amber' if states(entity) | int(0) > 0 else 'grey' }}"
- type: template
entity: cover.curtain
icon: "{{ 'mdi:curtains' if not is_state(entity, 'closed') else 'mdi:curtains-closed' }}"
icon_color: "{{ 'blue' if not is_state(entity, 'closed') else 'grey' }}"
Front Door Lock Tile Card
Interactive Home Assistant Tile Card for `lock.front_door_lock` with dynamic glow & status toggle.
type: tile
entity: lock.front_door_lock
name: Front Door
card_mod:
style: |
ha-card {
{% if is_state('lock.front_door_lock', 'unlocked') %}
box-shadow: 0 0 14px rgba(255, 90, 90, 0.6);
{% endif %}
}
Server CPU Power
Custom Home Assistant Tile Card for sensor.vodou_cpu_power with orange pulse animation.
type: tile
entity: sensor.vodou_cpu_power
name: Server
icon: mdi:server
color: orange
card_mod:
style:
ha-tile-icon $: |
div.container {
background: rgba(255, 152, 0, 0.2) !important;
box-shadow: 0 0 8px 2px rgba(255, 152, 0, 0.5) !important;
}
Bedroom Climate Analytics
Custom Mini Graph Card (`type: custom:mini-graph-card`) styled for temperature and humidity tracking.
type: custom:mini-graph-card
show:
name: false
icon: false
state: false
legend: true
labels: false
hours_to_show: 168
entities:
- entity: sensor.bedroom_temperature
name: Temperature
color: '#3a86ff'
- entity: sensor.bedroom_humidity
name: Humidity
color: '#8338ec'
y_axis: secondary
Lights On Active List
Dynamically lists all active lights in your home using type: custom:auto-entities.
type: custom:auto-entities
card:
type: entities
show_header_toggle: false
title: Lights on
filter:
include:
- domain: light
state: 'on'
exclude:
- state: unavailable
entity_id: light.bed
show_empty: false
sort:
method: name
ignore_case: true
Lamp Brightness Slider
Touch or drag anywhere across the card to slide brightness. Tap the lamp icon to toggle on/off.
type: custom:bubble-card
card_type: button
sub_button:
main: []
bottom: []
button_type: slider
grid_options:
columns: 6
rows: auto
icon: mdi:lamp
styles: |
.bubble-icon-container {
animation: ${state === 'on' ? 'elastic-pop 0.8s linear' : 'none'};
}
@keyframes elastic-pop {
0% { transform: scale(1); }
30% { transform: scale(1.25); }
40% { transform: scale(0.75); }
50% { transform: scale(1.15); }
65% { transform: scale(0.95); }
75% { transform: scale(1.05); }
100% { transform: scale(1); }
}
entity: light.lamp
slider_fill_orientation: left
slider_value_position: right
light_slider_type: brightness
modules: []
Laundry Appliances (Washer & Dryer)
Interactive Bubble state cards with dynamic cycle animations and custom container tints. Tap either card to toggle running state.
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.washer_status
name: Washer
grid_options:
columns: 6
rows: auto
sub_button:
main: []
bottom: []
modules:
- animated_icon
- icon_color
icon_animations:
animation_type: washing-machine
animated_icon:
mode: washing_machine
background: blue
ignore_state: false
icon_color:
color: white
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.dryer_status
name: Dryer
grid_options:
columns: 6
rows: auto
modules:
- animated_icon
- icon_color
- home-assistant-default
icon_container_color:
color: pink
icon_animations: >-
${entity.state === 'running' ? 'dryer' : 'none'}
animation_type: dryer
sub_button:
main: []
bottom: []
animated_icon:
mode: dryer
background: red
ignore_state: false
icon_color:
color: white
use_hex: false
Floating Navigation Bar
Bottom floating glass menu bar (type: custom:navbar-card).