JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="banner">I am a young, skilled front-end developer who loves building <span class="word-highlight"><span class="word">interactive</span></span> experiences.</h1>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:700); 
body {
    background-color: rgb(20, 20, 20);
    color: white;
}
h1 {
    font-family: 'Lato', sans-serif;
    text-align: center;
}
.word-highlight {
    color: lightblue;
    display:inline-block;
    width: 156px;
    transition: 0.2s ease-out;
}
.word {
    white-space: nowrap;
}


/* Demo styles */
h1 {
    position: absolute;
    max-width: 900px;
    width: calc(100% - 100px);
    left: 50%;
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
}

JavaScript

var wordBank = [
    "interactive",
    "cutting-edge",
    "responsive",
    "fun",
    "meaningful"
];
var currentNum = 0,
	currentIteration = 0;
var wordHighlight = document.querySelector(".word-highlight"),
    word = document.querySelector(".word"),
    maxNumIterations = 13,
    minNumIterations = 10,
    wordString = [],
    letterBank = "abcdefghijklmnopqrstuvwxyz";

function getIterations(initWord, finWord, iterationNum) {
    var iterations = [],
        correctLetters = [finWord.length].fill(false),
        proportion = iterationNum / 2;
    
    for(var i = 0; i < iterationNum; i++) {
    	var iteration = i > 0 ? iterations[i - 1]: initWord.split("");
    	
        iteration.length -= Math.round((iteration.length - finWord.length) / (iterationNum - i));
        
        for(var j = 0; j < iteration.length; j++) {
            var changeMe = Math.random() <= 0.5 ? true : false;
            
            if(changeMe && proportion < i) {
                    // Unscramble the second half of iterations
                    iteration[j] = finWord[j];
                    correctLetters[i] = true;
            } else if((changeMe && proportion >= i)
                   || (!correctLetters[i] && proportion < i)) {
                    // Scramble the first half of iterations
                    var randLetter = letterBank.charAt( Math.floor( Math.random() * letterBank.length ) );
                    iteration[j] = randLetter;
               
            }
        }
        
        // Assure the last iteration is correct
        if(i === iterationNum - 1) {
            iteration = finWord.split("");
        }
        
        iterations.push(iteration.slice(0));
    }
    
    return iterations;
}


var startTime,
	lastChangedTime,
	singleDuration = 80,
    totalDuration = 5000,
    wordIterations = [];
function animateWordChange(timestamp) {
	if(!startTime)
    	startTime = timestamp;
    
    if(!lastChangedTime)
    	lastChangedTime = timestamp;
    
    var...