HABIT VERSE - Lifestyle & Game · Full Stack · AI-Powered · 3D WebGL

Ashish Rai — Tue, 19 May 2026 16:18:26 +0000

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

DEV Community: Ashish Rai

Check it out !!!1