<ul class="matrix">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

@import "compass/css3";

@charset "UTF-8";

$matrix-font-size: 24px;
$matrix-line-height: 24px;
$matrix-color: #50C3F1;
$matrix-width: 32;
$matrix-height: 24;
$matrix-characters: 1 0 0 1 A1 1 0 1 1 0 01;

$frames-count: $matrix-height;

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content }
  @-moz-keyframes #{$name} { @content }
  @-o-keyframes #{$name} { @content }
  @keyframes #{$name} { @content }
}

@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
}

@function rand($min: 1, $max: 100) {
  @return random($max - $min) + $min;
}

@function random-character() {
  $length: length($matrix-characters);
  @return nth($matrix-characters, rand($max: $length));
}

@function new-column($height) {
  $result: ();
  $length: length($matrix-characters);
  @for $i from 1 through $height {
    $result: append($result, random-character());
  }
  @return $result;
}

@function create-columns($number) {
  $columns: ();
  @for $i from 1 through $height {
    $columns: append($columns, new-column($matrix-height));
  }
  @return $columns;
}

body {
  font-family: courier;
  background: black;
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: center;
}

.matrix {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  color: $matrix-color;
  font-size: $matrix-font-size;
  line-height: $matrix-line-height;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

@for $i from 1 through $matrix-width {
  $column-height: rand(4, $matrix-height);
  $column-position: rand(1, $matrix-height);
  $column: new-column($matrix-height);

  .matrix li:nth-child(#{$i}) {
    position: relative;
    display: inline-block;
    white-space: normal;
    vertical-align: top;

    &:before {
      display: block;
      width: 1em;
      content: "#{$column}";
    }

    &:after {
      @include box-sizing(border-box);
      @include background(linear-gradient(
        rgba(black, 1) 0,
        rgba(black, 0) ($matrix-line-height * ($column-height - 1)),
        rgba(black, 1) ($matrix-line-height * ($column-height - 1)),
        rgba(black, 1) ($matrix-line-height * $matrix-height)
      ) 0 ($matrix-line-height * ($column-position - $column-height)) repeat
      );
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      color: white;
      content: "#{nth($column, $column-position)}";
      padding-top: ($column-position - 1) * $matrix-line-height;
      overflow: hidden;
      @include animation(($frames-count * 80ms) column-#{$i} infinite steps(1, start));
    }
  }

  @include keyframes(column-#{$i}) {
    @for $frame from 1 through $frames-count {
      @if $column-position > $matrix-height { $column-position: 1; }
      #{100% * ($frame - 1) / $frames-count} {
        background-position: 0 ($matrix-line-height * ($column-position - $column-height));
        padding-top: ($column-position - 1) * $matrix-line-height;
      }
      $column-position: $column-position + 1;
    }
  }
}