Shimmer
Animate a highlight across text for loading and streaming states.
Thinking…
Ships with the spark styles (utilities.css); no install step. The shimmer
paints a moving gradient through the text via background-clip: text, based
on currentColor, so it works on any text color.
Usage
| Class | Effect |
|---|---|
shimmer | animate the highlight (2s loop) |
shimmer-color-<token> / shimmer-color-[...] | highlight color (/opacity modifier) |
shimmer-duration-<ms> | loop duration in milliseconds |
shimmer-spread-<n> / shimmer-spread-[5rem] | highlight band width |
shimmer-angle-<deg> | tilt (default 20) |
shimmer-once | single sweep (e.g. when streaming ends) |
shimmer-reverse | flip sweep direction |
shimmer-none | disable (e.g. motion-safe alternatives) |
Examples
Color
Optimizing charging schedule…
Duration
Fast (1s)
Slow (3.5s)
Reduced motion
With prefers-reduced-motion: reduce, the animation is dropped and the text
renders in its plain color.