JSFiddle - React, Tailwind, and code Playground

by Paige Thompson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div id="box1" class="animated-box">
The quick brown fox jumped over the lazy dog
</div>

<div id="box2" class="animated-box">

</div>

CSS

body { 
  background-color: black;
}

.animated-box {

  height: 128px;
  background-color: black;
  display: flex;
  margin: 8px;
  overflow-wrap: anywhere;
  color: white;
}

.char {
  position: fixed;
  color: white;

}

JavaScript

inter = Array();

String.prototype.replaceAt = function(index, replacement) {
    return this.substring(0, index) + replacement + this.substring(index + replacement.length);
}

function get_span(ch) {
	return $('<span />').addClass('char').html(ch);
}

function char_slug(ch, m, c) {
	return m + "-" + ch + "-" + c;
}

function spin_span(c_v) {
	var chs = [',', '.', '\'', '"', '`', '!', 'â–“', ';'];
	var coolers = ['white', 'gray', 'darkgreen', 'lime', 'green'];
  var a = chs[Math.floor(Math.random() * chs.length)];
  var b = coolers[Math.floor(Math.random() * coolers.length)];
  $(c_v).css("color", b);
	$(c_v).text(a);
}

function spanify_chars(src, dst) {
	var s = $(src).text();
  $(src).text("");
  
  for(var index = 0; index < s.length; index++) {
    $(dst).text($(dst).text() + " ");
  }
  
  for(var index = 0; index < s.length; index++) {
  	var sp = get_span(s[index]);
    sp.css("margin-left", 16 * index);
    sp.attr("name", char_slug(s[index], 16 * index, sp.css("color")));
  	$(src).append(sp);
  }
}

function cell_filled(box, x, y) {
	cells = $(box).children();
	for(var index = 0; index < cells.length; index++) {
  	if(parseInt($(cells).css("margin-left")) == x && parseInt($(cells).css("margin-top")) == y) {
    	return true;
    }
  }
}

function cancel_inter(c_v) {
	for(var index_2 = 0; index_2 < inter.length; index_2++) {
    if(c_v == inter[index_2].ch) {
      clearInterval(inter[index_2].inter);
    }
  }
}

function reset_span(c_v) {
	var m = parseInt($(c_v).attr('name').split('-')[0]) + "px"
  var c = $(c_v).attr('name').split('-')[1];
  var color = $(c_v).attr('name').split('-')[2];
	$(c_v).css("margin-top", 0);
	$(c_v).css("margin-left", m);
  $(c_v).text(c);
  $(c_v).css("color", color);
}

function reset_char(c_v, dst) {
	var str = $(dst).text();
  var index = parseInt($(c_v).attr('name').split('-')[0]) / 16;
  var c = $(c_v).attr('name').split('-')[1];
  $(dst).text(str.replaceAt(index, c));
}

function transfer_char(src, dst, height_offset)...