JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<h1><span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span></h1>

CSS

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
  font-family: 'Tinos', serif;
  font-size: 40px;
  text-align: center;
  color: transparent;
  overflow: hidden;
}
span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s infinite;
}
span:nth-child(even) {
  animation-name: smoky-2;
}
@keyframes smoky {
  60% {text-shadow: 0 0 40px whitesmoke;}
  to {
    transform: translate3d(300px, -80px, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@keyframes smoky-2 {
  60% {text-shadow: 0 0 40px whitesmoke;}
  to {
    transform: translate3d(350px, -80px, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
span:nth-of-type(1) {animation-delay: .1s;}
span:nth-of-type(2) {animation-delay: .2s;}
span:nth-of-type(3) {animation-delay: .3s;}
span:nth-of-type(4) {animation-delay: .4s;}
span:nth-of-type(5) {animation-delay: .5s;}