Focus Physiology

Master hard subjects faster by turning study sessions into calm, adaptive games and more

Comment

Inspiration

Studying for exams has always been a battleground for me. Whenever test season approached and I tried to sit down with dense physiology PDFs, my mind wouldn’t just drift—it would spiral. The overwhelming pressure triggered intense anxiety, bringing up past traumatic experiences, sudden panic, and severe distress. Standard study tools and flashcards only made it worse by piling on the pressure, treating me like a machine that just needed more repetitive drilling.

I needed an environment that felt safe. I spent hours unwinding in games like Stardew Valley, where you can exist in a calm, welcoming world without the constant threat of failure. We asked ourselves: What if studying felt like stepping into a gentle, grounding sanctuary instead of a high-stress trial? That became the soul of Focus Physiology. We built this app specifically for people who struggle with study-induced panic and trauma triggers: A Cozy Safe Haven: Instead of staring at an intimidating textbook, you walk a peaceful pixel farm, harvest crops, and engage with your notes through low-stakes exploration. An App That Responds to Panic: Instead of punishing you when your heart races, the app notices your stress via an opt-in webcam pulse sensor. When panic spikes, it doesn't throw more questions at you—it automatically fades in soft lullaby music and gives you space to breathe until you feel grounded again. Story Before Mechanics: Instead of jumping straight into a nerve-wracking quiz, your lecture notes are first transformed into a peaceful four-chapter valley story. You read at your own pace before ever stepping onto the farm. Studying shouldn't trigger a fight-or-flight response. Focus Physiology turns overwhelming medical notes into a calm valley where you can learn safely, step by step.

What it does

Focus Physiology turns intimidating lecture notes into a cozy, grounding farm adventure. Storyteller Quest: Paste notes, upload a PDF, or snap a page with your camera. The app writes a peaceful four-chapter valley story from that material and extracts quiz questions. It keeps you on the narrative page first so you can read calmly—it never dumps you directly into high-pressure gameplay. Valley Farm (RPG World): A top-down pixel farm. Walk around with WASD or a phone D-pad, tend crops, talk to the farmer, and encounter gentle red slimes. Combat consists of short 3-question checks drawn from your notes. HP, XP, and levels carry over. Webcam Stress & Grounding Sensor: An opt-in camera feature reads your pulse from your face using green-channel rPPG. A clear top bar tracks your state from calm to elevated. It runs entirely on video analysis, so typing or note-taking never triggers fake stress alarms. Valley Lullaby: When your stress meter rises, soft ambient pad music automatically fades in to help pull you out of a panic cycle. You can mute it anytime or preview it on the dashboard. Focus Timer & Lesson Board: A customizable Pomodoro timer paired with a simple To-Do / In-Progress / Mastered task board. Study Stake Arena: Four subject tables where you and a study partner put a simulated stake in a pot; whoever logs the highest focus time (tied to the timer) wins the pot. Everything is instantly playable directly in the browser on desktop or mobile.

How we built it

App Shell & UI: Built with TanStack Start + React 19 + Tailwind v4 to deliver a responsive shell (Dashboard, Storyteller, RPG, Stake Arena, and Tasks). Game Engine: A custom Canvas 2D pixel farm running at 320×180 integer-scaled resolution using requestAnimationFrame + delta time. Key presses live in a JavaScript Set(event.code) rather than React state, ensuring smooth movement that never stutters or freezes. AI & OCR Storyteller: Powered by xAI Grok (grok-4.5) on the server to convert raw lecture notes into JSON-structured stories and quizzes, with vision OCR for image uploads. If the API is offline, a local fallback storyteller generates chapters on the fly so the user is never left with an empty screen. PDF Processing: pdf.js parses and extracts selectable text directly inside the browser. rPPG Stress Engine: A custom pulse detector that samples a forehead Region of Interest (ROI), estimates BPM from light fluctuations in the green channel, filters out micro-movements, and updates the header stress meter in real time. Generative Audio: Built with the Web Audio API (layered ambient pads, slow chord morphs, and quiet bells). Audio nodes are unlocked on the same tap as "Start sensor" to ensure seamless playback across all mobile browsers. State & Persistence: State managed via Zustand + localStorage. No user accounts or login screens are required to demo or use the app.

Challenges we ran into

The Two-Step Movement Freeze: Early movement prototypes used React key state and setInterval. Holding down WASD keys caused React state to update twice, locking the character in place. Fix: We moved key handling into a native Set and restricted movement updates strictly to the requestAnimationFrame loop scaled by delta time (dt). Storyteller Jumping to the RPG: Uploading notes originally redirected the user immediately to the game, which felt abrupt and overwhelming. To preserve a calm flow, the transform step now displays the four-chapter story on the current page first, leaving entry to the farm as a deliberate, low-pressure button choice. Separating Typing, Movement, and Stress: A stress guard that listened to keyboard inputs accidentally spiked the stress meter while typing notes and hijacked WASD game keys. We made the sensor strictly camera-only and configured game key events to ignore active INPUT and TEXTAREA elements. Cozy Aesthetic vs. Scope Creep: Developing full sprite sheets and complex game worlds was out of scope for a quick demo. A tight pixel framebuffer with integer scaling, y-sorted entity rendering, and a simple harvest/slime loop captured the nostalgic, comforting feel of Stardew Valley without scope bloat. iOS Audio Restrictions: Mobile browsers block web audio until an explicit user gesture occurs. We synchronized the audio context unlock to the "Start sensor" and "Play music" buttons, adding an auto-resume handler on tab focus. Stake Arena Safety: We intentionally avoided real-money integration or banking APIs to keep the app safe, accessible, and free of financial anxiety or gambling mechanics. The Arena uses purely simulated study points.

Accomplishments that we're proud of

A Full Grounding Loop: Transformed intimidating PDFs into a gentle story, a soothing farm walk, and brief, manageable review checks. Silky-Smooth Controls: Fluid pixel-farm movement using direct event tracking without key-sticking or state freezes. A Supportive Stress System: An opt-in, non-punitive pulse tracker that actively helps soothe anxiety (music + breathing prompts) rather than penalizing high stress. Consistent Aesthetic: Preserved a cozy pastel design language with custom fox icons, warm coral accents, and comforting UI framing throughout. Cross-Platform Accessibility: Fully functional on both desktop browsers and mobile devices (complete with a responsive D-pad, mobile camera capture, and bottom navigation).

What we learned

Game Feel Requires Native Input Handling: Smooth movement depends on low-level input tracking (event.code, held-state sets, delta time) rather than framework state management (setState). Trauma-Informed UX Design: Product structure dictates emotional safety. When the app prioritizes narrative immersion before introducing review mechanics, learning feels safe and earned rather than forced. Biometric Calibration: Camera-based rPPG requires warm-up cycles, environmental light verification, and value smoothing (hysteresis) to prevent ambient lighting changes from falsely triggering stress alerts. Generative Web Audio: Rich, soothing ambient audio can be generated directly in code using gain fading instead of starting heavy audio files cold. Scope Discipline: A single, polished, calming location is far more effective for anxiety relief than an unfinished open world.

What's next for Focus Physiology

Shared Cooperative Pots: Invite classmates into shared study pots with live study-time leaderboards and school-safe goals. Expanding the Farm: Introducing seasonal changes, new crops, helpful villager NPCs who quiz you by chapter, and unlockable fields as you master topics and better graphics. Enhanced Biometrics: Implementing FaceDetector ROI tracking and an optional "Calm-Only Study Mode" that pauses game prompts until your pulse stabilizes. Spaced Repetition Harvesting: Farm crops that regrow along a personalized forgetting curve to gently prompt review on older facts. Classroom & Group Mode: Allowing teachers or study group leaders to upload a shared lecture PDF so an entire class can explore the same valley together.

Built With

Share this project:

Updates

Submission history