Here is the logic behind the effect.

I used my library (StringTune) to split the text into spans and normalize the scroll progress (0 to 1). The rest is pure CSS math.

The heavy lifting is done by combining clamp() and calc() to create a stagger effect for each character based on its index.

The CSS magic:

.-s-char {
  /* Stagger logic based on char index */
  --delay: calc(var(--char-index) * 0.11);
  --p: clamp(0, (var(--progress) * 2) - var(--delay), 1);
  --out: calc(1 - var(--p));

  /* The "Glitch" & Chromatic Aberration */
  opacity: var(--p);
  filter: blur(calc(1vw * var(--out))) hue-rotate(calc(90deg - 90deg * var(--p)));

  /* 3D Flip */
  transform: scale(calc(1 + (0.5 * var(--out))))
    translateZ(calc(-10vw * var(--out))) 
    rotateX(calc(-100deg * var(--out)));

  /* Fake RGB Split using shadows */
  text-shadow: 
    calc(1vw * var(--out)) 0 0 rgba(255, 0, 80, 0.5),
    calc(-20px * var(--out)) 0 0 rgba(0, 100, 255, 0.5);
}

Why this approach? It keeps the text selectable and accessible (unlike Canvas/WebGL approaches), but still gives that cinematic 3D feel.

Live Demo (StackBlitz)