Critter Break

Inspiration

This project has a personal story behind it, and I'd love to share it with you. One evening, after finishing a long day of work on my desktop, I got into bed and started scrolling through my phone. That’s when I came across my screen time stats—and I was shocked! The amount of time I was spending on electronic devices was far more than I had imagined. I had been experiencing trouble sleeping and persistent eye irritation, and it all suddenly made sense.

That's when the idea for this project was born. It stems from a common issue we all face in today’s digital world—excessive screen time. I wanted to tackle the health concerns associated with prolonged screen exposure, such as eye strain, sleep disturbances, and even the risks of a sedentary lifestyle like obesity and cardiovascular issues.

As an animal lover, I also know how much joy and comfort animals can bring. This inspired me to gamify the process of taking breaks by introducing adorable critters as digital companions. With the critters interacting with users during their breaks, combined with a point system to unlock new critters, I aimed to make taking regular, healthy breaks fun and rewarding. Through this project, I hope to help people—myself included—maintain a healthier balance with their screen time.

What it does

This project is a browser extension designed to help users manage their screen time by encouraging them to take regular breaks in a fun and engaging way. Here's how it works:

Work and Break Timers: Once the extension is activated, it automatically cycles between work periods and break periods, notifying the user when it’s time to take a break.
Critter Animations: During break times, users can summon an adorable critter that interacts with their cursor. The critter helps track whether the user is actually taking a break by following their cursor movements.
Screen Dimming: To encourage users to step away from their screen entirely, the screen automatically dims when the user hovers over the break window, making it harder to continue working.
Point System: Users can earn points based on how long they spend taking breaks. These points can be used to unlock new critters, providing extrinsic motivation to take more frequent breaks.
Customizable Settings: Users can personalize their experience by adjusting break durations, intervals, and choosing whether to enable screen dimming. Settings are synced across devices, making the experience consistent no matter where the user logs in.

In essence, this extension makes managing screen time both fun and beneficial by encouraging healthier digital habits.

How we built it

We built the project using a mix of web technologies :

Front end: HTML, CSS and JS.
Service Workers: Handled timers and tracked work/break states across tabs.
Chrome Storage API: Saved user settings like break duration and preferences, ensuring synchronization across devices.