nullframe: a live browser telemetry dashboard in the Nothing design language

Ten widgets, and which ones are actually live

Every card carries a source tag, and the tags are the interesting part. Render reads your actual frame rate and frame time off the rAF loop and is marked LIVE. The input seismograph draws your cursor velocity and input rate live. Memory reads the JS heap through performance.memory, Battery uses the Battery Status API, and Network reads downlink and RTT through the Network Information API, and those three are marked LIVE or SIM because they are Chromium-only.

Two cards are decoration and one group is openly fake. Glyph G1 is a canvas icon reel cycling disc, ring, brackets, pause and dither. The clock reads your live local time zone, auto-detected from the browser. Contributions, Streak and Activity are marked SIM outright: they are seeded fakes for the m1ckc3s account.

One rAF loop for the whole page

The architecture claim is narrow and checkable. A single requestAnimationFrame loop drives the entire page: it measures fps, smooths pointer velocity, runs every canvas draw callback, and publishes an immutable snapshot to React at 2 Hz through useSyncExternalStore.

The decisions around it are where the substance is. There are no per-widget timers competing with each other. Everything pauses completely when the tab is hidden. Canvases cap their device pixel ratio at 2 and redraw at 30 fps or less, and offscreen canvases skip work entirely. The README claims it runs cool on a phone, which is the claim to test first if that is where you plan to leave it open.

The SIM fallback, and why the label matters

Where a browser does not expose an API, meaning Safari, Firefox and iOS, the card falls back to seeded simulated data and says so. The README puts it in four words: SIM, not a lie.

That is a small discipline most dashboards skip, and it changes how you read the page. On Chromium you are looking at your own machine. Elsewhere you are looking at a layout demo with three cards quietly running on seeded numbers, and the tag is the only thing telling you which. If you are using this to sanity-check a rendering regression, read the tag before you trust the value.

Installing it and opening the dashboard

npm install
npm run dev

That starts the local Vite dev server. For a production build, npm run build runs the typecheck and the build together, and the README notes that it deploys to Vercel as a static Vite site with the project root set to this folder.

The stack is React 19, Vite, TypeScript and Motion, with hand-written CSS and no UI library, a choice the README defends on the grounds that the craft is the point. The repository is small: an index.html, a src directory, a Vite config and a tsconfig, plus CLAUDE.md and a .claude directory, which is consistent with an agent-assisted workflow.

Command palette, hover tones and the motion toggle

Pressing Cmd+K opens a command palette with focus mode, clock reroll and a motion toggle. Hovering any card plays a soft tone generated by a zero-dependency Web Audio synth with no samples, and you can switch it off from the dot-matrix toggle in the clock card.

The motion toggle is the one that matters for a dashboard. This is a page built to be watched, so being able to stop it moving is the difference between a demo and something you can leave open beside a profiler without it pulling your eye every second.

Design DNA, and the Nothing question

The stated reference is the Nothing visual language: dot-matrix as structure using Doto, Space Mono for machine text, Space Grotesk for human text, sharp segments inside 16px cards, motion that slams and settles rather than floating, and brand red used exactly once.

The README is explicit that the project is not affiliated with Nothing Technology and describes it as an admirer work, crediting the original idea to one long prompt from @dominikmartn. That matters for anyone considering a fork. The visual grammar is borrowed from a commercial brand, and the one-use-only red is a rule this project wrote for itself rather than a licence term.

What it is not, and maintenance

nullframe is a display surface, not a profiler. It reports what a browser will tell a page about itself: frame rate measured off rAF, the JS heap where performance.memory exists, and network estimates from the Network Information API rather than measurements of your actual traffic. If you need flame charts, allocation timelines or a real network waterfall, devtools is the tool and this is a wall panel.

The project is MIT licensed and the last push was on 2026-06-20.

Editorial conclusion

Use nullframe if you want a wall panel showing what your browser is doing right now and you are on Chromium, where most cards read real values. Look elsewhere if you need measurement you can act on, because three of the ten cards need APIs that Safari, Firefox and iOS do not expose. Check whether the Memory, Battery and Network cards read LIVE or SIM before you trust a number, then run npm run dev and watch the Render card while you stress the page.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. m1ckc3s/nullframe on GitHub
4. Project website
5. README