MindThaw

💡 Inspiration

The theme of "Winter to Spring" resonated deeply with us, not just as a season, but as a metaphor for mental health. Journaling is a powerful tool for processing emotions, but text on a screen often feels flat, clinical, and isolated. It’s hard to see progress when you are just staring at words.

We asked ourselves: What if we could see our feelings grow?

We wanted to build an experience where difficult emotions (Winter) aren't deleted, but planted—eventually growing into a vibrant, diverse ecosystem (Spring). This inspired MindThaw, a "Gardening Interface" for your mind.

🌷 What it does

MindThaw is an immersive 3D journaling app that turns text into procedural art.

1. AI Sentiment Analysis: You type how you feel. Google's Gemini 2.5 Flash analyzes the text and extracts a "Mood Score" (0-100), a symbolic color, and a flower type.
2. Procedural Generation: Instead of using static 3D models, we use React Three Fiber to procedurally generate unique "Liquid Art" flowers.
3. Sad/Cold entries generate slow-moving, jagged, blue/grey forms.

4. Happy/Passionate entries generate fast-spinning, bouncy, warm-colored blooms.

5. The Garden: Every entry is saved to a Supabase database. Over time, your screen fills with a grid of past emotions, creating a visual history of your mental state.

6. Adaptive Atmosphere: The app calculates the "Average Mood" of your garden. If you've been feeling down, the environment reflects a dark winter night with wind sounds. As you log positive entries, the sun rises, the lighting warms up, and bird sounds fade in.

⚙️ How we built it

We built MindThaw as a full-stack modern web application:

• The Brain: We used the Google Gemini API with advanced prompt engineering to force structured JSON output, giving us precise control over the 3D rendering parameters.
• The Body: The 3D scene is built with Three.js and React Three Fiber. We used MeshDistortMaterial to create the organic "liquid" look and react-spring to add physics-based growth animations.
• The Memory: We used Supabase (PostgreSQL) to persist user entries, allowing the garden to grow over days and weeks.
• The Polish: We added a custom audio mixing engine that crossfades between two audio tracks (Winter Wind vs. Spring Birds) based on the user's mood history.

🚧 Challenges we ran into

• Procedural Art is Hard: Initially, our flowers looked like simple plastic spheres. We had to learn how to manipulate Torus geometries and apply custom distortion shaders to make them feel "alive" and organic without crashing the browser.
• Mobile Responsiveness: Fitting a 3D canvas and a UI sidebar on a phone screen was a nightmare. The 3D scene kept getting squashed to 0px height. We solved this by building a custom responsive layout that switches from a "Cinematic Dashboard" on desktop to a "Vertical Scroll" stack on mobile.
• Audio Policies: Browsers block auto-playing audio. We had to build a dedicated "Audio Ambience" component with a user-toggle state to handle the browser security policies gracefully.

🧠 What we learned

We learned that AI is more than just a chatbot. By using Gemini to control visuals and physics rather than just generating text, we opened up a new way to interact with software. We also gained deep experience in managing complex global state (syncing 3D animations, database history, and audio volume) using Zustand.

Built With

• css
• gemini
• supabase
• tailwind
• three.js
• vite
• zustand