Jump to content


Cascading Green Matrix-style Text Demo

Recommended Posts

Hey GS,


Does anybody know where to find a similar sort of demo online? I do a search and matrix for CSS keeps coming up. I can't get a good search with the term 'matrix'. I guess it's too outdated.

Link to comment
Share on other sites

57 minutes ago, Shaun Gorneau said:

Found this using the search term "matrix code effect javascript"




Thanks. That's gorgeous, but I think I totally just posted a misleading topic. I need something that shuffles through letters then stops at a given word. I actually don't need all the green streaming effects.


Not sure what the search would be for that either, though. 😕


Link to comment
Share on other sites

So I took a quick and dirty stab at this as a fun personal challenge on a Monday evening. What better way to get the creative juices flowing for the week 👍🏼


See the Pen yLOrqrQ by sgorneau (@sgorneau) on CodePen


Also .. the effect is better in a bigger view



Better with a Matrixy font


See the Pen oNxOJjL?editors=0010 by sgorneau (@sgorneau) on CodePen


I also realize this is not the effect OP was getting at ... Zach's recommendation of scramble text is perfect for what OP is looking for (which is reminiscent of the phone number digit matching scene in the Matrix, although the matched digits aren't part of any scramble).

  • Like 5
Link to comment
Share on other sites

Turns out that Shaun is The One :D:D:D


  • Haha 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.