🏠 Animated Appliance Card for Home Assistant

English | Русский | Deutsch | Français

An Oikos-inspired Lovelace card that turns a dumb washer, dryer, dishwasher, oven or microwave on a smart plug into a beautiful, animated dashboard widget — no smart appliance required.

_{Same card in other UI languages: Русский · Deutsch · Français}

• Five appliances, one card — washer, dryer, dishwasher, oven and microwave, each with its own illustration, icon and wording. Switch with a single line: appliance_type: dryer.
• Animated while running — laundry tumbles behind the glass, dishwasher jets sweep, the oven glows, the microwave turntable turns. All animation is pure CSS/SVG, no external assets, and it respects prefers-reduced-motion.
• Light and dark themes — the card follows your Home Assistant theme automatically, or you can pin it with theme: light | dark.
• Live status — a pulsing "RUNNING / IDLE" badge, an elapsed-time ring and a power gauge with automatic unit handling (1950 W is shown as 1.95 kW; an ampere sensor is labelled "Current draw" automatically).
• Last cycle summary — start time ("Today, 09:55"), duration, energy and cost, each column tappable for more-info.
• Quick actions — header buttons toggle the smart plug and the finish-notification automation, and open the power history.
• Four languages — English, Russian, German and French labels out of the box. The language follows your Home Assistant profile, or set language: en | ru | de | fr explicitly.
• Visual editor — the card ships a config form, so it can be set up from the UI without touching YAML.
• Zero dependencies — a single vanilla-JS file with Shadow DOM. Every entity option except status_entity is optional: blocks without an entity are simply hidden. Responsive via CSS container queries.

theme: auto (the default) follows Home Assistant: switch your dashboard to a dark theme and the card follows on the next render. theme: light and theme: dark pin it regardless of the dashboard.

1. Copy washing-machine-card.js to /config/www/.

2. Add a dashboard resource (Settings → Dashboards → Resources, or lovelace: resources: in YAML mode):

   url: /local/washing-machine-card.js?v=3
   type: module

   Bump ?v= after every update to bust the browser cache.

Add https://github.com/sionetta/wm_animated_ha_card as a custom repository (type: Dashboard), then install Washing Machine Animated Card.

type: custom:washing-machine-card
appliance_type: washer                             # washer | dryer | dishwasher | oven | microwave
name: Washing machine
status_entity: binary_sensor.washing_in_progress   # REQUIRED
plug_entity: switch.washing_machine_plug           # plug button, tap = toggle
notify_entity: automation.washing_finished         # notification button, tap = toggle
power_entity: sensor.washing_machine_power         # gauge + running detection
power_threshold: 10                                # running above this value
power_max: 2500                                    # gauge maximum
last_wash_entity: input_datetime.wm_last_start     # cycle start timestamp
duration_entity: input_number.wm_last_duration     # cycle duration, minutes
energy_entity: input_number.wm_last_energy         # kWh per cycle
cost_entity: input_number.wm_last_cost             # cost per cycle
currency: "€"
language: en                                       # en / ru / de / fr (default: HA language)
theme: auto                                        # auto / light / dark

Titles and labels are translated into all four languages; name overrides the title.

The appliance itself reports nothing — everything is derived from a smart plug with power monitoring:

• a template binary_sensor (power above a threshold, with delay_off of a few minutes so inter-cycle pauses don't count as "finished") drives the status;
• a small automation stores the cycle start into input_datetime, and on finish writes duration, energy and cost into input_number helpers which the card displays as the "Last cycle" panel.

An example Home Assistant package with these sensors, helpers and automations is in examples/washing_machine_package.yaml.

If your appliance already reports its own state, you don't need the plug or any of the helpers. Home Connect (Bosch / Siemens / Neff / Gaggenau), Miele@home, LG ThinQ and SmartHQ all expose an operation state entity, so status_entity can point straight at it:

type: custom:washing-machine-card
appliance_type: washer
status_entity: sensor.washer_operation_state
plug_entity: switch.washer_power
running_states: [run]

A dryer, dishwasher, oven or microwave is the same config with a different appliance_type and entity prefix. Narrow running_states to the one state that really means "running", otherwise a paused or powered-but-idle appliance reads as running.

examples/smart_appliance.yaml has the full version, including the progress, finish time and door values the card has no options for, plus notes on what stays empty and why.

See CHANGELOG.md for the release history.

MIT © 2026 sionetta