JSFiddle - React, Tailwind, and code Playground

HTML

<form> 
    <label for=linktext># of boxes </label> <input type=text id=num_boxes value=""> 
    <input type=submit id=go value=go>
</form>
<div id="boxes"></div>

CSS

body { 
    background: #1e1b1a;
    color: #fff;
}

.letterbox {
    float: left;
    width: 15px;
    height: 23px;
    margin-right: 3px;
}

.letter-back, .letter-front {
    background: #000;
    position: absolute;
    width: 15px;
    font-family: "Lucida Console", "Courier New", Sans-serif;
    font-size: 22px;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

.letter-front {
    z-index: 2;
    height: 24px;
}

.letter-back {
    height: 24px;
    background: #000; 
}

JavaScript

function changeChar(box, fromCharCode, toCharCode, rate) {
    
    if (fromCharCode == toCharCode) { return };
 
    var downward = fromCharCode > toCharCode;
    var nextChar = (downward ? fromCharCode-=1 : fromCharCode+=1);
 
    $('#box' + box + ' div.letter-front').html(String.fromCharCode(nextChar));
    $('#box' + box + ' div.letter-front').animate({height: '+=12'}, 1, function() {    
        $('#box' + box + ' div.letter-front').animate({height: '-=1'}, rate, function() {
            $('#box' + box + ' div.letter-front').animate({height: '+=13'}, 1, function () {
                $('#box' + box + ' div.letter-back').html(String.fromCharCode(nextChar));
                $('#box' + box + ' div.letter-front').height(0); 
                changeChar(box, nextChar, toCharCode, rate); 
            }); 
        });
    });
 
}


$(document).ready(function () {

    $('#go').click( function (d) {
        $('#boxes').children().stop(true);
        $('#boxes').empty();        
        d.preventDefault();    
        var num_boxes = $('#num_boxes').val();

        // create N boxes and start flipping each from ! to Z
        for (var ii=0; ii < num_boxes; ii++) {
            $("#boxes").append('<div id=box' + ii + ' class=letterbox><div class=letter-front></div><div class=letter-back></div></div>');
            changeChar(ii,32,90,Math.random()*50);
        }
        
    });

});