TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Matrix web-based green code rain, made with love

389 pointsby DerWOKover 2 years ago

31 comments

DerWOKover 2 years ago
Quote from the Github repo:<p>_&quot;The following criteria guided the development process:<p>Get the right glyphs. Like the actual ones. By now everyone&#x27;s heard how the Matrix glyphs are some treatment of Katakana, but they also include a few characters from Susan Kare&#x27;s Chicago typeface. The Matrix glyphs in this project come from the source: cleaned up vectors from an old SWF for an official Matrix product, archived back in 2007. That&#x27;s how deep this rabbit hole goes, friends. (Please support the Internet Archive!)&quot;_
评论 #32951686 未加载
评论 #32950832 未加载
评论 #32951139 未加载
评论 #32951167 未加载
karteumover 2 years ago
For simple matrix-like effects, I use<p><pre><code> &lt;canvas id=&quot;matrix&quot; style=&quot;display:block; position: fixed; top: 0; left: 0; z-index: -100;&quot;&gt;&lt;&#x2F;canvas&gt; &lt;script type=&quot;text&#x2F;javascript&quot;&gt; var matrix = document.getElementById(&quot;matrix&quot;); var matrix_ctx = matrix.getContext(&quot;2d&quot;); var mletters = &quot;01&quot; var font_size = 10; matrix_ctx.font = font_size + &quot;px arial&quot;; matrix.height = window.innerHeight; matrix.width = window.innerWidth; var columns = Math.floor(matrix.width&#x2F;font_size); var lines = matrix.height&#x2F;font_size; var drops_reinit_threshold = 0.975; &#x2F;&#x2F; lower value means more frequent reinit and therefore more drops var drops_y = Array(columns).fill(1); function draw() { matrix_ctx.fillStyle = &quot;rgba(10, 10, 10, 0.04)&quot; matrix_ctx.fillRect(0, 0, matrix.width, matrix.height); matrix_ctx.fillStyle = &quot;#050&quot;; &#x2F;&#x2F; green text for(var i = 0; i&lt;columns; i++) { var letter = mletters[Math.floor(Math.random()*mletters.length)]; if (drops_y[i]*font_size &lt;= matrix.height) matrix_ctx.fillText(letter, i*font_size, drops_y[i]*font_size); else if(Math.random() &gt; drops_reinit_threshold) drops_y[i] = 0; drops_y[i]++; } } for(var x = 0; x &lt; 2*lines; x++) draw(); setInterval(draw, 35); &lt;&#x2F;script&gt;</code></pre>
评论 #32951529 未加载
评论 #32951471 未加载
tomxorover 2 years ago
Shameless plug<p>Matrix opening scene &quot;Trace Program Running&quot; in 194 bytes of javascript<p><a href="https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;25497" rel="nofollow">https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;25497</a><p>Close to authentic but not 100% due to fonts, non-linear easing of the zoom, and of course the end transition diving into the CGI 0 which is a bit beyond this size bracket of code golfing (although you kind get a modicum of the effect via aliasing).
评论 #32952103 未加载
评论 #32953137 未加载
Raed667over 2 years ago
The quality of the output is great! Kudos!<p>My favorite so far is Morpheus mode, something about moving &quot;into&quot; the glyphs as they fall makes me think of digital city under the rain.<p><a href="https:&#x2F;&#x2F;rezmason.github.io&#x2F;matrix&#x2F;?version=morpheus" rel="nofollow">https:&#x2F;&#x2F;rezmason.github.io&#x2F;matrix&#x2F;?version=morpheus</a>
评论 #32968114 未加载
callumprenticeover 2 years ago
<a href="https:&#x2F;&#x2F;github.com&#x2F;liquidx&#x2F;webviewscreensaver" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;liquidx&#x2F;webviewscreensaver</a><p>I tried it with this &quot;web page as a screensaver&quot; app and it worked perfectly.<p>macOS only though - I couldn&#x27;t find a Windows one.
评论 #32959559 未加载
评论 #32954075 未加载
评论 #32955810 未加载
temp2022accountover 2 years ago
The level of detail put into this project was an unexpected surprise, I&#x27;ve got a new bookmark after tuning it to a nice 3d blue color gradient!
评论 #32950865 未加载
fareeshover 2 years ago
Ukraine flag colors were missing but thankfully there is a custom rgb feature:<p><a href="https:&#x2F;&#x2F;rezmason.github.io&#x2F;matrix&#x2F;?effect=customStripes&amp;colors=0,0.34,0.72,1,0.84,0" rel="nofollow">https:&#x2F;&#x2F;rezmason.github.io&#x2F;matrix&#x2F;?effect=customStripes&amp;colo...</a>
the_jesus_villaover 2 years ago
When I was a teen I made a way shittier version of this using a bunch of vertical &lt;marquee&gt; tags and exotic looking Unicode characters. I literally just copy and pasted them since I didn&#x27;t know any JS. It looked great as long as you didn&#x27;t inspect the code!
评论 #32955483 未加载
ClassyJacketover 2 years ago
Amazing.<p>I, to this day, use a Digital Rain screensaver for Mac, and live wallpaper for Android (&#x27;Source Wall&#x27; on Google Play). Very happy to see this specific fandom still alive. Even after that godawful fourth movie.
ralgozinoover 2 years ago
Am I the only one that hears &quot;Wake Up&quot; from RATM when opens the page even though no music is playing?
评论 #32951527 未加载
29athrowawayover 2 years ago
I hope someone can update the xscreensaver code with this one.
评论 #32951202 未加载
boxedover 2 years ago
Zooming the page changes the pixelation of the rain, which is a fun detail.
jdelmanover 2 years ago
Really, really well done. 3D mode was especially cool. I remember having the official Matrix screensaver (remember www.whatisthematrix.com?) and being a little disappointed that the glyphs and animation didn&#x27;t seem right. This is spot on - fantastic!
评论 #32953026 未加载
digitalnomad91over 2 years ago
Nice! I have something like this on my &quot;self-hosted&quot; website: <a href="https:&#x2F;&#x2F;subtlefuge.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;subtlefuge.com&#x2F;</a><p>And a more traditional green version of it as part of my interactive 404 page: <a href="https:&#x2F;&#x2F;corbin.world&#x2F;404" rel="nofollow">https:&#x2F;&#x2F;corbin.world&#x2F;404</a><p>(you&#x27;ll see it after you type &#x27;HACK THE WORLD&#x27;)<p>I really like the 3d version of this one though, thanks for sharing!
anderspitmanover 2 years ago
I made one[0][1] that uses the GitHub API to pull snippets from recent commits to use for the code. But this is much more beautiful and comprehensive on the visual front.<p>[0]: <a href="https:&#x2F;&#x2F;apitman.com&#x2F;apps&#x2F;redpill&#x2F;" rel="nofollow">https:&#x2F;&#x2F;apitman.com&#x2F;apps&#x2F;redpill&#x2F;</a><p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;anderspitman&#x2F;redpill" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;anderspitman&#x2F;redpill</a>
评论 #32957258 未加载
SSLyover 2 years ago
The author clearly likes the late antiquity esoteric literature and the scripts it used.
评论 #32952943 未加载
nazzacodesover 2 years ago
It has been asked a couple times in the comments with no response so far. Would anyone have any idea on how this could be made into a desktop&#x2F;phone wallpaper or screensaver?<p>That would be such an awesome application. :O
评论 #32954232 未加载
评论 #32953048 未加载
Bloatingover 2 years ago
Reminds me of the old DOS app that would cause text to start dropping off the screen... used as a gag if you could sneak it into autoexec.bat while your roommate wasn&#x27;t looking
notRobotover 2 years ago
Online demo: <a href="https:&#x2F;&#x2F;rezmason.github.io&#x2F;matrix&#x2F;" rel="nofollow">https:&#x2F;&#x2F;rezmason.github.io&#x2F;matrix&#x2F;</a>
agluszakover 2 years ago
Wow, I&#x27;ve caught myself thinking it was about matrix.org (the communication protocol) and I couldn&#x27;t parse the title :D
milchekover 2 years ago
This is really well made, great work! Just a heads up that the “mirror mode - without” link doesn’t work.
laserlightover 2 years ago
I realized that upon seeing the animation, my mind automatically begins playing the soundtrack.
robbiejsover 2 years ago
Brilliant work. Is there a way to have this animated as my android lock or home screen?
aidenn0over 2 years ago
The amount of love and attention to detail in this truly impresses me.
blastroover 2 years ago
Super cool. Would love a screensaver of this.
naribeover 2 years ago
This looks incredibly authentic. Great work!
green-saltover 2 years ago
This is fun, I&#x27;ve been fiddling with it locally.
StuGossover 2 years ago
How to make this a live wallpaper on Android?
评论 #32954058 未加载
tundraxover 2 years ago
No love for Safari browser? :(
评论 #32952972 未加载
评论 #32953546 未加载
spookierookieover 2 years ago
wow
pdntspaover 2 years ago
Can we pleeeeeeeeease drive a stake through the heart of this &quot;made with love&quot; meme?