the nerdiest thing I've seen all day
In between the hours spent coding the hardcore JavaScript behind New Twitter, I like to put together fun little JavaScript demos. They get shown, if they're good enough, on the screens around the office.
Today's is a tribute to the almighty Matrix. Although they sadly never made any sequels, and the effects have been copied so often they now seem cliché, it was an outstanding film of its time.
So here it is: a Twitter List timeline, shown as a Matrixy matrix:
http://kenneth.kufluk.com/matrix/
Initially, I wanted to have the tweets scrolling down the page using CSS animations. Sadly, my machine got completely overwhelmed with only a few streams. I would've turned to my friend the canvas, but our display screens are something like 1900x800 and slow, which makes full-screen canvas too jerky. So I just rendered a large set of absolutely positioned divs, one for each character.
Reading the text is a bit tricky. I supposed that in an ideal world, the tweets would stream upwards, but I didn't want to deviate so far from the original. And so the tweets stream down the screen, and are mostly unreadable. I have tried reversing the text, but that simply makes them harder to read. English is not a language designed for reading bottom to top.
The image in the background is taken from a png. I draw it to a hidden canvas, but draw it scaled to the same dimensions (pixels) as the grid (characters). Then, I work out the visibility (brightness+opacity) of each (now-pixellated) pixel. This is added to the "bg_opacity" property of the grid cell, which is combined with the opacity of the current character to give the effect.
It's quite easy to swap out the list and the image, and to tune the character size, just by editing variables at the top of the script.
The code is, naturally, on Github:
https://github.com/kennethkufluk/Twitter-Matrix
Have a play, have a tinker. Let me know how I could improve the effect, and improve the performance.
Update:
I jiggled the code around a bit. Instead of absolutely positioning each character, and setting their content and opacity each time, I now insert a row of characters at a time. The row has spans for setting each char's opacity. The bird image is now a translucent canvas overlay.
Performance is significantly better, and you can use Inspector without crashing the browser, but the layering doesn't seem to work reliably in Chrome. I'm not sure why. So sometimes you just don't see the bird.
And when you see super-wide Unicode characters, it can upset the grid a bit. I haven't worried about that.
Update 2
I took away "-webkit-transform-style: preserve-3d;" from the body tag, and the z-indexed layers now work properly.
Thanks for reading! I guess you could now share this post on TikTok or something. That'd be cool.
Or if you had any comments, you could find me on Threads.
Published