Shimmer
An animated text-highlight sweep for streaming or loading copy — pure CSS, dark-mode aware, and reduced-motion safe.
Last updated
Generating response…
shimmer is a Tailwind @utility that animates a highlight across text — ideal
for "Generating response…" streaming states. It is pure CSS (no JavaScript), the
highlight is derived from the text colour (so it adapts automatically), it
brightens in dark mode, and it stops under prefers-reduced-motion.
Install
These utilities ship with @vegastack/design-tokens — no shadcn add step. They
are already available wherever you import the tokens or the
@vegastack/design:
@import "@vegastack/design-tokens/utilities.css";The preset imports it for you, so consumers using @vegastack/design
get shimmer (and scroll-fade) automatically.
Usage
<p className="shimmer text-muted-foreground">Generating response…</p>The highlight derives from the current text colour — set the text colour with a semantic token and the sweep follows.
Generating response…
Examples
Pairing with a Marker
Use shimmer on MarkerContent for a streaming status row.
Color
Override the highlight with a theme colour via shimmer-color-* (with an
optional /opacity modifier).
Highlight: primary ink
Highlight: info blue
Highlight: info / 60%
Duration
shimmer-duration-<ms> controls the sweep speed (default 2000).
Default (2s)
Faster (1s)
Spread
shimmer-spread-<n> widens or narrows the highlight band.
Narrow highlight band
Wide highlight band
Angle
shimmer-angle-<deg> tilts the sweep (default 20).
Default tilt (20°)
Steeper tilt (45°)
Reverse
shimmer-reverse flips the sweep direction.
Reversed sweep direction
Play once
shimmer-once runs a single sweep — useful on completion.
Response generated.
RTL
The sweep follows reading direction automatically in dir="rtl".
جارٍ إنشاء الرد…
Classes
| Class | Effect |
|---|---|
shimmer | Animate the highlight sweep (loops by default). |
shimmer-once | Run the sweep a single time. |
shimmer-reverse | Reverse the sweep direction. |
shimmer-none | Disable the effect (e.g. md:shimmer-none). |
shimmer-color-* | Override the highlight colour from the theme (e.g. shimmer-color-primary, shimmer-color-info/60). |
shimmer-duration-* | Sweep duration in ms (default 2000). |
shimmer-spread-* | Highlight band width (spacing scale). |
shimmer-angle-* | Highlight tilt in degrees (default 20). |
Accessibility
- The sweep is purely decorative; it never conveys meaning on its own. Pair it
with a real status (a spinner,
aria-busy, or visible text). - Under
prefers-reduced-motion: reducethe animation is removed and the text renders in its normal colour.