<main>
  <div>
    <p>
      <span>Lorem</span>
      <span>ipsum</span>
      <span>dolor</span>
      <span>sit</span>
      <span>amet,</span>
      <span>consectetur</span>
      <span>adipiscing</span>
      <span>elit.</span>
      <span>Aenean</span>
      <span>tempus</span>
      <span>eros</span>
      <span>sit</span>
      <span>amet</span>
      <span>erat</span>
      <span>rutrum</span>
    </p>
  </div>
</main>

<style>
  main {
    --containerHeight: 3000px;
    --pxPerWord: calc((var(--containerHeight) - 100vh) / 16);
    font-size: 3rem;
    height: 100vh;
    scroll-timeline-name: --section;
    overflow-y: scroll;
  }

  div {
    height: var(--containerHeight);
  }

  p {
    position: sticky;
    top: 5rem;
    padding: 5rem;
  }

  span {
    opacity: 0;
    --start: calc(var(--i) * var(--pxPerWord));
    --end: calc((var(--i) + 1) * var(--pxPerWord));
    animation: fx;
    animation-timeline: --section;
    animation-fill-mode: forwards;
    animation-range: var(--start) var(--end);
  }

  span:nth-child(1) {
    --i: 1;
  }
  span:nth-child(2) {
    --i: 2;
  }
  span:nth-child(3) {
    --i: 3;
  }
  span:nth-child(4) {
    --i: 4;
  }
  span:nth-child(5) {
    --i: 5;
  }
  span:nth-child(6) {
    --i: 6;
  }
  span:nth-child(7) {
    --i: 7;
  }
  span:nth-child(8) {
    --i: 8;
  }
  span:nth-child(9) {
    --i: 9;
  }
  span:nth-child(10) {
    --i: 10;
  }
  span:nth-child(11) {
    --i: 11;
  }
  span:nth-child(12) {
    --i: 12;
  }
  span:nth-child(13) {
    --i: 13;
  }
  span:nth-child(14) {
    --i: 14;
  }
  span:nth-child(15) {
    --i: 15;
  }

  @keyframes fx {
    0% {
      filter: blur(20px);
      opacity: 0;
    }

    100% {
      filter: blur(0px);
      opacity: 1;
    }
  }
</style>