WatchOut

• 

  dashboard 2

• 

  dashboard 1

Tracks your blink rate in real time and warns you before digital eye strain kicks in. Built for TechCommons Hacks V2.

Inspiration

I get blurry vision after long screen sessions. It's digital eye strain, blink rate drops when staring at screens, and the 20 20 20 rule helps but nobody remembers to do it. Wanted an app to remember it for me. I also spend a lot of time on the computer- like 5-6 hours a day.

What it does

Small widget in the corner of your screen, watches blink rate via webcam using MediaPipe, no images saved. Red dot appears after 8 seconds without blinking. Also warns if you lean too close, and sends a notification every twenty minutes if blink rate stays low. Has start pauseend session tracking with a summary.

How we built it

Browser prototype first, camera and blink detection written by hand while learning HTML/CSS/JS from scratch. Moved to Electron for background tracking across apps. Used MediaPipe's blendshape scores instead of manual EAR calculation. Electron packaging built with help from Claude Code, I understand the code. And also I can explain all of the code by myself.

Challenges we ran into

4-second threshold false-triggered on normal blinks, raised to 8 seconds. Turning head sideways breaks detection, unsolved.

Accomplishments that we're proud of

Real blink detection with an actual facetracking model. A real desktop app with background tracking. not just a browser tab.

What we learned

HTML, CSS, JS from scratch, MediaPipe face tracking, Electron's process model.

What's next for WatchOut

Head-turn aware detection, eye health reports over time, browser extension version, self-calibrating thresholds.

Built With

• css
• electron
• html
• javascript
• mediapipe-(face-landmarker)
• node.js