✏️ SOS Breathe page · rough sketch
Gray = placeholder. Real colors, fonts and logo come after you approve.
① Phone · before start
SOS · breathe
Let's breathe together
Follow the circle. No counting needed.
○ ○ ○
🔔 sound: off📳 buzz: off
② Breathing in (4 sec)
SOS · breathe
Let's breathe together
↑ circle slowly grows · red line fills the ring
● ○ ○
③ Hold (4) → Out (6)
SOS · breathe
Let's breathe together
then shrinks slowly: "Breathe out"
● ○ ○
④ After 3 rounds
SOS · breathe
Well done
You did it. Take your time ♡
● ● ●
⑤ Computer · same thing, bigger circle, stickers on the sides (like the dice)
Visit the shoplogo
Support hub · Contact
SOS · breathe
Let's breathe together
Follow the circle. No counting needed.
● ● ○
- One circle, one word. It grows (in), glows (hold), shrinks (out). No numbers on screen.
- 3 dots show which round you're on.
- The circle softly changes pastel each step: blue (in) → lavender (hold) → sage (out).
- Phones: nothing stacked. Just the circle, one button, and a small toggle row.
- If someone's phone is set to "reduce motion", the circle fades colors instead of growing.
- Works offline after the first visit. Every word lives in
settings.js.