Skip to content

m1ckc3s/nullframe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PROJECT NULLFRAME

A live telemetry dashboard in the Nothing design language. Dot-matrix numerals, a glyph-grid icon reel, and ten bento widgets that read real signals from your browser — frame rate, JS heap, battery, network, input — rendered like the industrial instrument panel of a design engineer's workstation in New York.

ezgif-6ebe98534d0a1056

What's actually live

Every card is tagged honestly:

Widget Source Tag
Clock Real time, pinned to America/New_York
Render Your actual frame rate + frame time, measured off the rAF loop LIVE
Memory JS heap via performance.memory (Chromium) LIVE / SIM
Battery Battery Status API (Chromium) LIVE / SIM
Network Downlink + RTT via Network Information API (Chromium) LIVE / SIM
Input seismograph Your cursor velocity and input rate, drawn live LIVE
Glyph G1 Canvas icon reel — disc, ring, brackets, pause, dither
Contributions / Streak / Activity Seeded fakes for @nullframe SIM

Where a browser doesn't expose an API (Safari, Firefox, iOS), the card falls back to seeded simulated data and says so — SIM, not a lie.

The interesting part

One requestAnimationFrame loop drives the entire page. 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 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, and offscreen canvases skip work entirely. It runs cool on a phone.

Press ⌘K for the command palette: focus mode, sync sweep, clock reroll, motion toggle.

Stack

React 19 · Vite · TypeScript · Motion · hand-written CSS (no UI library — the craft is the point).

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

Deploys to Vercel as a static Vite site — set the project root to this folder.

Design DNA

Built on Nothing's visual language: dot-matrix as structure (Doto), Space Mono for machine text, Space Grotesk for human text, sharp segments inside 16px cards, motion that slams and settles instead of floating, and brand red exactly once. Not affiliated with Nothing Technology — just an admirer.

Original idea inspired by one long prompt from @dominikmartn.

About

PROJECT NULLFRAME — a live telemetry dashboard in the Nothing design language

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors