# Gradient Shimmer

> A zero-dependency React text shimmer that sweeps a multi-stop gradient highlight across your text. Web-Animations-API driven — no CSS import, no Tailwind, no runtime deps. The gradient is background-clipped to the glyphs and swept with the WAAPI at a constant px/s regardless of font size, so every shimmer on the page runs at the same frequency. Ships 8 rich multi-stop presets (sunrise, bubble, peach, tonic, mint, spring, twilight, bay) plus fully custom stops, three easing curves (smooth, gentle, snappy), and tunable duration, spread, angle and pause. Automatically pauses while off-screen, while the tab is hidden, or while the page scrolls, and degrades to a static gradient under prefers-reduced-motion. Great for signalling a running / loading task inline in text.

- Author: [Mona](https://21st.dev/@mona_biasia)
- License: mit
- Tags: Animation, Text, Gradient, Shimmer, Loading
- Live preview: https://21st.dev/@mona_biasia/components/gradient-shimmer

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/mona_biasia/gradient-shimmer?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/animation.md