Vibeset

Shimmer text

The glint is not an element: it is the text background. The letters are painted transparent, a gradient sits behind them and background-clip: text cuts it to their shape, so moving it means moving a background position, which the browser does without a single frame of JavaScript. Three things people lose when copying from memory: the gradient repeats, because with no-repeat the text disappears the moment the band moves away; the band leaves the text completely before coming back, worked out from its width and angle; and under forced colours it falls back to the system colour, because without a background transparent text is invisible text.

And the React Bits original: Shiny Text

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Shiny Text, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a single headline or a call to action you want to stand out. It is cheap: no dependencies and 12.7 KB.

Watch out for

A looping shine on every headline wears out and loses its meaning: one per screen. And check that the base colour, with no shine on it, already passes contrast.

Accessibility

It respects the system reduced-motion setting.