Obsidian Glass
A 12-view Home Assistant dashboard with SVG gauges and animated diagrams, built with zero custom frontend code and assembled by a deterministic Python build.
Live, in your browser — not a screenshot.
Problem
Home Assistant controls the house, but its default dashboard is hard to scan on a shared wall tablet. I wanted a product-quality interface without creating a custom JavaScript card that could break on future HA releases.
What I built
Twelve responsive views share one dark glass design language. Real entity data drives hand-computed SVG rings, solar KPIs, animated ventilation flow, camera overlays and native controls. A Python build assembles view fragments deterministically, rejects template collisions and checks semantic parity with the live dashboard.
The hard part
The no-custom-code constraint relocated the engineering into SVG maths and shadow-DOM boundaries. Each gauge computes its own circumference and dash offset from live values; card-mod then reaches through nested web components to style sliders, cards and native controls.
Touch sliders were the sharpest example: a drag scrolled the page until touch-action: none was applied on the correct cross-shadow ancestor. The result behaves like a bespoke frontend while remaining configuration that Home Assistant can continue to own.
Results
All 12 views run daily against real devices on tablet, desktop and phone with the original Overview preserved as a safe fallback. The repo can rebuild the full dashboard and prove it still matches production.