JSFiddle - React, Tailwind, and code Playground

HTML

<section>
	  <p>Ce n'est pas un MARQUEE ni une chicha.</p>
	  <div>
	    <p>TEXTE DĂ©filant sur la page.</p>
	  </div>
	  <article>
	    <h1>HTML Ipsum Presents</h1>

	    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

	    <h2>Header Level 2</h2>

	    <ol>
	      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	      <li>Aliquam tincidunt mauris eu risus.</li>
	    </ol>

	    <blockquote>
	      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
	    </blockquote>

	    <h3>Header Level 3</h3>

	    <ul>
	      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	      <li>Aliquam tincidunt mauris eu risus.</li>
	    </ul>

	    <pre><code>
	#header h1 a {
		display: block;
		width: 300px;
		height: 80px;
	}
				</code></pre>
	  </article>
	</section>

CSS

:root {
  --textS: 120px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section>:is(p, div) {
  position: absolute;
  top: 0;
  left: 0;
}

section>p,
section>div>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 6s infinite linear reverse;
  border: solid 1px rgba(255, 255, 255, 0);
  font-size: var(--textS);
  color: tomato;
  margin: 0;
  line-height: 0.8;
  -webkit-text-stroke: purple 0.02em;
  background: rgba(255, 255, 255, 0);
}

section {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  border: solid;
  position: relative;
  padding: calc(var(--textS) * .97) 0 0 calc(var(--textS) * .97);
}

section>p {
  animation-delay: -3s;
 /* rotate: -90deg;*/
 transform:rotate(-90deg);
  --s: calc(var(--offsetText) * -.49px);
  /*compense la position d'affichage en fonction de la largeur initiale de la boite */
  left: var(--s);
  color: lime;
  z-index: 1;
  background: rgba(255, 255, 255, 0);
  mix-blend-mode: lighten;
}

@keyframes slide...

JavaScript

let p=document.querySelectorAll('body>section>p , body>section>div>p');
for (i = 0; i < p.length; i++) {
  let tidt = p[i].clientWidth;
  p[i].style.setProperty('--offsetText',tidt)
}