JSFiddle - React, Tailwind, and code Playground

HTML

<p id="comment">This is very interesting (and as has been pointed out in other comments, not exactly a new idea). I think its proper application, though, is in a tool for practicing reading, not for actually reading tests.
One major thing this approach looses is the inherent non-linearity of text. If I miss a fact and want to back up a bit, or want to pause for a moment and think about something, I can (when reading) without even thinking about it. Even if this approach is faster overall, it makes reading more like listening to audio or watching a video; it's a big pain to rewind or pause.
Secondly, this is actually slower than true speed reading or skimming because it forces you to read every word. Truly accomplished readers will often read material at a very superficial level, only dipping in and reading consistently when they encounter a novel concept. Essentially, they can use semantic compression to increase their reading speed by only bothering to read what they find to be relevant. This operates on every level, from the page to the chapter to the paragraph to the sentence. It isn't perfect, of course, but it's always possible to back up if one finds crucial information has been missed.
Finally, even though this tool is truly excellent for breaking the subvocalization habit that hampers most slow readers, once you learn how to read without subvocalizing it becomes a bit redundant. For example, looking at Spritz, I cranked the speed to 500. It felt pretty good, like I was reading fast. Then I went and took a traditional reading speed test and clocked in at 700wpm, with 95% comprehension. So I'm not sure my overall speed is better with Spritz.
    That said, I'll probably keep coming back to this or technologies like this, now that I'm aware of them. They seem a really good way to force oneself into the speed-reading mindset - I have a feeling that doing this for 60 seconds before a normal reading session would improve reading speed substantially.</p>

<div...

CSS

#comment {
    display: none;
}

#reader {
    padding: 20px;
    border: 1px solid black;
    width: 200px;
    font-size: 20pt;
    margin-bottom: 30px;
    position: relative;
    height: 15px;
    line-height: 15px;
}

#reader::before, #reader::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -1px;
    height: 10px;
    background-color: black;
    width: 2px;
    top: 0;
}

#reader::after {
    top: auto;
    bottom: 0;
}

#word {
    position: absolute;
}

.highlight {
    color: #c00;
}

JavaScript

// I LOVE GLOBALS.
var buttonEl = document.querySelector('#start');
var commentEl = document.querySelector('#comment');
var wpmEl = document.querySelector('#wpm');
var readerEl = document.querySelector('#reader');
var currentTimer = null;

function processWord(word){
    var center = Math.floor(word.length / 2);
    var letters = word.split('');
    var result = [];
    return letters.map(function(letter, idx){
        if (idx === center){
            return '<span class="highlight">' + letter + '</span>';
        }
        return letter;
    }).join('');
}

function positionWord(){
    var wordEl = readerEl.firstElementChild;
    var highlight = wordEl.firstElementChild;
    
    var centerOffsetX = (highlight.offsetWidth / 2) + highlight.offsetLeft;
    var centerOffsetY = (highlight.offsetHeight / 2) + highlight.offsetTop;
    
    wordEl.style.left = ((readerEl.clientWidth / 2) - centerOffsetX) + 'px';
    wordEl.style.top = ((readerEl.clientHeight / 2) - centerOffsetY) + 'px';
}

buttonEl.addEventListener('click', function(){
    var words = commentEl.textContent.split(/\s+/).map(processWord);
    var currentWord = 0;
    var delay = 60000 / parseInt(wpmEl.value, 10);
    
    clearTimeout(currentTimer);
    
    var displayNextWord = function(){
        var word = words[currentWord++];
        // WTB> nlp.js...
        var hasPause = /^\(|[,\.\)]$/.test(word);
        
        // XSS?! :(.
        readerEl.firstElementChild.innerHTML = word;
        positionWord();
        
        if (currentWord !== words.length){
            currentTimer = setTimeout(displayNextWord, delay * (hasPause ? 2 : 1));
        }
    };
    
    displayNextWord();
});