Inspiration

Most habit tracking apps fail not because users forget their goals — but because they stop caring. Streaks feel like data entry. There's no emotional stake. We asked ourselves: what if missing a habit didn't just break a streak — it cracked your entire world apart? That question became HabitVerse.

What it does

HabitVerse is a full-stack web app where your daily habits build a living, breathing 3D planet. Complete your sleep, hydration, exercise, and study goals — watch terrain rise, oceans fill, forests grow, and your sky turn golden. Miss them — storms form, land cracks, and your world begins to die.

There are no charts. No spreadsheets. The planet IS the dashboard.

Every habit appears as an orbiting moon around your planet. Click a moon, check in your habit, and watch the terrain morph in real time with particle bursts and animations. Miss a habit and the ground literally cracks with a screen shake.

The Planet Oracle — powered by Gemini AI — narrates your planet's state like a nature documentary, referencing your actual streak data and generating personalized daily challenges.

The Time Machine lets you scrub through your planet's entire history — watching mountains grow, oceans fill, or seeing the exact moment you fell off track.

How we built it

• Frontend: React + Vite, Three.js via React Three Fiber for the 3D planet, GSAP for camera animations, Framer Motion for UI spring animations, Tailwind CSS
• Backend: Node.js + Express, MongoDB with Mongoose, JWT authentication
• AI: Gemini AI API powering the Planet Oracle with full habit context in every prompt
• Database: Supabase Edge Functions for the Oracle chat route
• Deploy: Vercel (frontend), Railway (backend)

Every single interaction has a micro-animation. Nothing in HabitVerse is static.

Challenges we faced

• Building a real-time 3D planet that morphs terrain based on live habit data using Three.js morph targets was the hardest technical challenge — syncing planet state with the database without performance drops required careful optimization.
• Designing the Planet Oracle prompt so Gemini always responds with personalized, dramatic narration — never generic advice — required multiple iterations of the system prompt with strict context injection.
• Making the Time Machine scrubber smoothly morph the planet between historical snapshots required storing daily planet state as JSON and interpolating between morph targets on the fly.

What we learned

• How to build and animate 3D WebGL experiences in the browser using Three.js
• How to design AI prompts that feel personal and contextual rather than generic
• That emotional design is the most powerful retention mechanic — users return not because of reminders, but because they genuinely don't want their planet to die
• Full-stack architecture with Supabase Edge Functions for secure AI API proxying

What's next for HabitVerse

• Native mobile app (iOS/Android) with push notifications tied to planet health decay
• Multiplayer planets — build a shared world with friends or teammates
• Voice check-ins via the Planet Oracle
• Custom habit categories and AI-generated habit suggestions based on your goals
• Export your planet's evolution as a shareable timelapse video