JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

canvas{
  background:#fff;
  position:absolute;
}

JavaScript

var threshold = 1000;
var tweenTime = 800;
var fps = 60;
var tweens = [], dots = [];
var TIME = 1000/fps;
var fontsize = 150;
var Size = fontsize*fontsize;
var SEC = 0, MIN = 1, HOUR = 2, CRN = 3;

var canvas = document.getElementById('canvas');
var text  = document.getElementById('Text');
var times = [];
var ex,ey;
function TimeText(T, x, y){
  this.x = x;
  this.y = y;
  this.T = T;
  var c = document.createElement('canvas');
  this.c = c;
  c.width  = fontsize;
  c.height = fontsize;
  var ctx = c.getContext('2d');
  ctx.font = (fontsize*0.8|0) + "px serif";
  ctx.fillStyle = 'red';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  //document.body.appendChild(c);
  this.ctx = ctx;
}
TimeText.prototype.setText = function setText(text, now) {
  var ctx = this.ctx;
  var X = this.x, Y = this.y;
  ctx.clearRect(0,0,fontsize,fontsize);
  ctx.fillText(text, fontsize/2, fontsize/2);
  var data = ctx.getImageData(0, 0, fontsize, fontsize-2).data;
  var n = dots.length;
  var t = this.T;
  while(n){
    n--;
    if(dots[n][2] === t){
      setPixel(dots[n][0], dots[n][1], 0, 0, 0, 245);
      dots.splice(n, 1);
    }
  }
  for(var y = 0, yl = fontsize; y < yl; y++){
    for(var x = 0, xl = fontsize; x < xl; x++){
      var id = x + y * fontsize, idx = id*4;
      if (data[idx]===255) {
        var _x, _y, r = Math.random();
        _x = t ? width /2 : x*1.66+X-fontsize/3;
        _y = t ? 0        : y*1.66+Y-fontsize/3;
        var d = [
          _x,
          _y,
          t,
          true
        ];
        var _i = dots.push(d);
        moveDot(now, _i, d, [x+X, y+Y], t?Math.random()*2-0.5:Math.random(), Math.random());
      }
    }
  }
};
var width = canvas.width;
var height = canvas.height;
canvas.style.left = (document.documentElement.clientWidth -width )/2+'px';
canvas.style.top  = (document.documentElement.clientHeight-height)/2+'px';
var bitmap = canvas.getContext('2d');
var pixels = bitmap.getImageData(0, 0, width, height);
var data =...