Breathing timer

A simple implementation of an animated breathing timer for relaxing breathing techniques as Svelte component.

Check out the implementation at github.com/shadovo/svelper/.../BreathingTechnique.svelte

4 seconds in 6 seconds out.

START

This is the default behaviour that you get by simply including the following

<BreathingTechnique />

This would be the same as passing in the following props:

const breathInConfig = {
	duration: 4000,
	delay: 700,
};
const breathOutConfig = {
	duration: 6000,
	delay: 700,
};

<BreathingTechnique {breathInConfig} {breathOutConfig} />

This game is also available in an embed version at https://www.svelper.com/embeds/v1/breath

4 seconds box breathing

START

You can also customize the duration and delay of the breathing in and out by passing in the following props:

const boxBreathing = {
	duration: 4000,
	delay: 4000,
};

<BreathingTechnique breathInConfig={boxBreathing} breathOutConfig={boxBreathing} />

4, 7, 8 breathing.

This one is configured for the 4, 7, 8 breathing technique. The duration of the breathing in is 4 seconds, hold for 7 seconds and breath out for 8 seconds.

START

const breathInConfig = {
	duration: 4000,
	delay: 700,
};
const breathOutConfig = {
	duration: 8000,
	delay: 7000,
};

<BreathingTechnique {breathInConfig} {breathOutConfig} />

Default timing with muted sound and no vibration

You can also mute the sound and vibration by passing in the following props: sound={false} vibration={false}

START

<BreathingTechnique sound={false} vibration={false} />