body {
  margin: 0;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#t {
  position: relative;
  color: #ddd;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 11.5vw;
  white-space: nowrap;
}
#t:before, #t:after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
}
#t:before {
  color: #f0244a;
  opacity: .7;
  animation: a 2.7s steps(1) infinite;
}
#t:after {
  color: #19e3e8;
  opacity: .6;
  animation: b 3.1s steps(1) infinite;
}
#t.x { transform: translate(-3px, 1px) skewX(-8deg); opacity: .85 }
@media (min-width: 1100px) { #t { font-size: 124px } }
@keyframes a {
  0% { clip-path: inset(0 0 85% 0); transform: translate(-2px) }
  9% { clip-path: inset(40% 0 43% 0); transform: translate(3px) }
  21% { clip-path: inset(0 0 100% 0) }
  58% { clip-path: inset(70% 0 12% 0); transform: translate(-5px) }
  63% { clip-path: inset(0 0 100% 0) }
  88% { clip-path: inset(20% 0 66% 0); transform: translate(2px) }
}
@keyframes b {
  0% { clip-path: inset(0 0 100% 0) }
  14% { clip-path: inset(55% 0 30% 0); transform: translate(4px) }
  19% { clip-path: inset(0 0 100% 0) }
  47% { clip-path: inset(10% 0 80% 0); transform: translate(-3px) }
  52% { clip-path: inset(80% 0 4% 0); transform: translate(2px) }
  60% { clip-path: inset(0 0 100% 0) }
}