07.05.25 - 29.05.2025
In Sprint 2, we were tasked with creating a browser extension around the theme Take a Break. We worked in a team, but since our coding skill levels varied, we started by experimenting individually. While others were being introduced to HTML, CSS, and JavaScript, I began developing the first extension, initially targeting Firefox and later adapting it for Chrome.
My first idea was to transform websites into a guided breathing exercise, encouraging users to pause and breathe. I used CSS animations and transitions to manipulate any webpage. The site zooms in and out, elements expand and shrink, opacity and letter spacing pulse in rhythm, and text turns into the instructions BREATHE IN and BREATHE OUT. A blur appears around the screen edges to amplify the calming effect. I was happy with how this extension turned out, both visually and conceptually.
Since we were encouraged to try multiple ideas, I moved on to another concept the next day: breaking the website, giving the word break a double meaning. After breaking the site a certain amount, an interruption appears suggesting a break. We initially discussed having each teammate design their own unique interruption to combine later. I played with corrupting on-page text, making elements fall when clicked, and adding broken screen PNGs at click points to simulate damage.
I wanted to explore physics-based interaction, so I integrated Matter.js to simulate gravity and collision. After some trial and error, I got it working. DOM elements were tied to Matter.js physics bodies, letting them fall and interact naturally. This was both technically challenging and fun to play with.
Lastly, I wanted to learn how background scripts work. I built a usage-tracking extension that collects mouse movements and clicks across websites, visualizing them as a heatmap. Users can switch between data types and domains to gain insights into their browsing behavior.
Eventually, our team decided not to merge our extensions due to visual and conceptual differences. We agreed it would be better to present them individually and keep the option open to refine the ideas in the final sprint. What worked well for me was trying many different directions. I learned a lot and enjoyed the process. However, a clearer team concept and more structure might have helped clarify where to put our focus towards the end of the sprint.
