Single HTML element + CSS only
- Inhale for 4 seconds
- Hold for 4 seconds
- Exhale for 4 seconds
- Hold for 4 seconds
And repeat
Inspired by: https://quietkit.com/box-breathing/
Note: The current Safari version has a bugged linear() implementation that has been fixed in the upcoming version.
Lol, well I could change it, but it was based on the gif at https://quietkit.com/box-breathing/
I think it’s because you’re not supposed to expand your lungs so much that they feel like they’re going to burst.
But if you scroll to the bottom of the css and look at line 69, you can change
transform: scale(90%);totransform: scale(100%);to see if you like it better.Haha nice, thanks!