JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<body>
  <div class=wrap>  
    <div class=floor></div>
  </div>
</body>

CSS

html {
  height: 100%;
  overflow: hidden;
}
body {
  position: relative;
  height: 100%;
  background: -webkit-linear-gradient(#0a1b23 5%,#133241 50%,#133241 50%,#0a1b23 100%);
}
.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 auto;
  -webkit-perspective: 400;
  -webkit-perspective-origin: 50% 50%;
}
.floor {
  width: 200%;
  height: 130%;
  position: absolute;
  bottom: -30%;
  left: -50%;
  background-image: -webkit-linear-gradient(#133241 2px,transparent 2px), -webkit-linear-gradient(left,#133241 2px,transparent 2px);
  background-size: 100px 100px, 100px 100px;
  background-position: -2px -2px, -2px -2px;
  -webkit-transform: rotateX(85deg);
  -webkit-animation: tronSurface 2s infinite linear;
}
@-webkit-keyframes tronSurface {
  from {
    background-position: 0px -100px, 0px 0px;
  }
  to {
    background-position: 0px 0px, 0px 0px;
  }
}

JavaScript

//wrap each letter in text 
			$("div").children().andSelf().contents().each(function(){
				if (this.nodeType == 3) {
					var $this = $(this);
					$this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
				}
			});
//for animation delay foreach letter
$.each($('div span'), function(i, el){

    $(el).css({'opacity':0});
    
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },100 + ( i * 100 ));
    
});