JSFiddle - React, Tailwind, and code Playground

by herde2

HTML

<p>ROCK</p>

CSS

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,
    calc(var(--offsetText) * 3 * 1px + 1.5em) 0,
    calc(var(--offsetText) * 3 * -1px - 1.5em) 0,
    calc(var(--offsetText) * 4 * 1px + 2em) 0,
    calc(var(--offsetText) * 4 * -1px - 2em) 0,
    calc(var(--offsetText) * 5 * 1px + 2.5em) 0,
    calc(var(--offsetText) * 5 * -1px - 2.5em) 0,
    calc(var(--offsetText) * 6 * 1px + 3em) 0,
    calc(var(--offsetText) * 6 * -1px - 3em) 0,
    calc(var(--offsetText) * 7 * 1px + 3.5em) 0,
    calc(var(--offsetText) * 7 * -1px - 3.5em) 0,
    calc(var(--offsetText) * 8 * 1px + 4em) 0,
    calc(var(--offsetText) * 8 * -1px - 4em) 0,
    calc(var(--offsetText) * 9 * 1px + 4.5em) 0,
    calc(var(--offsetText) * 9 * -1px - 4.5em) 0,
    calc(var(--offsetText) * 10 * 1px + 5em) 0,
    calc(var(--offsetText) * 10 * -1px - 5em) 0;
  min-width: calc(var(--offsetText) * 1px + 0.5em);
  animation: slide 3s infinite linear;
  border:solid 1px rgba(255,255,255,0.5);
	    font-size: 30em;
  color: tomato;
}
p:nth-child(odd),
p:nth-child(even):before {
  animation-direction: reverse;
  color: lime;
  rotate:-90deg;
  margin:0 50vw 0 0;
  translate:0 -33.33vh;
  transform-origin:150% 0
}
@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)
}