JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>ROCK</p>
</div>

CSS

*{box-sizing:border-box;margin:0;}
div{overflow:hidden;}
p {
  width: max-content;  text-shadow: 
    calc(var(--offsetText) * 1px + 0.5em) 0 ,
    calc(var(--offsetText) * -1px - 0.5em) 0 ,
    calc(var(--offsetText) * 2 *1px  + 1em) 0 ,
    calc(var(--offsetText) * 2 * -1px - 1em) 0 
    ;
  min-width: calc(var(--offsetText) * 1px + 0.5em);
  animation: slide 3s infinite linear;
  margin: 0;
  overflow-y: hidden;
  color:tomato;
	font-size: 20em;
  border:solid;
}
p:nth-child(odd),p:nth-child(even):before {
  animation-direction: reverse;
  color:lime
}
@keyframes slide {
  to {
    text-indent: calc(var(--offsetText) * -1px - 0.5em);
  }
}

JavaScript

let p=document.querySelectorAll('p');
for (i = 0; i < p.length; i++) {
  let tidt = p[i].clientWidth;
  p[i].style.setProperty('--offsetText',tidt)
  p[i].style.width="100%";
}