General scheme

General scheme

1️⃣Onboarding

<aside> 📥 Background image (make it seamless horizontally):

[https://drive.google.com/file/d/1cjUonDgcVtAT6Fc_ByXTvv0c3IAz_DzQ/view?usp=sharing](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/143a6581-44be-426c-b389-b51e2df4e9fe/clouds_back.png)

https://drive.google.com/file/d/1cjUonDgcVtAT6Fc_ByXTvv0c3IAz_DzQ/view?usp=sharing

</aside>

  1. Opacity: 20%
  2. Animation type: linear
  3. Direction: horizontal, to the left
  4. Moving speed: 35px/1sec
  5. Additionally: repeat the image horizontally by placing each image on 0px distance between them

2️⃣Button «Start»

Looped animation plays infinitely and it’s cutted by button shape mask

<aside> 📥 Lottie animation

breatheButton.json

</aside>

3️⃣Countdown

<aside> 📥 Lottie animation

countdown_collapse.json

</aside>

Before countdown:

  1. Home screen opacity: 100 → 0
  2. Countdown opacity: 0 → 100
  3. Speed: 300ms

After countdown:

  1. Countdown opacity: 100 → 0
  2. Breathe practice (flower) scale: 0 → 100