html.enhance-xp .headline-gradient {
  --gradient-highlight-spread: 20%;
  --gradient-shimmer-angle: 100deg;
  --gradient-position: 140%;
  --gradient-position-start: 140;
  --gradient-position-end: -40;
  background-image: linear-gradient(var(--gradient-shimmer-angle),transparent calc(50% - var(--gradient-highlight-spread)),var(--headline-gradient-shimmer),transparent calc(50% + var(--gradient-highlight-spread))),linear-gradient(var(--headline-gradient-direction),var(--headline-gradient-start),var(--headline-gradient-end));
  background-repeat: no-repeat;
  background-size: 200% 100%,100% 100%;
  background-position: var(--gradient-position) 50%,50% 50%;
}

.section-camera-audio .headline-gradient {
  width: 100%;
}

.headline-gradient {
  display: inline-block;
  --headline-gradient-direction: 90deg;
  background-image: linear-gradient(var(--headline-gradient-direction),var(--headline-gradient-start),var(--headline-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

background-image: linear-gradientで背景をグラデーションにして、
-webkit-background-clip: text;でマスクをかけて、
-webkit-text-fill-color: transparent;で文字の色を透明にして、
cssのみでテキストをグラデにしている。

<p class="headline-gradient" data-anim-keyframe="{"start":"t - 80vh", "end":"t - 10vh", "--gradient-position":["css(--gradient-position-start)", "css(--gradient-position-end)","%"], "disabledWhen":["no-enhance-xp"]}" style="--gradient-position:-7.84645%;">くっきり<wbr><span class="nowrap-inline">見える。</span><span class="jp-headline-adjust small-reject"></span><br>はっきり<wbr><span class="nowrap-inline">聞こえる。</span><span class="jp-headline-adjust small-reject"></span></p>

あとは、pのstyle属性をスクロールに合わせてjsで動的に
style=”–gradient-position:-7.84645%;”
みたく、キラリの位置を変えてやれば、
スクロールと共にキラリと光る、
文字のできあがり。って感じ。たぶん