Product architecture

How LaptopNeck is built

This browser

Webcam → 5–8 fps → MediaPipe WASM → posture engine → this browser. Frames never exit.

Optional account

Identity, Pro status, referral graph, daily score numbers. No video column exists.

Companion (planned)

History, streaks, and push when the desk session flags sustained laptop neck. Same account.

Tech stack

React 19 + TypeScript + TanStack Start
Tailwind v4, self-hosted Newsreader + Source Sans 3
MediaPipe Pose Landmarker lite (WASM / WebGL)
Zustand + localStorage for the monitoring loop
Better Auth (Google, X, email) when you opt in
Postgres for non-sensitive sync only

Detection

A laptop webcam only sees the head and shoulders, so detection never uses hips or a full torso. From the visible landmarks we derive a craniovertebral-angle proxy (ear vs shoulder), neck length, anterior head translation (head closer to the camera than the shoulders — chin can stay level), and shoulder span vs face width (rounded shoulders). Values are compared to a personal baseline, smoothed with a ~0.6s EMA, then passed through hysteresis. Alerts require a configurable sustain window (default 10s) so reaching for a mug does not count.

Performance

Lite model, 640×360 capture, 6 fps inference, GPU delegate with CPU fallback, no React writes on every frame (status is published on change or ~180ms). Auto-pause when nobody is in view. The monitoring loop yields when the tab is hidden unless Picture-in-Picture keeps the video element alive.

Early access

Unlimited monitoring, full history, coaching, and custom settings. Free while we gather desk feedback. No video. No card.

Later: Pro

A paid plan will likely cap the free daily allowance again. Gating is already in the code; it is switched off until the product is worth charging for.

Edge cases

Poor lighting — we still run; if presence drops we treat you as away rather than punish slouch.
Multiple people — numPoses is 1, the most prominent figure wins.
Walk-away — configurable away timer pauses scoring.
Lid close / track ended — the MediaStream stops; Start is explicit.
Camera denied — demo skeleton uses the same engine so you can still learn the UI.