JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<h1 class="animated bounce">H</h1>
<h1 class="animated bounce">A</h1>
<h1 class="animated bounce">P</h1>
<h1 class="animated bounce">P</h1>
<h1 class="animated bounce">Y</h1>
<br>
<h1 class="animated bounce">B</h1>
<h1 class="animated bounce">I</h1>
<h1 class="animated bounce">R</h1>
<h1 class="animated bounce">T</h1>
<h1 class="animated bounce">H</h1>
<h1 class="animated bounce">D</h1>
<h1 class="animated bounce">A</h1>
<h1 class="animated bounce">Y</h1>
<br>
<h1 class="animated bounce">K</h1>
<h1 class="animated bounce">E</h1>
<h1 class="animated bounce">V</h1>
<h1 class="animated bounce">I</h1>
<h1 class="animated bounce">N</h1>

SCSS

body {
  font-size: 0;
  text-align: center;
  margin-top: 10vh;
  font-family: "Comic Sans MS";
  background: url('https://www.imarc.com/writable/users/photo/800x1000/kevin_copy1.jpg');
  background-size: 100px;
}

h1 {
  margin:0;
  text-shadow: 10px 10px 13px #000;
}

.animated {
  animation-iteration-count: infinite;
  display: inline-block;
  font-size: 15vh;
}



@for $i from 1 through 20 {
  .animated:nth-child(n+#{$i}) {
    animation-delay: -.1s * $i;
  }
}

JavaScript

let colors = [
	"#FF0000",
	"#E2571E",
	"#FF7F00",
	"#FFFF00",
	"#00FF00",
	"#96bf33",
	"#0000FF",
	"#4B0082",
	"#8B00FF",
];

colors = colors.concat(colors,colors,colors);

let letters = document.querySelectorAll('h1');
let start = 0;
let index = 0;

setInterval(() => {
		index = start;
    
    letters.forEach((v) => {	
    	v.style.color = colors[index];
      index++;
    });
    
    start = (start > letters.length) ? 0 : start + 1;
}, 50)

let size = 100;


setInterval(() => {
	 document.body.style.backgroundSize = size + 'px';
   if (size > 1000) {
  		size = 100;
   }

   size++;
}, 30)