{"id":21134990,"url":"https://github.com/rudxain/rgb-digital-rain","last_synced_at":"2025-07-04T09:03:17.151Z","repository":{"id":39418226,"uuid":"460143569","full_name":"Rudxain/RGB-digital-rain","owner":"Rudxain","description":"The Matrix \"falling code/letter rain\" animation but RGB. No more monochromatic green!","archived":false,"fork":false,"pushed_at":"2024-07-17T03:26:32.000Z","size":3424,"stargazers_count":14,"open_issues_count":9,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-18T04:41:51.398Z","etag":null,"topics":["animation","canvas-api","code-rain","digital-rain","falling-code","html","interactive","jsdoc","matrix-rain","pwa","rgb","rygcbm","the-matrix","ts-check"],"latest_commit_sha":null,"homepage":"https://rudxain.github.io/RGB-digital-rain/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rudxain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-16T19:13:18.000Z","updated_at":"2024-07-17T02:58:11.000Z","dependencies_parsed_at":"2023-11-29T07:27:39.821Z","dependency_job_id":"5bae83ee-3a54-47a9-b091-8da7173347d1","html_url":"https://github.com/Rudxain/RGB-digital-rain","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rudxain%2FRGB-digital-rain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rudxain%2FRGB-digital-rain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rudxain%2FRGB-digital-rain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rudxain%2FRGB-digital-rain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rudxain","download_url":"https://codeload.github.com/Rudxain/RGB-digital-rain/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225482020,"owners_count":17481178,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas-api","code-rain","digital-rain","falling-code","html","interactive","jsdoc","matrix-rain","pwa","rgb","rygcbm","the-matrix","ts-check"],"created_at":"2024-11-20T06:40:03.823Z","updated_at":"2024-11-20T06:40:04.731Z","avatar_url":"https://github.com/Rudxain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RGB-DR\n\u003cdiv align=center\u003e\n\u003cimg alt='RYGCBM colored vertical stripes' src=res/icon.svg width=50% height=50%\u003e\n\u003c/div\u003e\n\n## ▶️Demo\n![](res/demo.png)\n\n## ⚙️Features\n- ⚡️Real-time auto 🔆light/🌙dark theme switching, with _transitioning_ ✨️\n- 👆Interactive: droplet spawning on 🖱click/touch\n- 💻Responsive: efficient resizing, and native full-screen resolution\n\n## ℹUsage\nYou can [go to the website](https://Rudxain.github.io/RGB-digital-rain) (minified), or [⬇download](https://github.com/Rudxain/RGB-digital-rain/archive/refs/heads/main.zip) this branch (cutting-edge). If you downloaded the branch, then extract it, then open `src/index.html` on any 🌐browser.\n\n## Naming?\nIf you don't believe me, the \"official\" name is [\"Digital Rain\"](https://en.wikipedia.org/wiki/Matrix_digital_rain), even though the standard-de-facto is \"falling code\".\n\n## Why I did this\nEverything started when a family member (I haven't asked permission to reveal their identity, yet) sent me a link to [this article](https://dev.to/gnsp/making-the-matrix-effect-in-javascript-din), 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.\n\nI downloaded the source, started editing in [VS-Code](https://en.wikipedia.org/wiki/Visual_Studio_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](https://redtech.lk/file/2020/01/Omega_3.png), lol). I searched on the web to see if someone has done the exact same thing and only found [this video](https://youtu.be/CccQcYzsvI4), which is similar but not the *same* idea, because it has a limited color palette (update: found [this app](https://play.google.com/store/apps/details?id=com.screensavers_store.matrixlivewallpaper)). So I decided to post my little project on GH for anyone to see and give me feedback.\n\nLater 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.\n\n## ⭐Credits\n0. Original source code by 👤Ganesh Prasad: https://codepen.io/gnsp/pen/vYBQZJm\n1. My family member for sending me the article.\n2. Inspiration by RGB PC setups like [this one](https://reddit.com/r/pcmasterrace/comments/rhzb6i/i_built_an_rgb_side_panel_with_the_matrix_digital) which looks similar to my animation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudxain%2Frgb-digital-rain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frudxain%2Frgb-digital-rain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudxain%2Frgb-digital-rain/lists"}