luseeds / breathe

Feel better, every breathe matters

breathe

Feel better, every breathe matters

You can see a live version at: https://breathe.luseeds.com

About

⚠️ This is still a WIP project. Any help/contribution/PR is highly appreciated.

---

Our daily lives are full of a constant flow of information, thoughts, feelings. We feel like time is flying away and we're not in control.

What if, for a short moment, we take control back. This is where Breathe comes in. Just settle down for a moment, relax and breathe!

Be in the present moment, that's all that matters. Simply breathe.

Build setup

For detailed explanation on how things work, check out Nuxt.js docs.

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

This website is hosted on Netlify
The logo icon is an adaptation of Freepik on www.flaticon.com Relaxing royalty free background music (Quiet Time) from FesliyanStudios

---

A project from luseeds

breathe's Issues

Run and fix Lighthouse score

Create breathing presets and a preset selector

• reset when config change
• redraw when not playing and config changed
• style the dropdown
• don't modify preset values

On visibility change, reset the timer/animation

When we change tab and comes back, sometime the canvas animation is off.
I guess it's because of the way requestAnimationFrame is implemented.
So one way to solve that would be to reset the canvas on visibility change (browser event)

Fix the little time shift after a full circle is done

At the end of a full circle rotation, we can see a little jump.
I think this is due to a small offset from the timing functions.

Add reference to luseeds

Add a description section on the site

Allow user to add/delete breathing value in custom preset

Allow a user to add/remove lines in a breathing config.
He/She could choose the type (inhale/exhale/hold) and the duration.
Also we could drag-n-drop between the lines to create our perfect flow and save it locally.

Change default favicon

Create robots.txt

Add shades of blue to tailwind

Add the shades of blue from the color palette to the tailwind config

• define the var in tailwind config
• use them

Find a logo

Save configuration to user local storage

Add a play button

On first page load, display a play button instead of the actual auto-start

• display button
• hide button on click
• hide breathing instructions when not playing
• check accessibility
• pause button
• pause on click
• pulse effect
• hover effect
• color from tailwind? (create other task to define blue shades)
• add transition effect between play/stop

Add a grow/shrink effect on the canvas animation

Add some section change sound notification

In the context where someone uses the app with his/her eyes closed we should display sound notifications to notify him/her about the new breathing section.