← Back to work

FocusFarm

Try Live Demo

A webcam-based focus app that rewards sustained attention with a growing pixel-art farm.

RoleProject Owner and Manager
ForStudents and professionals building focus habits
Team2 — PM, Frontend
TimelineJune 2026
Try Live Demo
01 — Why We Built This

Why We Built This

FocusFarm — photo 1FocusFarm — photo 2

Caught mid-game of Plants vs. Zombies in class — exhibit A for why this app needed to exist.

I get distracted constantly when I'm supposed to be working, ADHD-adjacent, if not full ADHD. But somehow I can lock in for hours on a farm game where I'm just collecting stuff.

SO — why can't we just gamify boring work and study, and make it rewarding by the end of the day?

02 — Technical Stack

Technical Stack

Frontend & Detection

  • React
  • Next.js
  • MediaPipe / TensorFlow.js
  • Webcam-based attention tracking

Data & Progression

  • Coin economy
  • Pixel farm rendering
  • Local storage — MVP
  • Supabase/Firebase — planned

Deployment & CI

  • Vercel — auto-deploy on push
  • GitHub Actions — CI on every PR
03 — Detection Pipeline

Detection Pipeline

How FocusFarm decides whether you're focused. Detection, scoring, and coin rewards all run client-side in the browser, with progress saved to local storage.

  1. Sense

    1. Face Landmarks

      MediaPipe FaceLandmarker tracks the face on every new webcam frame.

    2. Raw Signals

      Head pose (yaw and pitch, corrected for tilt), eye openness, and iris gaze.

  2. Decide

    1. Calibration

      A quick eye check sets each person's own "eyes closed" threshold, and a 3-second onboarding saves their neutral pose. Smoothing runs on time, not frame count, so 30 and 60 fps behave the same.

    2. Soft Scoring

      Eyes, head angle, and gaze each score 0 to 1. The focus score is the lowest of the three, which also names the reason: eyes closed, head turned, or looking away.

    3. Focus State

      Two thresholds instead of one, so the state doesn't flicker back and forth.

  3. Reward

    1. Coin Rewards

      The focus score is added up every second, so half-focus earns half credit, then turned into coins with a tier multiplier from 0.5× to 2×.

Why the state doesn't flicker

A Schmitt trigger uses two thresholds: the state switches to distracted only below 0.35, and back to focused only above 0.6. A dip between the lines changes nothing, and each state holds for at least 600 ms.
Focus score0.60.35
Focused
Distracted
Focused
04 — What's Next

What's Next

  • • Unlockable farmland — new plots open up as focus hours accumulate

  • • Tiered animals and buildings gated behind farm level, not just coins

  • • A progression system with milestones, not just a flat shop

  • • Seasonal or rotating decorations to keep long-term use engaging

  • • Streak-based multipliers that reward consistency, not just single sessions

  • • A leaderboard, once there's a real progression system worth comparing

Next case study
Drunky: Bimanual Bartending Robot →