JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="target1" style="width:100%;height:100%;">

</div>

CSS

html{
  height:100%;
}
body{
  background-color:#000;
  height:100%;
}
.aninoob{
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
  perspective:1000px;
  transition:all 1s;
}
.aninoob>.stage{
  width:0px;
  height:0px;
  top:50%;
  left:50%;
  transform-style:preserve-3d;
  position: absolute;
}
.aninoob>.stage>figure{
  width:4px;
  height:4px;
  top:50%;
  left:50%;
  margin-top:-2px;
  margin-left:-2px;
  background-color:#000;
  position: absolute;
  transition:all 1s;
  pointer-events:none;
  backface-visibility:hidden;
}

JavaScript

var pixelText3D = {
	
  target: null,
  
  lines: Array(),
  
  canvas: null,
  context: null,
  width: 300,
  height: 150,
  rotation: 0,
  
  scale_x: 1,
	scale_y: 1,
	scale_z: 1,
  
  detail: 3,
  matrix: Array(),
  properties: {},
  
	origin: { x: 10000, y: 10000, z: -100000 },
  
  getRandomColor: function() {

    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
       color += letters[Math.floor(Math.random() * 16)];
    }
    return color;

  },

  create: function(element,lines,properties){
  
  	this.target = element;
    this.lines = lines;
    
    if(properties){
    
    	this.properties = properties;
    
    }
  
  	var cached_this = this;
    
    this.scale_x = this.target.width()/this.width;
  	this.scale_y = this.target.height()/this.height;
  	this.scale_z = this.scale_y;
  
    var canvas = $('<canvas width="300" height="150" style="display:none;"></canvas>');
    
    cached_this.target.html(canvas);
    
    var bgcolor = cached_this.bgcolor;
    
    if(cached_this.properties.background_color){
    
    	bgcolor = cached_this.properties.background_color;
    
    }
    
    cached_this.target.append('<div class="aninoob" style="background-color:' + bgcolor + ';"><div class="stage"></div></div>');
  
    cached_this.canvas = canvas[0];
    cached_this.context = this.canvas.getContext("2d");
    
    for(var l=0;l<cached_this.lines.length;l++){
    
    	cached_this.context.font = cached_this.lines[l].size + "px " + cached_this.lines[l].font;
			cached_this.context.fillStyle = "red";
			cached_this.context.fillText(cached_this.lines[l].text,cached_this.lines[l].x,cached_this.lines[l].y);
    
    }
  	
    var z = 0;
    var t = 0;
    
    
    for(var x=0;x<cached_this.width;x+=cached_this.detail){

      for(var y=0;y<cached_this.height;y+=cached_this.detail){

        var p = cached_this.context.getImageData(x, y, cached_this.detail, cached_this.detail).data;

        var opacity = p[3]/2.55;

   ...