This project acts as an emotional companion. By changing the weather backdrop to match how they feel, users trigger corresponding supportive affirmations or poetic haikus.

Morphing Clouds

We can use huge, overlapping CSS elements with border-radius: 50% to simulate puffy clouds that drift horizontally across the screen.

.cloud {
  background: white;
  opacity: 0.8;
  border-radius: 50%;
  position: absolute;
  animation: drift 60s infinite linear;
}

@keyframes drift {
  from { transform: translateX(-200px); }
  to { transform: translateX(110vw); }
}

Raining Text

Instead of raindrops, we drop spans representing poetic verses that fall downwards slowly. Experience the majestic emotional calmness in the Live Demo!