JSFiddle - React, Tailwind, and code Playground

ASSCI - snj3D - v1

by Snj

HTML

<?xml version='1.0' encoding='ISO-8859-1'?>
<div class="container">
<pre id= "InsertHere" class="InsertHere"></pre>
</div>

CSS

.hrml .body {
  padding: 20;
}
.container {
  opacity: 1;
  filter: blur(0px) brightness(1);
  will-change: transform, opacity;
  pointer-events: none;
  position: fixed;
  display: inline-table;
  text-align: center;
  font-family: Courier;
  font-size: 8pt;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}
.asciiDiv {

}

JavaScript

/* ---------	
	usage: ASCIIAnimation(param1, param2, param3)
	param1 - array of animation 'frames' (strings)
	param2 - speed of animation in ms
	param3 - DOM target, inserts animation to .innerHTML (retains spaces)
	ex: var anim1 = new ASCIIAnimation(["1","2","3"], 100, div1);
----------- */
function ASCIIAnimation(animArray, speed, DOMtarget) {
  var currentFrame = 0;
	for(var i = 0; i < animArray.length; i++) {
		animArray[i] = animArray[i].replace(/ /g,"&nbsp;");
		animArray[i] = "<span>" + animArray[i] + "</span>";
	}
	DOMtarget.innerHTML = animArray[0];
	currentFrame++;
	this.animation = setInterval(function() {
		DOMtarget.innerHTML = animArray[currentFrame];
		currentFrame++;
		if(currentFrame >= animArray.length) currentFrame = 0;
	}, speed);
	this.getCurrentFrame = function() {
		return currentFrame;
	}
}

ASCIIAnimation.prototype.stopAnimation = function() {
	clearInterval(this.animation);
}

function makeDiv() { return document.createElement("div"); }
function bodyAppend(element) { document.body.appendChild(element); }

var asciiDiv = makeDiv();
asciiDiv.style.height = "100%";
bodyAppend(asciiDiv);
var snj3D = [
"  \n"+
"  \n",
];

var animSnj3D = new ASCIIAnimation(snj3D, 20, InsertHere);