respir

• 

  branding

• 

  homepage

• 

  box breathing exercise

Inspiration

At Interlake, we sometimes perform short breathing exercises during mental health related special lessons. We wondered if these exercises could have tangible health benefits. After some research, we found that breathing exercises have a wide range of mental health benefits that are especially relevant to stressed out and sleep-deprived high school students. We created respir in order to provide a structured, guided, and immersive breathing exercise experience.

What it does

Within respir, users can choose from a variety of common preset breathing exercises, such as box breathing and 4-7-8 breathing. Within an exercise, a visualizer and audio cues guide the user through, ensuring consistent breathing durations. Calming ambient noise helps the user relax further. The length of each exercise and audio levels can be adjusted to suit the user's needs. We plan to add custom exercise creation and a breath holding test that can help athletes.

How we built it

We used sveltekit to create a fast and smooth user experience. All pages are client sided and prerendered to ensure performance. We ran into a lot of trouble with syncing and running visualizer animations, but eventually we found a solution using window.requestAnimationFrame(); that allowed us to control the animations frame by frame. This allowed us to implement beautiful and smooth animations.

Built With

• sveltekit