Matrix raining code effect using HTML, CSS and Javascript

I love Matrix, so I decided to recreate the iconic raining code effect using my frontend skills. I picked the easiest implementation so I think it is really well suited for beginners. I hope you will enjoy this project as much as I did.
Have fun!

Where you can find me?
🔗 Links:

[gabefernandes]

This is so much better than how I was trying to do it. I figured out the random character selection, and I could draw either a single vertical cascade or a full screen of random characters, but I was really over-engineering things when I tried to animate multiple cascades across the screen. Your solution is so elegant, awesome bro!

[landhowardjohnston]

Wow this is incredible! Just stumbled across this video and your YouTube channel for the first time and love it! I'm currently teaching myself JavaScript and it's just amazing everything you can accomplish with it. Well done!

[jugibur]

Really great, thanks! I ask ChatGTP several times but it's code was really bad, so +1 for you as human dev!

[michaelhereit]

Super! Good job, that's a really better exercise than some autumn leaves we coded in school....

[treeh]

Saw this on reddit, very cool. Gonna have to implement this on a site now, thanks!

[samarthmotka]

it is one of the amazing design i have seen

[MrGhosTRideRrR]

How do I make the background transparent? I can't put this into anything that has a non black bg :(

[jacktheripper]

Very simple explanation thank you! I have a question; if we want to stop the rain at certain words; how can we do it?

[troopekyt]

Amazing work! Very well explained and helped me a lot!

[mspencer]

This is amazinga sir!
Is there a way to use this as a border on a website through css?
Kind regards
Michael

[hassanhaji]

How did you run the code I cant figure out how to do so

[dharaypm]

hey, i just created a PR to remove full raindrops seen at start of render to your repo...

[onuryuce]

What if I write that in python? Does it work?

[MDjamalov]

how to set <canvas> as background in html? z-index is not helping

[hijokolo]

nice video bro, i have a question, how can i set this code into a background image for use in other projects? keep going with this content my friend

[suminunnie]

Hi, I'm a super beginner to coding. Thank you for the awesome video. I want to use this rain effect as a looping sequence rather then endless randoming.. would you perhaps know how to do this? Like about 2 seconds would be random, and then coming back to the start to loop again. Thank you.

[anthonymonterosso]

this didn't work for me, just gave me a blank black screen and i did literally all the same exact steps you did

[konstantinstefanov]

This is epic dude! Pretty inspiring for an new wanna-be developer like me :)

[ankur_]

Keep creating web deb projects for beginners and intermediate!😀

[optymystyc]

Nice. I was working on a similar tutorial for remotion!