kloudi

an aesthetic airplane simulation and relaxation tool to help relieve stress and boost your mental health

Comment 2

Inspiration 💭

It's been almost two years since I've last travelled on an airplane, and I'd never thought I'd miss it so much - occasionally, I'll browse YouTube for those airplane sound simulation videos or look at old photos of the view from the airplane windows. This summer especially, I wasn't able to travel at all and overall had kind of a boring summer.

The ambience and nostalgia that they brought helped me relax when I was really stressed and concentrate on work that I needed to do, so I thought it would be cool to create a airplane simulator website, but as a relaxation tool!

What it does 😎

kloudi is an airplane simulator and stress reliever - the website shows a few airplane windows with the clouds and sky moving slowly by outside. The buttons at the top do different functions, like turning on night mode (both inside and outside the plane) and adding that "white noise" sound that's reminiscent of airplanes. There is a built-in music player fitting with the overall look that can play a playlist of 26 lo-fi songs to add to the mood!

How I built it 🔨

I built kloudi with a combination of HTML, CSS, and JS/jQuery for the website, scrolling animations, and shifting of night mode and airplane sounds. The music player was built with mediaelement.js and plyr, which provided some infrastructure to build on (which was also with HTML/CSS/JS) for play/pause buttons and progress bars. The sky-and-clouds background and airplane interior (windows) were hand-drawn by me using Autodesk Sketchbook, because I'm poor and can't afford Photoshop.

This was also coded using Qoom and the relevant software, which is also where the app is hosted. A few prototypes for the background images and music player UI were done using Figma beforehand, and then refined and fixed later on based on what I could complete in the limited time-frame.

Challenges I ran into 🧨

This project was a lot more artsy than I had done before and I almost gave up on this idea literally because I was having trouble drawing clouds and creating the aesthetic. The CSS needed to get the backgrounds to layer and tile properly was also a challenge that took a lot of trial and error.

I'd never used mediaelement.js or plyr before, despite having seen them before and wanting to use them, and it went much more in-depth to JavaScript and jQuery than I had ever used. I had a lot of trouble getting my files to work with the plyr plugin and spent a lot of time reading up on JavaScript. It was also the first time I used Qoom for projects, which took a bit of getting used to.

Accomplishments that I'm proud of 🎉

I'm proud of learning how to use mediaelement.js and figuring out how to integrate it into my project! I'm also proud of having created a (somewhat) aesthetically pleasing website - this is the first website I've made that didn't use stock graphics or icons pulled from online.

What I learned 📚

I don't think I managed my time very wisely during this hackathon, spending too much time on things that weren't as important. I originally wanted to just embed a Spotify playlist into my website for music but decided I wanted the ~ aesthetic ~, so tried my hand at coding a custom music player. This took up the majority of my time and I still don't know if it was worth it, but I learned a lot about plyr and mediaelement.js which was really fun!

What's next for kloudi 🛫

I really wanted to add some more scenes related to travelling and summer fun, but ran out of time in the end. After the hackathon, I might add some train (shinkansen) and metro scenes for a kind of moving vehicle category, and then also a beach/forest and café scene for static category. I would also like to see if I could make it so users can input their own music (i.e. spotify and youtube links) to get more variety than the current lo-fi playlist I have now.

Built With

Share this project:

Updates