Inspiration
The Mindful Grove was inspired by the difficulty of maintaining focus in a world filled with constant notifications and digital distractions. I wanted to transform that struggle into a cooperative game where focus becomes visible, meaningful, and rewarding.
The central idea is simple: when players stay focused, the World Tree grows. When someone becomes distracted, the grove becomes threatened by digital “pests.” Instead of punishing the player, the game gives them a short mindful challenge to return to the group.
What it does
The Mindful Grove is a cooperative focus game where players protect and grow a shared World Tree.
Players gain growth and health by completing deep-focus sessions. If someone becomes distracted, a digital pest appears and the grove enters a blighted state. The distracted player must complete a short rescue challenge, such as:
Remembering a sequence Completing breathing stages Entering a focus code Calibrating the gravity shield The game includes:
Animated 3D avatars and monsters Weather and day/night changes Tree themes Levels, quests, achievements, and daily challenges Grove Seeds for tree upgrades Keyboard and mobile movement controls Saved progress using browser storage Reduced-motion accessibility support The goal is to turn focus into something visible and collaborative: the more consistently players protect their attention, the healthier and larger the shared World Tree becomes.
How we built it
The project began as a Streamlit prototype using Python, Matplotlib, and session state. That version explored the core gameplay loop:
Shared tree growth and health Focus streaks Distraction events Breathing, gravity, and focus-code challenges Cooperative player status The final interactive version was built with:
TypeScript Three.js Vite HTML and CSS Web Audio API Local storage for saved progress The Three.js version includes a 3D grove, animated avatars, monsters, particles, fireflies, weather, day and night lighting, camera controls, mobile controls, quests, achievements, daily challenges, themes, and a seed-based upgrade shop.
The game state is organized around a shared model: Focus→Growth+Health+Rewards Distraction temporarily interrupts the loop: Distraction→Pest→Mindful Challenge→Rescue
Challenges we ran into
One major challenge was organizing the project after it contained both a Python prototype and a TypeScript 3D implementation. The build initially failed because Vite could not find the correct index.html entry point and the HTML still referenced an old generated bundle.
Another challenge was making the avatars feel natural. Early movement used world-space directions, which felt strange when the camera rotated. The avatars also tilted because their entire groups were pointed toward a 3D target. I solved this with camera-relative movement, horizontal-only rotation, bounded movement, and a proper walking cycle with alternating legs and swinging arms.
Browser audio was another challenge because browsers block audio until the user interacts with the page. I added Web Audio activation after user interaction, although audio behavior can still depend on the browser and operating-system mixer.
Finally, I had to balance new systems with the original gameplay loop. Weather, levels, quests, daily challenges, achievements, themes, seeds, and accessibility settings were added without removing the simple focus-and-rescue experience.
Accomplishments that we're proud of
Turned a simple Streamlit prototype into an interactive Three.js 3D game. Created a cooperative focus system where every player affects the shared World Tree. Built multiple distraction-rescue challenges, including breathing, gravity, focus-code, and memory puzzles. Added animated avatars, monsters, particles, fireflies, weather, day/night lighting, and walking animations. Added levels, quests, achievements, daily challenges, Grove Seeds, and tree upgrades. Implemented persistent progress using browser local storage. Added desktop keyboard controls and mobile touch controls. Added selectable Spring, Autumn, and Moonlight grove themes. Included reduced-motion accessibility support. Successfully fixed and verified the Vite/TypeScript production build.
What we learned
We learned how to move from a simple functional prototype to a browser-based 3D experience. The biggest lessons were:
How to structure shared game state separately from rendering How to use Three.js scene graphs and animation loops How to create animated particle effects without external assets How to build responsive HUD controls for desktop and mobile How to persist progress with localStorage How to design gameplay feedback through quests, achievements, weather, and rewards How important it is to test the built application rather than only checking compilation We also learned that small interaction details matter. Camera controls, avatar positioning, mobile input, animation timing, and browser audio permissions all required careful testing.
What's next for The Mindful Grove
Add online multiplayer synchronization so real players can share one grove. Create a decoration shop where Grove Seeds unlock lanterns, flowers, paths, and tree ornaments. Add story chapters and new grove areas connected to player progress. Expand rescue challenges with rhythm, pattern, and collaborative puzzles. Add weather-specific quests and seasonal events. Improve audio with ambient music, sound effects, and browser compatibility testing. Add performance settings for lower-end devices. Add accessibility options such as high contrast, text scaling, keyboard remapping, and screen-reader-friendly UI. Add analytics-free personal focus history and progress charts. Publish the game with a production deployment and a polished onboarding experience.
Log in or sign up for Devpost to join the conversation.