Breath Bros

2024A breathing coach you follow with your eyes.As Designer / Developer

Live preview

One page, one job

Press S to start a breathing practice. Every feature has its own box in the bento grid.


1 / 6

Project
School project, Fanshawe IDP 2024. Solo.
Built with
HTML, CSS, JavaScript

Breath Bros is a friend who asks you to breathe with them. It started as homework at Fanshawe IDP. The lesson was how to control CSS with JavaScript, so the project was meant to be simple. Still, I wanted to make something useful, something people could really use.

Around then I was looking at apps like Headspace, which teach meditation. The more I thought about it, the more I felt that under all of it sits something much simpler: breathing. So the idea became a friend who asks you to breathe together, and that friend became Breath Bros.

I kept the page to one job. You press start, and you breathe. Then I added four modes, each a real technique people use for focus and health, and gave each one its own character so you can see the mode has changed. If I’m honest, I wish I’d had time to shape each character around its own breathing pattern.

For the look, I went with a bright bento grid where every feature gets its own box. The display and the Start button are the biggest, and the button doubles as the countdown. Beside them sit the controls that make a session longer or shorter, starting from one minute. Then I made the character breathe with you as you breathe in, hold and breathe out. That way you can follow it even if you never read the guide at the top.

The bento paid off again when it came to responsive. I only had to let the second row drop into a row of its own, and the layout settled into every screen size. Being full width made it even easier.

The whole thing took about a week. I was new to coding then, so it took a while, and most of that time went into learning about breathing itself.

If I picked it up again, I’d add more health references behind each technique, and a community where friends can challenge each other to breathe. That’s really why it’s called Bros: it could become a real group of friends. I’d also like to grow it into a brand, maybe even merch. I think it could be a wellness brand that’s fun and means something, while staying simple: it just asks you to stop for a moment each day and breathe well.