Overgrown

UI of extension pop up
Final Overgrowth over a website

Inspiration

Our inspiration _ stemmed _ from the desire to create a productivity and mindfulness tool that encourages users to take breaks from their screens and reconnect with the outside world. We wanted to represent this by letting nature take over our technology rendering it difficult to use and inspiring us all to learn how to disconnect.

What it does

Overgrown is a browser extension that encourages users to take breaks by covering their screen with natural plant overgrowth over time. Users can select specific websites (e.g., YouTube, Netflix, social media) they wish to limit. As these tabs remain open, the extension tracks their duration. After 55 minutes, animated vines and plants begin to cover the screen, and at 60 minutes, the page is fully obstructed, rendering it unusable until the user takes a break. This gives users a visual representation of the passage of time to fight against time blindness when we get so engrossed on our screens. It also serves as a reminder of the world around us we have to tend to when we are not stuck on the screens. Without proper attention our other daily tasks can grow out of control!

Core Features

Website Selection: Users can specify which sites to limit (e.g., YouTube, Netflix, social media). Time Tracking: Tracks how long a tab is open, triggering actions after specific intervals. Progressive Obstruction: After 55 minutes, animated vines/vegetation begin to cover the screen. Site Lockout: At 60 minutes, the page becomes fully covered, blocking interaction.

How we built it

The extension was developed using React with Vite for faster build times. The frontend was built with React, and the backend functionality was implemented in JavaScript. The entire development process was intensive, requiring problem-solving and creative work.

Challenges we ran into

Backend Integration: Initially, we struggled with backend access due to React's lack of support for JavaScript files. This led to a fresh repo setup using Vite. Tab Timer Issues: The timer was tracking every tab open, breaking when switching tabs, and going into negative values. Vine Animation: Animating the vines was complex, with scaling issues across different browser aspect ratios. We also encountered problems with the vines' sizing and ensuring they fit within the browser window. Memory Consumption: The SVG file was taking in every pixel, colored or clear, and ended up containing over 70,000 lines of codes instead of just tracking the pixels being drawn in color.

Accomplishments that we're proud of

We successfully created all UI elements and vine animations within a day. Our first fully functional web extension was developed. We managed to manipulate browser data and dynamically alter a webpage through the extension.

What we learned

How to build Chrome extensions using Vite and React. JavaScript's capabilities for time tracking and local storage in a browser context. How to handle the challenges of manipulating browser pages dynamically.

What's next for Overgrown

Introducing a feature that simulates being outdoors and reinforces the idea that time is limited. Adding a cooldown timer that resets after a user takes a break. Allowing users to set varying levels of vegetation growth based on their preferences.

Built With

Submitted to

Hacklahoma 2025

Created by

I worked on the design and functionality of all of the react components in this project. This includes basic styling and making the functions of the buttons export to the backend

Thomas Petersen
I was responsible for the UI design of this project and I hand drew all assets used in this project. I was also responsible for frontend styling and worked on insuring proper frame generation.

Marilou Bento
Computer Science Major at The University of Oklahoma. I love coding projects that aim for creativity in either style or solutions.
I was responsible for the background / backend and getting all of that functional alongside the actual extension. This included a lot of the functions regarding the timer, tabs, chrome itself, and how the animation worked with it all.

Robert Darby
I was full-stack for this project. I worked on setting up the basic ui components for the extension. once we had this set up, I transitioned to work in the back-end, assisting in setting up the timer functionality, animation logic, and storage of added URLs.

coltonsellers Sellers