[ ALPHA ]Node.jsFastifyWebSocketSpotify ConnectCSS Container Queries

Modus — a 10-foot TV dashboard

Modus — a 10-foot TV dashboard

What it is

Modus is an ambient dashboard for the living room — a 10-foot-UI canvas that runs full-screen on a Google TV Streamer via Fully Kiosk Browser. Think of it as a smart mirror without the mirror: weather, calendar, Spotify, sports scores, transit, laid out as widgets on a grid.

Features

A stack of named scenes (weather, MLB, transit map, a couple of experiments) switchable from a slide-up carousel dock or by calendar-driven automation; a real 2-level D-pad remote navigation model (grid focus, then deep-focus into a widget); Spotify Connect integration with auto-transfer-to-TV when idle and a 3-device switcher; and widgets that inject their own CSS custom properties so they resize correctly at both 1080p and 4K without separate layouts.

Why I built it

Every off-the-shelf smart-display app wanted a subscription, a cloud account, or didn’t support the specific mix of widgets I wanted on one screen. Building it myself also meant the widget system could be genuinely custom — sandboxed iframes with injected design tokens, so a new widget is a small, isolated HTML/CSS/JS bundle, not a fork of the whole app.

How it works

A Fastify server exposes scene state, automation rules, and a Spotify proxy over HTTP + WebSocket; the browser-side canvas engine renders each widget in a sandboxed iframe sized by CSS container queries, with design tokens (colors, font scale) injected into the iframe’s :root so widgets share a look without importing shared CSS directly.

How it was built

Its own repo since the 2026-08-14 split out of the old monorepo. Scene-switching automation is driven by real Google Calendar events rather than a fixed schedule, so "movie night" or "dinner" scenes trigger off my actual calendar, not a cron guess. TV screenshots come from a dedicated capture script (tv-screenshot.sh) rather than desktop Playwright, since a desktop browser viewport isn’t a reliable proxy for how Fully Kiosk actually renders the canvas.

A full-weather scene, focused for TV viewing distance
A full-weather scene, focused for TV viewing distance
An MLB scene — live scores widget on the same canvas engine
An MLB scene — live scores widget on the same canvas engine