Blooming Within

• 

  rose_bud_img

• 

  rose_sprout_img

• 

  rose_blooming_img

• 

  game_introduction_bg

• 

  rose_seed_img

• 

  game_manu_bg

• 

  therapist

• 

  player

• 

  test_img

• 

  puzzle_img

• 

  calm_the_storm_bg

• 

  Regulation_bg

• 

  Echoes_in_river_bg

• 

  ending_bg

• 

  river_icon

• 

  attribute_icon1

• 

  leaf_icon

• 

  heart_icon

• 

  bird_icon

• 

  attribute_icon2

• 

  attribute_icon3

• 

  attribute_icon4

• 

  bell_none_color_icon

• 

  another_bell_none_color_icon

• 

  bell_colored_icon

• 

  birds_none_color_icon

• 

  birds_colored_icon

• 

  another_birds_colored_icon

• 

  flowers_none_colored_icon

• 

  another_flowers_none_colored_icon

• 

  logo

• 

  flowers_colored_icon

Inspiration

There are no games in the mental health space that actively guide players through emotional regulation. And mental health assessments are often clinical and text-heavy, lacking interactivity and warmth. We wanted to change that - creating an experience that is immersive, visually engaging, and playfully therapeutic, allowing players to not just recognize their emotions, but to process and navigate them in a meaningful way.

What it does

Blooming Within is an interactive game designed to help players explore and regulate their emotions through four engaging mini-games. By practicing breathing, cognitive reframing, mindfulness, and sensory activation, players nurture a rose, symbolizing emotional growth and self-discovery. The journey begins with a pre-screening quiz that personalizes their experience, guiding them toward the areas they need most. Along the way, integrated psychoeducation explains the purpose behind each game and quiz, helping players not only recognize their emotions but also develop practical tools for emotional regulation in a meaningful and engaging way.

How we built it

We built our project using React.js for the frontend, managing state with React Hooks like useState and useEffect. The game logic is structured around reusable React components, ensuring a modular and scalable architecture. To enhance engagement, we implemented HTML5 Audio API for sound effects and CSS Animations for smooth transitions. The game progression is driven by updating an attribute system, which influences the player's experience dynamically. For development, we used Vite as our build tool for fast refreshes and optimized bundling. All assets, including backgrounds, UI elements, and animations, were carefully designed to create an immersive experience.

Challenges we ran into

We had difficulties balancing engaging gameplay with evidence-based therapeutic techniques. Translating concepts like cognitive reframing, mindfulness, and sensory activation into interactive, playful experiences required multiple iterations to ensure they felt natural and enjoyable rather than clinical or forced. From a technical side, managing user input—like clicks, key presses, and drag-and-drop—needed a solid event system to keep things smooth. UI layout was another hurdle, making sure everything looked consistent across different screen sizes without elements overlapping. Animations and transitions had to be engaging while staying performance-friendly. On the design side, finding the right balance between making the game fun and educational took multiple iterations and user testing. Overcoming these challenges led to a more polished and user-friendly final product.

Accomplishments that we're proud of

Looking back, we’re really proud of how much we accomplished in this project. We took an abstract concept—emotional growth—and turned it into an engaging, interactive experience in 24 hours. Seeing our game come to life with smooth animations, immersive audio, and meaningful mechanics was incredibly rewarding. We also tackled some tough technical challenges, from syncing audio cues perfectly with gameplay to making sure our UI looked great across different screen sizes. It was amazing to watch everyone on the team grow their skills, whether it was learning React from scratch, optimizing game performance, or refining our approach to user interaction. Most of all, we’re proud that we created something that not only works but also has the potential to make a real impact, helping players explore and understand their emotions in a fun and thoughtful way.

What we learned

This project was an incredible learning experience for all of us. Some of us were new to React, while others had never worked with HTML5 Audio API before, so we spent a lot of time experimenting with different ways to integrate sound smoothly into gameplay. We also had to figure out how to manage complex state transitions across multiple components without making everything feel clunky, which led us to refine our use of React Hooks. Performance optimization was another challenge—using Vite helped us speed up asset loading and improve render efficiency, but we still had to fine-tune animations and user interactions to keep everything running smoothly. Designing intuitive UI and handling event listeners for both mouse and keyboard inputs also gave us a deeper appreciation for responsive game mechanics. Perhaps the most rewarding part of this journey was striking a balance between making the game fun and ensuring it delivered a meaningful emotional learning experience. In the end, we all walked away with a stronger grasp of technical skills and a new perspective on how games can be a tool for self-reflection and growth.

What's next for Blooming Within

Above all, we aim to collaborate with mental health professionals to refine the psychoeducational aspects of our project, building on the foundation set by our team’s mental health therapist trainee. Additionally, partnering with UI designers and backend engineers would help enhance the user experience, ensuring a more seamless and engaging interface. We also seek to integrate adaptive gameplay that tailors the emotional regulation journey to individual player needs, utilizing data analysis to continuously refine and improve the experience. Looking ahead, we see potential in developing mobile and VR versions to make emotional well-being tools more accessible and immersive. Ultimately, we envision Blooming Within becoming a widely recognized tool for emotional resilience, used in schools, therapy settings, and personal growth journeys.

Built With

• and-css
• as-all-logic-is-handled-within-the-app.-the-html5-audio-api-is-used-for-sound-effects
• css
• git
• github
• html
• html5
• javascript
• node.js
• react
• useeffect)-for-state-management-and-follows-a-component-based-structure-for-game-logic.-the-application-is-developed-using-vite-(or-create-react-app)-and-does-not-rely-on-external-apis
• vite
• while-css-animations-and-responsive-design-enhance-the-ui.-version-control-is-managed-through-git-and-github
• with-react.js-as-the-primary-framework.-it-leverages-react-hooks-(usestate