Kind Cloud - The story behind the web app
Tags: pwa, react, meditation, sideprojects
Published: 2020-11-22 00:46:49

---
title: Kind Cloud - The story behind the web app
published: true
description: The story behind the sound-free, loving-kindness meditation app
tags: pwa, react, meditation, sideprojects
cover_image: https://drive.google.com/uc?export=view&id=1KY4ozJWKtjFerwloivyMmyryRskBEHbv
---

# Kind Cloud 
A (free) sound-free, loving-kindness meditation app
App link: https://kindcloud.app

# History

Many years back, I was going through a difficult time. I realized - to my shock - that I was experiencing bullying.

# Research 🔎

So I did what I always to do understand a topic better, I obsessively researched it. Nothing seemed to help until I came across the article, [Study Analyzes Personality Traits of Bullies, Victims](https://medicalxpress.com/news/2011-02-personality-traits-bullies-victims.html). It suggests a link between low self-compassion and being a bully OR a victim of bullying.

Personality traits like extroversion or introversion are hard to change, but being nicer to yourself is a skill that can be improved. There is something so lovely and inspiring about finding a way to help people on both sides of the bullying equation.

I looked for meditations that increased self-compassion and found loving-kindness (metta) meditation.

# Loving-kindness Meditation ❤️

How it works: Say nice things to...
- ⭐️ Yourself
- ❤️ A loved one
- ⚪️ A neutral party
- ⚡️ Someone you find difficult
- A larger community

You wish nice things to not only yourself but others and follow rings of compassion. 

I enjoyed loving-kindness meditation, but would forget which phrase or people group I was on. I thought a web app would be a great way to help guide the user through the meditation and keep them on track.

# Kind Cloud's Goals

### Deliberately slow + sound-free

To encourage users to interact with the phrases, Kind Cloud shows each phrase and allows the user complete control of when to move on.

### Peaceful yet welcoming

Animations are deliberately slow to be calming. You may also sync your breathing to the growing / shrinking circle in the app. And anytime you need a little bit of extra love tap on Kind Cloud or any icon in the breathing circle to get floating multi-colored hearts. ❤️💙💛💜

### True dark mode for nighttime meditations

In the overflow menu, you can switch the color theme including a pure black background option.

### Non-addictive

I do not wish to enforce any unkind patterns on the user.

## Tech Used

- [Netlify (hosting)](https://netlify.com)
- [PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
- [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
- [react-router](https://reactrouter.com/)
- [localStorage for saving user preferences](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
- [styled-components](https://styled-components.com/)
- [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
- [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
- [GSAP](https://greensock.com/gsap/)
- [React Transition Group](https://reactcommunity.org/react-transition-group/)
- [RAF (Request Animation Frame)](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
- CSS [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) + [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)

I built this app to make it easier to complete loving-kindness meditation. I hope you enjoy it, and it helps you be kinder to yourself and in turn to others. 

Kindly,
Shalanah Dawson 
[Kind Cloud](https://kindcloud.app)