rudxain/rgb-digital-rain

The Matrix "falling code/letter rain" animation but RGB. No more monochromatic green!

RGB-DR

▶️Demo

⚙️Features

• ⚡️Real-time auto 🔆light/🌙dark theme switching, with transitioning ✨️
• 👆Interactive: droplet spawning on 🖱click/touch
• 💻Responsive: efficient resizing, and native full-screen resolution

ℹUsage

You can go to the website (minified), or ⬇download this branch (cutting-edge). If you downloaded the branch, then extract it, then open src/index.html on any 🌐browser.

Naming?

If you don't believe me, the "official" name is "Digital Rain", even though the standard-de-facto is "falling code".

Why I did this

Everything started when a family member (I haven't asked permission to reveal their identity, yet) sent me a link to this article, and I was interested in learning how it worked, because the code was so simple yet the result was so cool and complete! I also wanted to learn because I always wanted to make a canvas/image processing in some programming lang, specially if it involved animations.

I downloaded the source, started editing in VS-Code to make some minor improvements, and realized I could update the font color for each individual char being displayed, so I decided to implement the feature using a color table sorted like a 🌈rainbow (like those RGB gaming PC setups, lol). I searched on the web to see if someone has done the exact same thing and only found this video, which is similar but not the same idea, because it has a limited color palette (update: found this app). So I decided to post my little project on GH for anyone to see and give me feedback.

Later I realized GH allowed anyone to create web{page/site}s, so I started setting everything up, while also breaking my head trying to understand exactly what I had to do, lol. Some parts of the docs said I had to install 3 different packages, other parts told me to do other things. But in the end I realized it was much simpler than I thought.

⭐Credits

0. Original source code by 👤Ganesh Prasad: https://codepen.io/gnsp/pen/vYBQZJm
1. My family member for sending me the article.
2. Inspiration by RGB PC setups like this one which looks similar to my animation.