我需要帮助来完成一个JavaScript效果。我期待着完成对这个网站的效果https://www.lucidmotors.com/-在第三节在主页上下来，你可以看到文本滚动/揭示是在其他文本顺利。
我在codepen https://codepen.io/Bes7weB/pen/zYKoexK上发现这个选项与我需要的效果相似，但它有点波涛汹涌，我需要它更平滑。

• • JS**

var textWrapper = document.querySelector(".ml3");
textWrapper.innerHTML = textWrapper.textContent.replace(
  /\S/g,
  "<span class='letter'>$&</span>"
);

var letter = document.querySelectorAll(".letter");
var i = 0;
var currentID = 0;
var slideCount = letter.length;

document.addEventListener("scroll", (e) => {
  let scrolled =
    document.documentElement.scrollTop /
    (document.documentElement.scrollHeight -
      document.documentElement.clientHeight);

  //   var nextID = currentID + 1;

  //   if (nextID < slideCount) {
  //     letter[nextID].style.setProperty(
  //       "--percentage",
  //       `${scrolled / 1}` * nextID
  //     );
  //   }

  //   currentID = nextID;

  letter.forEach(function (l, i) {
    // console.log("====",i / letter.length, i, letter.length)
    if (i / letter.length < scrolled) {
      l.style.setProperty("--percentage", 1);
    } else {
      l.style.setProperty("--percentage", 0);
    }
  });
});

• • CSS**

:root {
  --percentage: 0;
}

body {
  background-color: #000;
  margin: 0;
  height: 600vh;
}

.ml3 {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  font-family: Helvetica;
  margin: 0;
  padding: 0;
  font-size: 48px;
  color: #fff;
  letter-spacing: -0.3px;
}

.ml3 span {
  opacity: var(--percentage);
}

• • HTML**

<div class="ml3">
  <h1>THIS IS MY TEXT THAT IT'S GOING TO SHOW IN SCROLL</h1>
</div>

任何帮助都会很好