Somatic Mirror

On-device Edge AI biofeedback and facial somatic release to dissolve screen fatigue, relieve TMJ tension, and restore natural glow.

Comment

Inspiration

3 AM, 14th hour of coding. I looked at my own reflection in the dark monitor and honestly didn't recognize the face looking back — jaw locked shut, eyebrows pulled together, eyes that looked ten years older than they should. My body had been screaming at me for hours and I hadn't noticed a second of it.

Next day I asked around in my dev group chats, half expecting people to say I was being dramatic. Nope. Same story every time — headaches that show up out of nowhere by 6pm, jaws sore from clenching without realizing it, eyebrows frozen mid-frown from staring at a bug for too long. We sit in front of screens 8+ hours a day and the stress just piles up in our face muscles, quiet, until it turns into an actual headache or worse.

So I asked myself a dumb question that stuck: what if there was a mirror that could show you the tension you can't feel yourself? Not another app asking for 20 minutes of meditation you don't have time for — something that takes 10 seconds and just tells you where it hurts. That's basically the whole idea behind Somatic Mirror.

What it does

It's a privacy-first biofeedback app that runs entirely in your browser. You look at the camera for a few seconds and it draws a live thermal-style heatmap over your face — red where you're holding tension. Then it walks you through one short, targeted release exercise and scans your face again afterward to actually check if it worked, instead of just assuming it did.

Roughly how it goes:

  1. Grant camera access, look at the screen for about 3 seconds.
  2. The app tracks 468 facial landmarks, fully on-device, and scores 5 zones — forehead, jaw, eyes, mouth, neck posture.
  3. You see the heatmap update live, so you can literally watch where you're tense.
  4. It picks whichever zone is worst and gives you one instruction — nothing generic, something specific like "open your mouth wide, circle your jaw slowly for 8 seconds."
  5. A breathing pacer plus some ambient sound guides you through it.
  6. It re-scans and shows you a real number — how much tension actually dropped, not a guess.

No sign-up, no mood diary to fill out, nothing leaves your browser. Just something fast that you can measure.

How we built it

Everything is client-side. Kept the stack stubbornly simple — vanilla HTML5/CSS3/ES6, no build step, no npm dependencies at all. Partly a design choice, partly because I didn't want to deal with a supply-chain incident during a hackathon.

  • Computer vision: Google's MediaPipe FaceLandmarker (468 3D landmarks), running via WebAssembly with WebGL/GPU acceleration, all in-browser. Video never leaves the device — there's nowhere for it to even go.
  • The math behind it: raw pixel distances are useless on their own since they shift depending on how far you sit from the camera, so everything gets normalized against face width (the distance between the two cheekbone landmarks):
  • Biometric math: raw pixel distances are meaningless because they change with camera distance, so every measurement is normalized against the bizygomatic face width:

\(W_{face} = \sqrt{(x_{234} - x_{454})^2 + (y_{234} - y_{454})^2}\)

For example, the jaw clench ratio is the chin-to-lip distance divided by that width:

\(R_{jaw} = \frac{d(152, 14)}{W_{face}}\)

  • Composite stress index: the five zone scores are fused into one index, weighted by how strongly each zone correlates with stress:

\(S = 0.25 \cdot T_{forehead} + 0.30 \cdot T_{jaw} + 0.20 \cdot T_{eyes} + 0.15 \cdot T_{mouth} + 0.10 \cdot T_{neck}\)

  • Heatmap is drawn on an HTML5 Canvas with exponential smoothing so it doesn't flicker every frame like a strobe light.
  • Relaxation protocols borrow from Jacobson progressive muscle relaxation and the physiological sigh, plus a 60fps breathing pacer.
  • Audio is nature sounds layered with a bit of generative Web Audio, and voice guidance in both English and Russian via Web Speech Synthesis.
  • Session history saved to localStorage with quota handling and JSON export, strict CSP, everything escaped properly, JSON parsing hardened against prototype pollution.

Challenges we ran into

MediaPipe ran fine at 30fps on my laptop and then just died on an old Android phone I tested on. Had to throttle detection down to ~15fps, lazy-load the WASM bundle, and add fallbacks so it degrades instead of hard-crashing.

CSP fought me on WebAssembly — had to loosen it just enough for wasm-unsafe-eval scoped to the vision bundle specifically, without cracking the door open for XSS.

Early on I had a "simulation fallback" that would just show fake numbers if it couldn't detect a face — looked good in a demo, felt gross in practice. Ripped it out. Now if it can't see you, it says 0%, plainly. A wellness app that lies about its readings isn't a wellness app.

Also spent way too long tuning what counts as "tense" — it looks completely different from face to face, so I tested on a bunch of real people just to get the baselines to feel honest instead of arbitrary.

And the usual camera stuff — HTTPS requirements, permission denials, bad lighting — each one needed its own non-judgmental error message instead of a generic "camera error."

Accomplishments that we're proud of

Nothing about your face ever touches a server — that one matters a lot to me, your face is about as personal as data gets.

The before/after re-scan is the part I'm most proud of, honestly — most wellness apps just tell you that you feel better, this one actually checks.

There's a camera-free Sensory Mode for accessibility, a WCAG 2.1 AAA high-contrast theme, large text, full keyboard nav, and it respects prefers-reduced-motion.

Full EN/RU support including voice, switchable instantly without a reload. And zero dependencies — no framework, no build pipeline, nothing that could get compromised in a supply-chain attack.

What we learned

Technically — the browser can do a lot more than people give it credit for. WASM plus WebGL can run real-time computer vision even on a phone, and Web Audio/Speech APIs can replace what used to require whole asset pipelines.

But the bigger lesson was about designing for stressed-out people. My first few ideas were clever and complicated, and wrong. Someone who's stressed doesn't want another task, another journal, another score to track. They want something that meets them exactly where they are and asks almost nothing of them.

Also learned that being honest about limitations is itself a feature. Cutting the fake fallback made the demo look worse on paper and made the whole thing more trustworthy in practice. For wellness tech especially, trust is the actual product.

What's next for Somatic Mirror

  • Bigger exercise library (50+) with the app picking protocols adaptively
  • PWA mode so it installs and works offline
  • Anonymous aggregate stats — something like "347 people held tension in their jaw today, you're not the only one"
  • Trend tracking over weeks with exportable PDF reports
  • Optional Apple Health / Google Fit integration
  • More languages beyond EN/RU

It started as a mirror at 3 AM that finally showed me what I'd been ignoring. Hoping it can do the same for other people who work too hard and notice it too late.

Built With

Share this project:

Updates