Mood Garden

Grow your mental wellness—one reflection at a time. A beautiful digital garden that blooms with your mindfulness practice.

Comment 3

Inspiration

In a world obsessed with metrics, streaks, and quantified self-improvement, we noticed a troubling pattern: mental health apps often create more anxiety than they relieve. We've all seen it—missed a day? Lose your 47-day streak. Didn't hit your journaling goal? Red notification. Your meditation score is below average.

But mental wellness isn't a competition. Growth isn't linear.

We were inspired by the simple, profound joy of tending a garden. Plants don't grow on schedules. They don't judge you for taking a day off. They simply respond to consistent care with natural, organic growth. We asked ourselves: What if mental health tracking felt like nurturing a living thing rather than filling out a progress report?

Thus, Mood Garden was born—a space where your mindfulness practice becomes a living, breathing garden that grows naturally with your dedication, free from the tyranny of numbers and percentages.

What it does

Mood Garden is a qualitative mental wellness companion that transforms your self-reflection journey into a beautiful, evolving digital garden.

🌱 Core Features:

1. Reflective Journaling

  • Write daily reflections without word count pressure
  • AI-powered mood analysis that understands nuance
  • Beautiful, distraction-free writing interface
  • Your entries become "seeds" that nourish your garden

2. Focus Mode

  • Pomodoro-style focus sessions with a twist
  • Watch a plant grow in real-time as you stay focused
  • If you switch tabs, the plant starts wilting (gentle accountability!)
  • Complete sessions add "growth points" to your main garden

3. Living Garden Visualization

  • Your consistency grows a plant through 6 natural stages:
    • 🌾 Seed → 🌱 Sprout → 🌿 Young Plant → 🌸 Blooming → 🌳 Tree → 🍎 Fruiting Tree
  • Each stage has unique, hand-crafted animations
  • Progress is shown through visual beauty, not percentages
  • Collect "Flowers of Dedication" and "Fruits of Patience" as achievements

4. Qualitative Insights

  • No streak counters, no guilt-inducing metrics
  • Instead: "Your garden is flourishing" or "Seeds are germinating"
  • Growth rhythm analysis: "Magnificent consistency" vs "Beginning again"
  • Emotional landscape understanding through AI

5. Help & Guidance

  • Beautiful showcase of all plant stages
  • Clear, visual guide to growth milestones
  • Tips for sustainable mindfulness practice

The Philosophy: No Quantification

We deliberately removed all anxiety-inducing metrics:

  • ❌ No day counters
  • ❌ No percentages
  • ❌ No word count goals
  • ❌ No "you're falling behind" messages

✅ Just natural, organic growth that mirrors real life.

How we built it

Frontend: React + Vite

  • Framer Motion for smooth, organic animations (every plant sways, grows, and blooms naturally)
  • Tailwind CSS for beautiful, responsive design with dark/light mode support
  • Lucide React for clean, modern icons

Backend: Supabase

  • PostgreSQL database for storing journal entries, focus sessions, and garden state
  • Supabase Auth for secure user authentication
  • Real-time subscriptions for instant updates

AI Integration: Google Gemini API

  • Mood analysis from journal entries
  • Contextual writing prompts based on emotional state
  • Generates insights without exposing raw scores to users

State Management: React Context + Custom Hooks

  • useAuth for authentication state
  • useJournal for journal operations and growth calculations
  • useSettings for theme and preferences

Key Technical Achievements:

  1. Natural Plant Animation System

    • Created 6 detailed plant stages with 30+ unique SVG components
    • Each element has organic motion: swaying leaves, bobbing fruits, blooming flowers
    • Staggered animation delays create realistic growth sequences

  2. Qualitative Progress Algorithm

    • Converts journal frequency into "growth points" behind the scenes
    • Maps points to plant stages: Seed (0-1) → Fruiting Tree (40+)
    • Users only see: "Sprouting...", "Growing...", "Flourishing...", "Majestic!"

  3. Focus Mode Plant System

    • Real-time plant growth tied to timer progress (0-20% = seed, 80-100% = small tree)
    • Tab visibility detection pauses timer immediately (no background cheating!)
    • Visual feedback with wilting animations if user loses focus

  4. Theme System

    • Seamless light/dark mode with nature-inspired palettes
    • Sage/Earth tones in light mode, Slate/Gray in dark mode
    • All components theme-aware with Tailwind's dark: prefix

Challenges we ran into

1. The Quantification Paradox

Our biggest challenge was building a progress system that tracks growth without showing numbers. We had to:

  • Calculate growth points in the background
  • Convert them to qualitative stages
  • Resist the temptation to show "helpful" metrics
  • Solution: Created a mapping system where numbers exist only in code, never in UI

2. Natural Plant Animation

Making digital plants feel alive was technically demanding:

  • Initial attempts with L-system algorithms looked too mathematical/fractal
  • Blockly Minecraft-style plants felt too gamified
  • Solution: Hand-crafted each plant stage with SVG paths, using layered animations and staggered timing to create organic movement

3. Focus Mode Integrity

Users could "cheat" by switching tabs while the timer ran:

  • First attempt: Just show a warning (ineffective)
  • Second attempt: Kill plant after 3 seconds (too harsh)
  • Solution: Pause timer immediately on tab switch, give 3-second grace period to return, then consequence

4. AI Mood Analysis Without Over-Reliance

We wanted AI insights without making the app dependent on perfect AI responses:

  • Challenge: API failures, rate limits, inconsistent analysis
  • Solution: Graceful degradation—if AI fails, fall back to simple keyword-based mood detection. The garden grows either way.

5. Balancing Beauty and Performance

With 40+ animated SVG elements on screen:

  • Initial version had laggy animations
  • Solution: Optimized with will-change CSS, reduced simultaneous animations, and used transform instead of position changes

6. Light Mode Design

Originally built for dark mode only:

  • Had to retrofit every component with theme awareness
  • Gradients that looked good in dark mode were invisible in light mode
  • Solution: Systematic review with dual color palettes (sage/earth vs slate/gray)

Accomplishments that we're proud of

🏆 Created a Truly Qualitative Wellness App

  • We resisted industry norms and built something genuinely different
  • No streaks, no guilt, no anxiety—just natural growth

🎨 Beautiful, Hand-Crafted Animations

  • 6 unique plant stages with 30+ components
  • Each plant feels alive with organic motion
  • Smooth transitions that rival production apps

🧠 Thoughtful UX Design

  • Focus mode that respects user attention
  • Writing interface that encourages reflection, not rushing
  • Help page that's actually helpful

🔒 Robust Architecture

  • Clean separation of concerns
  • Reusable custom hooks
  • Scalable component structure

🌙 Polished Details

  • Seamless light/dark mode
  • Responsive design (mobile & desktop)
  • Accessibility considerations
  • Error handling and edge cases

✨ Innovation in Gamification

  • Proved you can motivate without metrics
  • Growth visualization without numbers
  • Achievements that feel meaningful, not manufactured

What we learned

Technical Learnings:

  1. Framer Motion Mastery

    • Advanced animation orchestration
    • Performance optimization for complex SVG animations
    • Creating organic motion with easing curves

  2. SVG & Web Animation

    • Hand-crafting complex SVG illustrations
    • Layering animations for depth
    • Using transforms for performance

  3. State Management Patterns

    • Context API for global state
    • Custom hooks for logic encapsulation
    • Optimizing re-renders with React.memo

  4. Supabase Real-time Features

    • Database triggers for automatic updates
    • Row-level security policies
    • Efficient query patterns

Design Learnings:

  1. Psychology of Gamification

    • Metrics can create anxiety, not motivation
    • Qualitative feedback is more sustainable
    • Visual beauty creates emotional connection

  2. User Experience Philosophy

    • Sometimes less information is more helpful
    • Trust users to understand metaphors
    • Design for long-term wellbeing, not short-term engagement

  3. Accessibility Matters

    • Color contrast in both themes
    • Focus states for keyboard navigation
    • Readable typography and spacing

Product Learnings:

  1. Scope Management

    • Started with 10+ features, shipped with 5 core ones
    • Better to polish fewer features than ship many mediocre ones

  2. User-Centered Development

    • Constantly asked: "Does this add value or just complexity?"
    • Removed features that contradicted our philosophy (even after building them!)

  3. The Power of Constraints

    • "No quantification" seemed limiting at first
    • Actually forced more creative, meaningful solutions

What's next for Mood Garden

Short-term Goals (Next 3 Months):

🌍 Community Features

  • Optional garden sharing (without social pressure)
  • Gentle encouragement from friends ("Your friend's garden bloomed today!")
  • Private garden circles for accountability partners

📊 Personal Insights Dashboard

  • Mood pattern visualization (still qualitative!)
  • "Your garden thrives on Tuesday mornings"
  • Seasonal growth patterns over months

🎵 Ambient Soundscapes

  • Nature sounds during focus mode
  • Customizable audio environments
  • Rain sounds for journaling

Medium-term Goals (6-12 Months):

🤖 Enhanced AI Integration

  • Personalized writing prompts based on garden stage
  • Gentle suggestions: "Your garden seems quieter lately. Would you like to reflect?"
  • Pattern recognition: "Your oak tree grew strong during morning journals"

🎨 Garden Customization

  • Multiple plant types (succulents, bamboo, bonsai)
  • Seasonal themes (spring blossoms, autumn leaves)
  • Weather effects (rain, sunshine, wind)

📱 Mobile App

  • Native iOS/Android apps
  • Widgets showing current plant stage
  • Push notifications (gentle, non-intrusive)

Long-term Vision (1+ Years):

🌳 Multiple Gardens

  • Different gardens for different life areas (career, relationships, creativity)
  • Garden interconnections (all gardens in one forest)
  • Legacy gardens (pass gardens to future self)

🧘 Wellness Integrations

  • Meditation timer with plant growth
  • Gratitude practice integration
  • Sleep tracking → night-blooming flowers

🎓 Educational Content

  • Guided journaling courses
  • Mindfulness tutorials
  • Mental health resource library

🌐 Expansion

  • Multi-language support
  • Cultural garden variations (zen gardens, English gardens, tropical gardens)
  • Therapist collaboration tools (optional professional support)

Core Commitment:

No matter how Mood Garden grows, we will never compromise on our core philosophy:

  • ✅ Always qualitative, never quantitative
  • ✅ Always nurturing, never guilt-inducing
  • ✅ Always beautiful, never cluttered
  • ✅ Always respectful of mental health, never exploitative

Mood Garden isn't just an app—it's a philosophy. Mental wellness should feel like tending a garden: patient, gentle, and naturally rewarding. We're excited to keep growing this vision alongside our users. 🌱✨

Built With

Share this project:

Updates