-
-
See a collected Cornflower up close after it reaches full bloom.
-
Review completed breaks alongside an optional thought, photo, and approximate location.
-
Add an optional thought, photo, or approximate location during a break.
-
Discover five flowers that can become part of your garden.
-
Every five cumulative minutes outdoors earns a new seed.
-
Sign in to continue growing your personal garden.
-
Track your break while you step away from the screen.
-
To received other user's photo.
"Try it out" links ==> ( usr: [email protected] , pwd: 123123 )
Inspiration
A break from work often becomes more screen time: another video, another feed, another notification. We wanted to create a reason to step away and notice the world around us.
Inspired by Nature Life × Modern Life, Mori connects a simple break timer with a growing virtual garden. Our idea is simple: time spent away from the screen can help something bloom.
Step away, Grow closer.
What it does
Mori turns short breaks into progress you can see.
Users start a break, step away from their screens, and return to end the session. Their completed break time is saved and helps a virtual California poppy grow through five stages: Seed, Sprout, Seedling, Bud, and Bloom.
The Garden page shows their plant’s progress, while the Profile page brings together break statistics, achievements, flower collections, and recent activity.
For our hackathon demonstration, the poppy reaches full bloom after ten cumulative minutes. A separate demo mode lets viewers explore every growth stage without changing their saved progress.
How we built it
We built Mori with React, TypeScript, and Vite, using Tailwind CSS and custom CSS for the interface. React Router connects the break timer, garden, and profile pages.
Supabase Auth handles sign-in, while Supabase PostgreSQL stores completed break sessions. Row-level security restricts access to each user’s records.
Plant growth is calculated from cumulative completed break time, connecting the timer, garden, and profile through shared data. We deployed the web app on Vercel.
Challenges we ran into
One central challenge was keeping the timer, saved sessions, and plant growth consistent. A completed break needed to remain available after a refresh and contribute correctly to the user’s progress.
We also needed a way to demonstrate the entire growth cycle during a short presentation. We addressed this with a separate preview mode that leaves real break records unchanged.
Another design challenge was building an app that encourages people to leave it. We kept the main interaction simple: start a break, step away, and return when ready.
Accomplishments that we're proud of
We connected the full experience: signing in, completing a break, saving the session, and seeing that time reflected in a growing garden.
We’re also proud of giving a familiar timer a more personal purpose. The California poppy makes accumulated break time feel tangible, while the calm colors and botanical visuals support the experience we wanted to create.
What we learned
Building Mori taught us how closely interface design and data reliability are connected. A peaceful experience still depends on consistent state, reliable storage, and clear feedback.
We also learned to distinguish between demonstration controls and real user progress, and to prioritize a complete core experience within a hackathon’s limited time.
Most of all, we explored how technology can encourage a small action beyond the screen.
What's next for Mori
Our next step is Nature Quest: optional observation prompts such as “Find a color you haven’t noticed today” or “Listen for a sound beyond your screen.”
We also want to let users record a short reflection after a break, expand the garden with more plants, and introduce customizable growth goals.
Our goal is to make Mori a gentle invitation to pause, notice, and reconnect.
Built With
- css
- postgresql
- react
- router
- supabase
- tailwind
- typescript
- vite
Log in or sign up for Devpost to join the conversation.