Box Breathing Animation An animated guide to help with calmness, mindfulness, stress and anxiety.

This animation visually guides you in the exercise. It is also known as square breathing or diaphragmatic breathing. It can have numerous benefits such as reduced anxiety, stress and increased mindfulness, calmness and relaxation.

I made this site as a programming exercise after seeing this post on HackerNews. The code is fully open source and can be found on GitHub.

If you found it useful and want to show your appreciation then you are very welcome to buy me a coffee :)

Guide for beginners

1. Sit with a straight back and relax.
2. Place one hand on your upper chest and the other just below your rib cage. This will allow you to feel your diaphragm move as you breathe.
3. Breathe in slowly through your nose so that your stomach moves out against your hand. The hand on your chest should remain as still as possible.
4. Tighten your stomach muscles, so that your stomach moves back in, as you exhale through pursed lips. The hand on your upper chest must remain as still as possible.

Now breathe in the following pattern, while remembering to breathe in through your nose, and out through your mouth:

• Breathe in (4s)
• Hold (4s)
• Breathe out (4s)
• Hold (4s)

Sometimes beginners feel out of breath when Box breathing, and this is completely normal. This will pass as when your technique gets better, so don't worry about being a little too early or late in the cycle to remain comfortable.

Some of this information comes from this Cleveland Clinic article.

Installing the app

This site works offline if you install it. These steps are for mobile.

On iPhone:

1. Open this site in Safari
2. Press the share button
3. Press "Add to Home Screen"

1. Press on the triple-dot icon
2. Press "Install app" in Chrome or "Add to Home Screen" in FireFox

If you're on Chrome Desktop you can press the button to the left of the bookmark button in the url bar.