JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="merry-christmas">
    Merry Christmas!
</div>

CSS

body {
  background: #D00;
  color: #EEE;
}
.merry-christmas {
  margin-top:100px;
  text-align: center;
  font-size:30px;
  letter-spacing: 2px;
}
.highlight {
  color: #FFF;
  text-shadow: 0px 0px 15px #FFF;
}

JavaScript

var block = $(".merry-christmas");
var text = block.text();
text = text.replace(/(.)/g, "<span>$1</span>");
block.html(text);
var i = 0;
var spans = block.find('span');
setInterval(function() {
	i = (i+1)%spans.length;
  spans.removeClass("highlight");
  spans.eq(i).addClass("highlight");
}, 100);