VibeCheck

VibeCheck OS: AI-Powered Mood-Based Web Game App.

Comment

Inspiration

The core inspiration for VibeCheck OS was the concept of Game-Induced Flow. While games are often viewed as mere distractions, this project was built on the philosophy that structured play is a powerful tool for emotional regulation and neurological resetting. When a person is stressed, their brain is often stuck in a "high-beta" wave state—characterized by racing thoughts and anxiety. By engaging in a game that specifically matches your current energy level, you force the brain to transition into an Alpha or Theta state. We often turn to games to escape, but I wanted to design a system where we play to reconnect. This project is inspired by two main goals: 1. Using Play to Shred Stress 2. Finding Your Mental Clarity

What it does

VibeCheck is an AI-Powered Mood-Based Web Game App that provides:

  1. Mood-Detection Logic: The app starts with a "System Audit" that uses a three-tier decision matrix. By answering three quick, relatable questions about your body’s energy and your brain’s pressure levels, the app identifies your current "operating state."

  2. Targeted Stress Relief: It features four distinct game engines (Hyper, Chill, Chaos, and Void), each with physics and audio tuned to specific nervous system needs. Whether the user needs to burn off jittery energy or find a rhythmic focus, the game adapts to them.

  3. The "System Restored" Framework: Every win is framed as a System Restoration, providing a hit of dopamine and a sense of psychological closure, helping to "close" the stress loop for the day.

4.Pattern Tracking: Using a persistent History Log , the app tracks the user's last five moods. This allows users to recognize their own emotional trends and see which activities lead to the best mental outcomes.

How we built it

  1. AI Architecture: Powered by Gemini 3. The AI was used to structure the "Neural-Matching" algorithms and optimize the diagnostic logic that translates user input into gameplay physics.

  2. Frontend (UI/UX): Tailwind CSS was utilized to create the "Brutalist Terminal" aesthetic, ensuring a lightweight and responsive interface across all devices.

  3. Graphics Engine: HTML5 Canvas API handles all procedural rendering, drawing gameplay elements in real-time at 60FPS without the need for heavy image assets.

  4. Audio Synthesis: Web Audio API generates raw, reactive sound waves directly in the browser, providing a unique auditory signature for every vibe.

  5. Persistent Logic: Vanilla JavaScript manages the game states, while LocalStorage acts as the system’s "memory," saving user patterns for long-term mental clarity.

Challenges we ran into

  1. We initially had too many questions. We had to cut it down to the three most high-impact prompts to ensure users got to their mental clarity quickly without losing interest.
  2. Instead of using audio files, we coded the sounds from scratch using the Web Audio API. Getting the right "vibe" for each frequency—like a soothing hum vs. a sharp "glitch" sound—required intense fine-tuning.
  3. We had to ensure LocalStorage correctly tracked the "Pattern Log" without needing a server, keeping the experience private and instant for the user.

Accomplishments that we're proud of

The technical core of VibeCheck OS is a procedural, framework-free engine designed to act as a digital decompression chamber. By writing custom algorithms in Vanilla JavaScript, we successfully mapped abstract stress levels to precise physical variables—like friction and gravity—allowing the HTML5 Canvas API to render "mood-correct" gameplay at 60FPS. Coupled with a secure, serverless LocalStorage tracking system, the OS transforms "System Errors" (burnout) into "System Restored" (clarity), providing a high-performance tool for immediate stress relief.

What we learned

Building VibeCheck OS taught us that technical efficiency is the key to emotional impact.

  1. We learned to use Gemini 3 as a "Logic Auditor" rather than just a code generator. This helped us refine our State-Machine Architecture and debug math-heavy loops with high precision.
  2. By building the "Pattern Log," we learned how to turn raw JSON data from LocalStorage into a meaningful "mirror" for the user. We learned that seeing your mood trends visually is a form of decompression in itself.
  3. We learned that generating gameplay on the fly using Procedural Generation is more efficient than designing static levels. It ensures the "vibe" never feels repetitive and keeps the file size incredibly small.

What's next for VibeCheck

Moving forward, we plan to turn VibeCheck OS into a smarter tool that responds directly to your body. We want to link the app to wearable tech (like smartwatches) so the game automatically slows down as your heart rate drops, helping you relax even faster. Our goal is to expand into a mobile app with even better 3D sound, making it a portable "panic button" for instant stress relief whenever you need it.

Built With

  • css3
  • cursor
  • gemini3
  • googleantigravity
  • html5canvasapi
  • javascript(es6+)
  • tailwindcss
  • vercel
  • webaudioapi
  • webstorageapi
Share this project:

Updates