This Breath

a minimal tool for breathing exercises and breath visualization

How to use: synchronize your breath with the visualization. As the white circle fills the colored circle, breathe in, and as it shrinks, breathe out.

Here's a video introduction.

See the settings below to customize the breathing pattern. You can bookmark the website link to save the settings, or share it with others and they'll get the same setup.

Optionally, the tool can be used for meditation. One form of meditation could look like this: sync your breath with the visualization, keeping your awareness centered on your breath and not your sight. Whenever you notice your mind wander from your breath, gently bring your awareness back, and click or tap anywhere or press any key on your keyboard to acknowledge your wandering attention. This creates a colored memory that will dissipate in a moment. (You've created 0 in this session.) It's helpful to understand that noticing your loss of attention is part of what's being trained - so when you realize your focus has drifted, consider it a small victory. This is just one of infinite possibilities - search the web if you want to learn more about meditation.

Please note! I strongly recommend against using this tool as a primary meditation companion. It may be useful to gain some visualization muscle memory for meditators, (that's what I hope to get from it) but I think it'll detract from the experience if regularly used in one's practice, in part because it may encourage you to fixate on your sense of sight. Beyond meditation, the tool may also be useful to explore various breathing patterns.

Also, stop using this tool if it makes you feel uncomfortable. I doubt it's harmful to stare at the pretty colors, but it seems possible. You can also adjust the colors below.

Settings

The breath timings represent the number of seconds to spend in each part of the breath cycle, from (1) inhaling to (2) pausing when full to (3) exhaling to (4) pausing when empty.

The timings must be semicolon-separated numbers in groups of 4, for the 4 parts of the breathing cycle (in, pause, out, pause). For example, if you want to breathe in for 5 seconds, pause for 1 on full, exhale for 3 seconds, and pause for 1 on empty, and then repeat, you would enter a value of "5; 1; 3; 1". If you want to alternate between short and long breaths, so 4 seconds in, pause for 1, 4 seconds out, pause for 1, then a long breath of 9 seconds in, no pause at the top, 9 seconds out, no pause at the bottom, and then repeat, enter a value of "4; 1; 4; 1; 9; 0; 9; 0".

Is this UI unwieldy? Yeah, sorry, please excuse the obtuseness. :} It's flexible though, and was quick to implement within the technical constraints I set for the project.

colors

Accepts a semicolon-separated list of color values that work with canvas. For example, you could just put "black; red", or use rgb/hsl/hex notation, like "#000; hsl(0, 100%, 50%)".

About

Thanks for checking out This Breath. I hope it helps you in some way.

The source code is available on GitHub. It's made with TypeScript, canvas, and no dependencies. Issues are always open.

Happy breathing. :)

⚙