TextShimmer
Looping gradient sweep over text. CSS-only — animates the background-position of a 3× linear gradient clipped to the text via background-clip: text. Use it for "loading…" labels, headline accent, skeleton text states.
Ship the boogie.
npx bwo-ui add text-shimmerUsage
import { TextShimmer } from '@bwo-ui/react';
<TextShimmer as="h2" color="var(--bwo-text)" highlight="#ff481f">
Ship the boogie.
</TextShimmer>
// Slower, narrower band
<TextShimmer duration={3.2} bandWidth={20}>Loading…</TextShimmer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'span' | Tag to render. |
color | string | 'currentColor' | Base text colour. |
highlight | string | '#ffffff' | Sweeping highlight colour. |
duration | number | 1.8 | Sweep duration in seconds. |
bandWidth | number | 40 | Width of the highlight band as %. |
delay | number | 0 | Delay before the first sweep starts. |
paused | boolean | false | Pause the animation. |