Shimmer Sweep

The name is a little generous: there is no light travelling across the glyphs, and no gradient. The "shimmer" is a slide plus a blur dissolve at headline scale, which is enough to make the line feel like it is coming into focus rather than being switched on.

That choice is deliberate. A real masked sweep would require the text to be a background-clipped plane: it breaks inline wrapping, forced colours, and selection painting. The dissolve reads the same at display sizes and leaves a plain text node behind.

Usage

<template>
  <div class="flex w-full items-center justify-center py-12">
    <MShimmerSweep
      class="text-center text-4xl font-semibold tracking-tight text-highlighted"
      text="Glides into focus"
    />
  </div>
</template>

Customize

Props

Accessibility

The animated text is aria-hidden and the readable copy sits in an sr-only span, so the line is announced once and never mid-dissolve.

Reduced motion commits the resolved state with a zero-duration transition. The hidden state is blur(8px) at zero opacity, so merely skipping the animation would leave the headline unreadable.

Performance

• The sweep animates filter, opacity and transform. Blur is the only expensive property, and only for the duration of the sweep.
• Only one element is involved, so the cost does not scale with the length of the copy.
• The scroll observer is a single once observer; nothing is left running after the line lands.