DEV Community

Cover image for Pure CSS "Matrix code" effect
Tetragius
Tetragius

Posted on

Pure CSS "Matrix code" effect

Step 1

Create CSS property (better for animation)

@property --timer {
     syntax: '<integer>';
     inherits: false;
     initial-value: 1;
}
Enter fullscreen mode Exit fullscreen mode

Or just

:root { --timer: 1; }
Enter fullscreen mode Exit fullscreen mode

Step 2

Animate property

 @keyframes animate-letter {
     to {
         --timer: 26; /*26 -  the number of letters of the English alphabet*/
     }
 }
Enter fullscreen mode Exit fullscreen mode

Step 3

Add some counter magic

.letter {
     counter-reset: timer var(--timer);
     animation: animate-letter 2s linear infinite running;
}

.letter div:before{
     content: counter(timer, lower-alpha);
}
Enter fullscreen mode Exit fullscreen mode

lower-alpha - predefined counter styles

Now, at each step of the animation, the variable --timer will increase by 1 until it reaches 26. For each digit, the corresponding letter of the alphabet will be selected.

Step 4

Add more counters

.letter {
      counter-reset: timer-1 calc(var(--timer) + 1) timer-2 calc(var(--timer) + 2) timer-3 calc(var(--timer) + 3) timer-4 calc(var(--timer) + 4) timer-5 calc(var(--timer) + 5) timer-6 calc(var(--timer) + 6) timer-7 calc(var(--timer) + 7) timer-8 calc(var(--timer) + 8) timer-9 calc(var(--timer) + 9) timer-10 calc(var(--timer) + 10);
     animation: animate-letter 2s linear infinite running;
}
/*Add new counters, shifting each subsequent one by one*/

.letter div:before{
      content: counter(timer-1, lower-alpha) counter(timer-2, lower-alpha) counter(timer-3, lower-alpha) counter(timer-4, lower-alpha) counter(timer-5, lower-alpha) counter(timer-6, lower-alpha) counter(timer-7, lower-alpha) counter(timer-8, lower-alpha) counter(timer-9, lower-alpha) counter(timer-10, lower-alpha);
        writing-mode: vertical-rl; 
        text-orientation: upright;
}
/*Also directing text from top to bottom*/
Enter fullscreen mode Exit fullscreen mode

Step 5

Add other effects and animations on the bite. And it's ready!

Top comments (1)

Collapse
 
fournier-martin profile image
Jacob

I loved this so much, I am trying to incorporate it within my portfolio. I am trying to limit this code to the main tag within my react model, but it goes over the whole page including both my header and footer component. Some guidance would be appreciated.