Shimmer Text

A CSS-only shimmer for thinking and loading states. A highlight band sweeps across muted text on an endless loop - a "thinking" state that feels alive without a spinner. Pure CSS, so it costs nothing to run.

Installation

npx stepwise-ui add shimmer-text

Ships with a small CSS block (the two-layer gradient clip) and theme-aware--shimmer-base/--shimmer-highlighttokens you can retune per brand.

Generating response…Searching the knowledge baseSummarizing 12 sources

import { ShimmerText } from '@/components/stepwise/shimmer-text'

// The AI "thinking / generating" label - a highlight band
// sweeps across muted text on an infinite loop. Pure CSS.
<ShimmerText>Generating response…</ShimmerText>

// Tune the sweep speed (seconds)
<ShimmerText duration={1.4}>Summarizing sources</ShimmerText>

Props

PropTypeDescription

children

string

Text to shimmer (mirrored into data-text for the clip layer).

duration

number

Sweep duration in seconds. Default 2.

band

number

Highlight band width as a % of text width. Default 300.

className

string

Extra classes (set font size / weight here).