Site Showcase: The Matrix Animation

By Eric Selin - Founder,

As our first site showcase, I just had to go with this Matrix animation by our user fabioarnold! The animation looks almost identical to that in the movie, and as an avid fan, I’ve seen a few when looking for Matrix screensavers back in the day.

The thing you are looking at is a representation of “The Matrix”. According to the character “Cypher”, there is too much information in the Matrix to decode into a more visual representation, which is why this is what they look at all day in the movie.

All I see now is blonde, brunette, redhead.

- Cypher, The Matrix

The site itself uses the canvas element and WebGL to produce a very slick animation. I’m no WebGL expert, but looking at the source code, it certainly looks like it should. All I know is that when doing animations, you should use window.requestAnimationFrame, which of course is done here.

Fun feature: you can even “paint” new Matrix characters in the animation with your mouse - check it out!