Oystraz

The world is your oyster; Orchestrate your life through wellness. A gamified health tracking life simulation app where your real-world choices directly influence your performance at work and in life.

Comment

Oystraz - Hackathon Submission

Inspiration

The breaking point came during a 14-hour workday. I was tracking my health on three different apps - one for food, one for exercise, one for sleep - and none of them talked to each other. Worse, they all felt like chores. Another notification. Another guilt trip. Another reminder that I wasn't doing enough.

I asked myself: What if health tracking felt like playing a game instead of filling out a spreadsheet?

Three observations shaped Oystraz:

  1. Gamification works - I've spent hundreds of hours in games caring about virtual characters' stats. Why not channel that energy into caring about my own health?

  2. Workplace stress is universal - Everyone has an "octopus boss" moment. That fantasy of pranking your manager? It's therapeutic just to imagine. What if we made that cathartic release a game mechanic?

  3. Anti-hustle is the new hustle - "Rise and grind" culture is burning people out. I wanted an AI companion that actively discourages overwork, not one that guilt-trips you for missing a workout.

The name "Oystraz" combines "oyster" (the world is your oyster) with "orchestrate" (orchestrate your life through wellness). The pearl inside? That's Pearl, your AI companion who's passionate about food science and has zero patience for hustle culture BS.

What I Learned

Technical Learnings

1. Gemini 2.0 Flash is incredibly capable for personality engineering

I spent hours crafting Pearl's system prompt. The key insight: Gemini responds brilliantly to specific constraints. Instead of saying "be funny," I wrote:

  • "Dry humor and dad jokes, dropped casually without announcing them"
  • "2-3 sentences max, no filler words"
  • "PASSIONATE about food - light up when discussing nutrition"

The result is an AI that genuinely feels like a character, not a chatbot.

2. Framer Motion + Spring physics = buttery smooth animations

My seal employee was originally animated with CSS transitions. It looked robotic and janky. Switching to Framer Motion's useSpring with proper stiffness/damping values made the seal swim. The difference was night and day.

const smoothSealX = useSpring(sealX, { stiffness: 120, damping: 20, mass: 0.5 });

3. State persistence matters for user experience

Users navigating away from the Work page would lose their fishing progress. Implementing Zustand persistence for work sessions was a small change with huge UX impact.

Design Learnings

1. Humor requires variety

Pearl's work culture roasts started with 20 lines. Users saw repeats within minutes. I expanded to 80+ lines with anti-repetition tracking. Same for character state comments (96 lines across 5 emotional states).

2. Negative space is your friend

Early UI was cramped. Adding breathing room between cards, reducing border-radius, and letting elements float improved the aesthetic dramatically.

3. Sound design is underrated

The neo-soul BGM (Suno AI) transforms the experience. Without music, Oystraz feels like a tool. With music, it feels like a world.

How I Built It

Development Timeline

Phase 1: Core Architecture

  • Set up FastAPI backend with PostgreSQL (Supabase)
  • Built React 19 frontend with Material-UI v6
  • Implemented JWT authentication
  • Created character stat system (stamina, energy, nutrition, mood, stress)

Phase 2: Health Tracking

  • Integrated USDA FoodData API (600k+ foods)
  • Built diet, exercise, and sleep logging
  • Connected real health data to character stats

Phase 3: Pearl AI Integration

  • Integrated Gemini 2.0 Flash
  • Crafted personality-driven system prompt
  • Built 3-mode system (Relaxed, Active, Do Not Disturb)

Phase 4: Ocean Work Simulator

  • Created seal employee fishing mechanic
  • Built octopus boss with prank system
  • Integrated Veo 3.1 prank video
  • Added smooth spring-based swimming animation

Phase 5: Polish

  • Character emotional states with hover comments
  • Fish-based sleep quality ratings
  • Work page humor bubbles
  • Background music integration

Tech Stack Decisions

Decision Why
React 19 Latest features, great DX
Zustand over Redux Simpler, less boilerplate
FastAPI over Flask Async support, auto-docs, Pydantic
Supabase over self-hosted Managed PostgreSQL, easy setup
Framer Motion Best-in-class React animation library

Google Products Integration

Gemini 2.0 Flash powers Pearl's entire personality. The extended context window lets Pearl remember health history across conversations, and the fast response time keeps the chat feeling natural.

Google Veo 3.1 created the "Seal Pranks Octopus" video that plays during stress relief events. The video is triggered by:

  1. Manual prank button (stress ≥ 30)
  2. Catching 24+ fish (overwork detection)
  3. Working >8 hours (overtime alert)

Google AI Studio was invaluable for prompt engineering and testing Gemini responses before integrating them into the app.

Challenges I Faced

Challenge 1: Making the AI Feel Like a Character, Not a Bot

Problem: Early Pearl responses were generic wellness advice. "Remember to stay hydrated!" Boring.

Solution: I rewrote the system prompt with specific personality constraints:

  • Anti-hustle beliefs (work-life balance is sacred)
  • Food science enthusiasm (gets excited about resistant starch)
  • Communication style (dry humor, 2-3 sentences max)

Result: Pearl now says things like "Your stress is at 80/100. That's not sustainable - unless you're trying to speedrun burnout."

Challenge 2: Smooth Seal Swimming Animation

Problem: CSS transitions made the seal move like a robot. No swimming feel.

Solution: Replaced transitions with Framer Motion springs:

  • useMotionValue for direct position updates
  • useSpring for physics-based smoothing
  • Added body wave and tail wiggle effects
  • Bubble trail behind the seal

Result: The seal now swims instead of slides.

Challenge 3: Humor Content Repetition

Problem: With 20 work culture roasts, users saw repeats within minutes.

Solution:

  • Expanded to 80+ roasts, 100+ work page humor lines, 96 character state comments
  • Implemented anti-repetition tracking (last N used)
  • Different humor pools for different contexts

Challenge 4: Health → Game Stats Balance

Problem: How do you translate "8 hours of sleep" into game stats without being arbitrary?

Solution: Research-backed formulas:

  • Sleep 9h → +25 stamina, -20 stress (optimal)
  • Sleep <5h → -10 stamina, +5 stress (penalty)
  • Work >8h → overtime penalty on stamina
  • Boss prank → -20 stress, +10 mood (catharsis!)

Challenge 5: Keeping Users in Flow

Problem: Navigating away from Work page lost progress.

Solution: Zustand store with session persistence. Users can leave and return without losing their fishing session.

What's Next

Immediate Plans

  • Mobile responsive optimization
  • Performance improvements
  • iOS App Store deployment

Future Features

  • Achievement system
  • Daily/weekly challenges
  • Social features (friend system, group challenges)
  • Apple Health integration

Final Thoughts

Oystraz started as a frustration with boring health apps and became a meditation on what makes tracking feel fun. The answer isn't more features or more notifications - it's personality, humor, and a genuine respect for the user's time and wellbeing.

Pearl doesn't guilt you for skipping a workout. She roasts your octopus boss instead.

The world is your oyster. Orchestrate your life through wellness.

Try It Yourself

Demo Video: https://youtu.be/DRbhOWUHf2o

Test Account:

  • Username: oystrazjudge
  • Password: judges@oystraz.com

Tested on: Google Pixel 7

Built with Google Gemini 2.0 Flash, Google Veo 3.1, Supabase, Suno AI, and a lot of late nights (which Pearl would definitely disapprove of).

Built With

Share this project:

Updates