JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

</div>
<div id="jaune" class="oHidden">
  <div class="elvis">
  </div>
  <div class="oHidden relative vh100 grid vcenter">
    <p class="marquee rotate30 relative">ROCKY</p>
  </div>
</div>
<div id="content" class="oHidden">
  <div id="green" class="vh100 oHidden relative grid vcenter">
    <p class="marquee rotateNeg90 relative">ROCK</p>
  </div>
</div>
<div id="red" class="oHidden">
  <div class="elvis">
  </div>
  <div class="oHidden relative vh100 grid vcenter">
    <p class="marquee">ROCK</p>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
}
.grid {
  display: grid;
}

.grid.vcenter {
  align-items: center;
}

p.marquee {
  line-height: 1;
  width: max-content;
  min-width: var(--slideText);
  animation: slide 6s -6s infinite linear reverse;
  border: solid 1px rgba(255, 255, 255, 0);
  font-size: var(--textS);
  margin: 0;
  line-height: 0.8;  
}



p.marquee.rotateNeg90 {
  animation-delay: -9s;
  rotate: -90deg;
  transform-origin: 0 0;
  top: 100%;
  /*! margin: auto; */
  left: calc(50vw - .425em);
}

.marquee.rotate30 {
  rotate: 30deg;
  transform-origin: 5% 0;
}

.vh100 {
  height: 100vh;
  text-align: center;
}

.oHidden {
  overflow:hidden;
}

.relative {
  position: relative;
}

#jaune {
  background-color: #00bfff;
}

#green {
  background-color: black;
  color: white;
}

#red {
  background-color: red;
}

@keyframes slide {
  from {
    text-indent: var(--slideText);
    margin-inline-end:var(--slideText)
  }
}

JavaScript

function marquee() {
 let vwSize= document.body.clientWidth * .01;  
  const FontSize = 80 * vwSize;
  let p = document.querySelectorAll('.marquee');
  const TextGap = FontSize / 3.75;
  const padBox = FontSize * .97;
  document.documentElement.style.setProperty('--textS', FontSize + 'px');
  document.documentElement.style.setProperty('--padBox', padBox + 'px');

  for (i = 0; i < p.length; i++) {
    let tidt = p[i].clientWidth;
    p[i].style.setProperty('--offsetText', tidt);
    let offslide = tidt + TextGap;
    p[i].style.setProperty('--slideText', '-' + offslide  +'px')
    let textrepeat = p[i].textContent;
    p[i].textContent = textrepeat +' '+ textrepeat +' ' + textrepeat +' ' + textrepeat +' ' + textrepeat; 
  }
}
window.onload = marquee;