JSFiddle - React, Tailwind, and code Playground
HTML
<div id="line1">bwfgxpbxiztsasxkhvdwuhtylvzcmctwxfjahbnbbolcbysbtxfmmrlvptqpvrxfbvfoqjwgrsarvngvigmixlcfpvqyrhcddjiyv</div>
<div id="line2">qpjbwvrvgbccptmwxofuqvvltpxacrsanwcmjbkolyhjzbithyqhvxfrsttdmzdbilmhvrfcwrvafygipgbvfnblxvxsybfgsxdxi</div>
<div id="moves">62:u 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 62:r 49:u 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 49:r 73:u 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 73:r 71:u 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 71:r 64:u 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 64:r 13:u 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 13:r 32:u 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 32:r 85:u 85:r 85:r 47:u 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 47:r 77:u...
CSS
html {font-family:monospace;font-size:15px;}
#line1 {position:absolute;top:2em;}
#line2 {color:gray;position:absolute;top:5em;}
#moves {display:none;}
span {float:left;position:absolute;width:1em;}
JavaScript
$('div:not(#moves)').each(function(){
c = $(this).text().split("");
$this = $(this);
$this.empty();
i = 0;
$.each(c, function(x, y) {
$this.append("<span>" + y + "</span>");
$('span').last().css({top: "0px", left: i++ + "em"});
});
});
moves = $('#moves').text().split(" ");
function animateNextMove() {
m = moves.shift().split(":");
if (m[1] == 'l') o = {left:"-=1em"};
if (m[1] == 'r') o = {left:"+=1em"};
if (m[1] == 'u') o = {top:"-=1em"};
if (m[1] == 'd') o = {top:"+=1em"};
$('#line1 span:nth-child(' + ++m[0] + ')').animate(o, 40, 'linear', animateNextMove);
}
animateNextMove();