Effect downgrades: heavy library effect → cheap equivalent

const words = statement.split(" ");
<p className="void-fill text-display-sm">
  {words.map((w, i) => (
    <span key={i} className="void-fill-word" style={{ "--i": i / words.length } as React.CSSProperties}>{w} </span>
  ))}
</p>

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .void-fill { view-timeline-name: --void-fill; }
      .void-fill-word {
        color: var(--fg-subtle);
        animation: void-fill linear both;
        animation-timeline: --void-fill;
        animation-range: cover calc(25% + var(--i) * 30%) cover calc(30% + var(--i) * 30%);
      }
    }
  }
}
@keyframes void-fill { to { color: var(--fg); } }

<section className="void-scene relative h-[200svh]" aria-labelledby="scene-title">
  <div className="sticky top-0 flex min-h-svh items-center">
    <Container className="grid gap-10 lg:grid-cols-12">
      <h2 id="scene-title" className="text-display text-fg lg:col-span-5">…</h2>
      <div className="void-scene-media lg:col-span-7">{/* real visual */}</div>
    </Container>
  </div>
</section>

@layer components {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .void-scene { view-timeline-name: --void-scene; }
      .void-scene-media { animation: void-scene linear both; animation-timeline: --void-scene; animation-range: contain 0% contain 100%; }
    }
  }
  @media (prefers-reduced-motion: reduce) { .void-scene { height: auto; } }
}
@keyframes void-scene { from { scale: 0.92; opacity: 0.4; } to { scale: 1; opacity: 1; } }

<div className="relative overflow-clip rounded-xl bg-bg-subtle">
  <Image src={still} alt="…" className="h-auto w-full [filter:contrast(1.1)_saturate(0.8)]" />
  <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(to_bottom,transparent_0_2px,color-mix(in_oklch,var(--bg)_55%,transparent)_2px_3px)] opacity-50" />
  <div aria-hidden="true" className="pointer-events-none absolute inset-0 shadow-[inset_0_0_120px_var(--bg)]" />
</div>