JSFiddle - React, Tailwind, and code Playground

by Kingdaro

HTML

<div id='container'>
  <div id='lol'>shut the fuck up ok</div>
</div>

CSS

#container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#lol{
  font: bold 32pt Verdana, sans-serif;
}

JavaScript

'use strict'

let div = document.getElementById('lol')
let time = 0
let fps = 30

;(function please() {
  time += 1/fps
  
  let hue = time * 100 % 360
  let angle = Math.sin(time) * 30
  
  div.style.color = `hsl(${ hue }, 90%, 50%)`
  div.style.transform = `rotate(${ angle }deg)`
  
  setTimeout(please, 1000/fps)
})()