The Wall — one custom Lovelace card that runs the whole 43" dashboard

The Wall — one custom Lovelace card that runs the whole 43" dashboard

Instead of stacking a pile of Lovelace cards on a grid, the entire screen is a single custom card — one Web Component that owns every pixel, draws all the tiles, and handles all the movement. Home Assistant still does the real work (cameras, thermostat, lights); what you see and touch is one unified surface.


Why one card instead of many

Smoothness. Stacked cards force the browser to recalculate the whole layout every time something moves. Owning the surface myself, every animation runs on the GPU, so tiles grow, shrink, and rearrange smoothly even while camera streams decode.

Drop-in tiles. The engine hardcodes nothing tile-specific. Adding a new tile is: write one small file, list it in a registry, done — no engine edits, no touching other tiles. A tile is just a size ladder (the sizes it grows to) plus a list of faces (the screens it flips between).


How the code is laid out

Vanilla JS, no build step — native browser modules served from /config/www. Drop the file, hard-refresh, it's live.

One rule holds it together: data that changes for different reasons lives behind different doors — colors in the theme, layout constants in one object, the tile list in a registry, face logic in its own module. The engine reads those and stays dumb. And one hard performance rule: animate transforms and opacity only. That's what keeps it smooth on real hardware.


The hardware

  • Beelink EQi12 (i5-1235U, 32GB, 512GB) running HA OS bare-metal.
  • TouchWo HD43 — 43" 1080p capacitive touch. IPS/LCD
  • Brightness over HDMI (DDC/CI) works, so the box dims the backlight on a schedule and truly powers the screen off.






2 Likes