The Problem

Browser telemetry dashboards tend to be either toy demos that fake everything or heavy monitoring stacks that require a backend. Developers who want to see live browser signals — frame rate, JS heap, network conditions, input velocity — often end up stitching together DevTools panels and ad-hoc scripts. There's no clean, honest, self-contained way to render those signals in a polished UI.

What This Does

PROJECT NULLFRAME is a live telemetry dashboard that reads real browser APIs — performance, navigator.battery, navigator.connection — and renders them as a bento-grid of cards in Nothing's design language. Each card is tagged honestly: LIVE when reading actual browser data, SIM when falling back to seeded data on browsers that don't expose the API.

The core engine is a single requestAnimationFrame loop in src/system/telemetry.ts. It measures FPS, smooths pointer velocity, runs every canvas's draw callback, and publishes an immutable snapshot to React at 2 Hz via useSyncExternalStore. There are no per-widget timers; everything pauses when the tab is hidden, and offscreen canvases skip work entirely.

How It Is Wired

Execution starts at src/main.tsx, which mounts src/App.tsx. The app renders the widget cards from src/components/widgets/ and a CommandPalette (⌘K) that toggles focus mode, clock reroll, and motion. The central hub is src/system/telemetry.ts — it owns the rAF loop, the data snapshot, and the useSyncExternalStore subscription. src/system/hooks.ts wraps that store for React components, src/system/fake.ts generates the seeded fallback data, and src/system/sound.ts is a zero-dependency Web Audio synth for card hover tones.

The blast radius is concentrated in telemetry.ts: every widget depends on its snapshot, and the loop drives all canvas redraws. That's a single point of failure — if the loop breaks, everything stops. The widget files themselves are leaf components; they read from the snapshot and render. src/styles.css is hand-written CSS with no UI library.

The wiring has not been mapped for external effects — no database, no network calls, no filesystem writes. The only external touchpoints are browser APIs and a static Vercel deployment.

How To Use It

From the README, verbatim:

npm install
npm run dev      # local
npm run build    # typecheck + production build

No environment variables or config files required. Deploys to Vercel as a static site — set the project root to the repo folder. The entry point is index.html, which loads src/main.tsx.

Real-World Use

A developer wants to verify that a WebGL animation is hitting 60 FPS on a mid-range phone. They open NULLFRAME in the same browser session, switch to the Render card, and see live frame rate and frame time. The Memory card shows JS heap growth during the animation. If the phone's browser lacks the Battery API, the card honestly labels itself SIM rather than showing fabricated data — so the developer knows exactly which signals are trustworthy.

Code Health & Issues

Static analysis found two issues:

  • Medium/SDLC — No test files detected — untested code paths — repository-wide.
  • Medium/SDLC — No CI/CD pipeline detected — no automated build/test gate — .github/ or CI config.

The repo has a LICENSE and a FUNDING.yml, but no test suite and no CI. The codebase is small (32 files) and the architecture is clean, but the lack of automated verification means regressions in the rAF loop or the store subscription would go unnoticed until runtime.

The Bottom Line

A well-crafted, honest telemetry dashboard with a clean single-loop architecture and a distinctive design language. The lack of tests and CI is the main risk for anyone wanting to modify it. Use it as a reference for live browser data rendering or as a starting point for a custom telemetry UI — not as a production monitoring tool.