The Story of the Meditative Website I Built That Went Viral
I built Aurora in March of 2022. It’s a meditative space where you can look outside of a train window, observe the days and seasons pass by, and draw auroras in the sky.
I want to describe my process here, from the initial urge to create something all the way to sharing an end product. I’m going to tailor this to be mostly non-technical, but I’ll briefly mentioned some of the technologies I used and what problems they helped solve.
The Motivation to Build Something
The truth of it is that I just felt pretty overwhelmed with life when I decided to start building Aurora. Historically when that’s happened, I’ve found that active distractions tend to work pretty well to help me relax and reframe. Giving my hands and brain an interesting problem to chip away at provides me a steady stream of satisfaction and joy.
For this project, I thought that it would be nice to create something that anyone could use when they felt similarly overwhelmed. Something that encouraged positivity. Something where, if you were feeling a little frazzled, you could just pull out your laptop or phone and immerse yourself in an experience that is sensory, tactile, and hopefully delightful for a few minutes.
The nice thing about positivity is that it isn’t a zero-sum game. If I could land on an idea that was genuinely fun for me to build and for other people to use, then that would be the best-case scenario.
The Constraints
With all of my creative endeavors, I try to initially lay out a set of constraints before homing in on the actual idea I want to follow. It’s overwhelming to consider the entire universe of possibilities, so it helps to make the universe smaller.
These are the key constraints I wrote down when I started working on Aurora:
- It should be a website, to optimize ease of access.
- It should be something that works offline, since I want people to be able to use it, for example, on a flight.
- It should be something full screen and that the user can interact with in some way.
- It should be something that helps relax the user. To that end, it should never have ads and should focus on being non-disruptive.
- It should have some element of audio and music.
- It should consist of simple parts, but remain fresh and fun to use because of the infinite number of ways those simple parts could interact.
- It should use a set of technologies I’m unfamiliar with, so I can learn something.
The Tools
Before I actually came up with the concrete idea I was going to build, I thought I’d brush up on some of the technical tools I’d need for this project. From talking with some friends that have experience with projects similar to what I wanted to build, it seemed like p5.js was a good framework for me to use. I basically just wanted a development environment that would make it easy to manipulate the browser’s canvas with shapes and color through code.
I started my process by following simple tutorials for p5.js, and the first code I wrote made the Sun go up and down on the page. I added some logic which made the background color fade from a blue daytime sky into night when the Sun went down, and used similar logic to make the Sun get redder as it was setting. I then found and repurposed some more tutorials for static mountains, rain, and snow. I didn’t yet have my actual idea — I was just having fun learning and creating.
The Idea
Then I had an “aha” moment. While playing with those simple structures I created, I remembered that a couple years ago I took the train from New York City to Washington D.C., and I caught this beautiful sunset on the way.
At that moment, I was listening to some instrumental acoustic guitar music (World’s Fair by Julian Lage, if you’re interested!), and it was just a beautiful combination of light, color, and sound.
That’s the feeling I wanted to build.
Visual Execution
Once I had my rough idea, and enough technical knowledge gleaned from those tutorials, the execution followed somewhat naturally.
Scheduler
I knew I wanted there to be a constant loop between the time of day and the seasons throughout the year. The first step was to build out a framework that would keep track of this information based on how much time had passed. Remembering my “remaining fresh” constraint, I liked the idea of starting at a random time of day and year every time the website was opened.
Sun and Moon
I used the same code to loop the Sun as I worked on when initially learning p5.js. I added a Moon which would be opposite the Sun on a circular orbit. It’s always fun to break out those trigonometry functions that I told my math teacher I’d never use! I also added an animation that approximates the phases of the moon.
Rain and Snow
I used a number of p5.js physics tutorials as a basis for building out rain and snow. For the rain, I added small, transparent, and fading circles to represent raindrops hitting the window. The scheduler decides random times to show rain or snow, and snow is only shown during winter.
Mountains
I used Perlin noise to make mountains that looked “smooth” and tied the noise to how many frames had passed since the website was open, which effectively gave it a “moving” animation. To add a bit of depth, I made the different mountains move at different speeds. I realized that the mountains were the best way to visually show what season it was too, so I used the scheduler to decide what color the mountains should be at any given time (gray tones for winter, greens for spring and summer, and oranges for fall).
Auroras
One of my initial constraints concerned having some user interaction. The canvas I was working with was pretty big (the entire browser window), and although I had drawn some mountains at the bottom, there was enough negative space to let the user draw something in the sky. After going back and forth between a few ideas involving clouds and fireworks, I liked the idea of drawing auroras the best.
The actual aurora drawing mechanism on the website is basically just two rectangles, with a number of more transparent rectangles that fluctuate position randomly every frame, giving a shimmery effect. I found that I had to limit this effect since it didn’t run well on older hardware, but I like the final implementation.
Other Visuals
Once I had this general framework of “things in nature that change based on some schedule” in place, I had some fun adding a few more context-specific things like stars, comets, lightning, and rainbows.
I’ve found that the hard part of a project like this is knowing when you’re done!
Audio Execution
Based on some exploration and suggestions, I used tone.js as the audio framework.
Backing Track
I recorded a musical backing track using Logic Pro X, and set it up to run on a loop on the website using tone.js. I wanted it to be simple, predictable, and consonant with the other sounds that were going to be playing. Fortunately, I only know a few chords on the keyboard!
Samples
I primarily used Mixkit to grab samples for all of the train and nature sounds you hear on the website. I processed them in Logic Pro X, typically just tweaking the EQ and adding a bit of reverb and compression. At any given time, there are up to six audio sources playing simultaenously, so mixing was an important step in making things cohesive. I highly recommend Mixkit if you ever need some free-to-use samples!
Auroras
For the aurora sounds, I used the tone.js synthesizer. This basically means that when the user clicks down, we automatically generate the sound that gets played right in the browser. There are a ton of different things you can tweak in the synthesizer, including the actual note that gets played, the waveform, and effects like reverb and delay. I settled on an approach where the effects were determined by the color of the aurora, and the note itself would be determined by the location.
I broke the canvas up into a 5x3 grid and assigned each cell a note, where the octave changes with Y position and the note changes with X position. For the musically inclined — my backing track only uses the I and IV in the key of C, and the melody notes the canvas offers are all in the C major pentatonic scale. Essentially, with the chords playing underneath and the notes you have available, you can’t play a bad note!
The Rollout and Reception
I shared the website in late March, initially just to friends and later on some social media platforms. It went viral with this post on the InternetIsBeautiful community on Reddit, garnering over 100K views in its first couple weeks.
I’m always a little anxious posting personal projects to strangers. The following quote from Mitch Hedberg comes to mind.
“Y’know, you can’t please all the people all the time… and last night, all those people were at my show.”
But the reception was really positive. Folks had constructive and actionable feedback. For example, I got a suggestion for, and ended up implementing, a setting for a “train” mode that adds a window frame and a slight shake to more accurately emulate a train ride. There were also a lot of really nice comments I got from people about how Aurora has helped them relax, fall asleep, and work through difficulties around focus.
Takeaways
A lot of modern software gives me a feeling of “this isn’t really that fun to use, and it couldn’t have been that fun to make.” I think a lot of that is attributable to the increasingly complex nature of business models, where it’s no longer always as simple as someone writing something of great quality and selling it to someone that is willing to pay for it. I feel lucky to have had the opportunity to, as someone described to me, channel that “early internet energy” and just build something without having to worry about that other stuff. It has been a genuinely fulfilling project.
Thanks for reading!
