How it looks like when someone looks it for the first time.
When the timer hits 0:00 it looks like this, and notifies you to rest for a short.

Inspiration

I observed people who spend many hours in frontof a screen every dat, I noticed how easy it is to lose track of our own body such as tiredd eyes, tense shoulders, bad postures. I wanted to build something that gently interrups that pattern not with guilt, but with awareness.

What it does

Recess is a small web app that pairs a focus timer with two things most productivity timers ignore: physical care and self-awareness. Every 20 minutes, it prompts a short break based on the 20-20-20 method (look at something 20 feet away for 20 seconds) along with quick stretch suggestions for your shoulders and neck. During each break, it also asks a simple question that "how's your mood?" that and logs the answer. Over time, this builds a trend chart so you can actually see patterns in your own energy throughout the day, instead of just guessing.

How we built it

Recess is built with vanilla HTML, CSS, and JavaScript with no frameworks, no backend. All data (mood check-ins) is stored locally in the browser using localStorage, so there's no login, no server, and no privacy concerns about where personal wellbeing data goes. Chart.js handles the energy trend visualization, and the Web Audio API generates a simple chime for break notifications, paired with the native browser Notification API.

Challenges we ran into

Getting native browser notifications to actually appear (not just play sound) turned out to be trickier than expected that permissions live at three different layers (the website, the browser, and the OS), and any one of them silently blocking notifications looks identical from the outside. I also had to rework the timer logic from a simple decrementing counter to a timestamp-based approach, since browsers throttle setInterval in background tabs, which would have made the timer drift when users switched tabs.

Accomplishments that we're proud of

Getting the mood trend chart working end-to-end that from tapping an emoji, to saving it in localStorage, to seeing a real line chart update live which felt like the moment the project stopped being "just a timer" and became something that actually reflects the user back to themselves.

What we learned

I learned a lot about browser storage APIs, the layered nature of notification permissions across OS/browser/site, and how something as small as a timestamp-based timer versus a naive counter can make a real difference in reliability.

What's next for Untitled

Weekly/monthly views of energy trends, not just recent check-ins
Optional correlation between break frequency and self-reported energy over time
A lightweight PWA version so it can run persistently even when the tab isn't focused