JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/tholman/ascii-morph.git"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-primary btn-lg btn-block " onclick="window.location.href='../index.html'"><span class="glyphicon glyphicon-barcode"></span> back</button>


<pre class="ascii-element"></pre>

CSS

body {
  background: #222222;
}

.ascii-element {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  margin-left: -200px;
  font-family: monospace;
  color: white;
}

pre {
  color: #222222;
}

JavaScript

/**
 * Ascii Morph
 * @author: Tim Holman (http://tholman.com)
 */

var AsciiMorph = (function() {

  'use strict';

  var element = null;
  var canvasDimensions = {};

  var renderedData = [];
  var framesToAnimate = [];
  var myTimeout = null;

  /**
   * Utils
   */

  function extend(target, source) {
    for (var key in source) {
      if (!(key in target)) {
        target[key] = source[key];
      }
    }
    return target;
  }

  function repeat(pattern, count) {
    if (count < 1) return '';
    var result = '';
    while (count > 1) {
      if (count & 1) result += pattern;
      count >>= 1, pattern += pattern;
    }
    return result + pattern;
  }

  function replaceAt(string, index, character) {
    return string.substr(0, index) + character + string.substr(index + character.length);
  }

  /**
   * AsciiMorph
   */

  function init(el, canvasSize) {

    // Save the element
    element = el;
    canvasDimensions = canvasSize;
  }

  function squareOutData(data) {
    var i;
    var renderDimensions = {
      x: 0,
      y: data.length
    };

    // Calculate centering numbers
    for (i = 0; i < data.length; i++) {
      if (data[i].length > renderDimensions.x) {
        renderDimensions.x = data[i].length
      }
    }

    // Pad out right side of data to square it out
    for (i = 0; i < data.length; i++) {
      if (data[i].length < renderDimensions.x) {
        data[i] = (data[i] + repeat(' ', renderDimensions.x - data[i].length));
      }
    }

    var paddings = {
      x: Math.floor((canvasDimensions.x - renderDimensions.x) / 2),
      y: Math.floor((canvasDimensions.y - renderDimensions.y) / 2)
    }

    // Left Padding
    for (var i = 0; i < data.length; i++) {
      data[i] = repeat(' ', paddings.x) + data[i] + repeat(' ', paddings.x);
    }

    // Pad out the rest of everything
    for (var i = 0; i < canvasDimensions.y; i++) {
      if (i < paddings.y) {
        data.unshift(repeat(' ', canvasDimensions.x));
      } else if (i >...