Text shimmer
A status line that shows the model is working, like “Thinking” or “Searching the web”.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/text-shimmer-sweep.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/text-shimmer-sweep.json
Usage & API
Example
import { TextShimmer } from "@/components/ai/text-shimmer-sweep"
<TextShimmer
children="…"
/>Props TextShimmer
| Prop | Type & description | Required |
|---|---|---|
children | string | Required |
duration | numberSeconds for one pass of the light. | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Sweep exports TextShimmer. The shine is a 250% wide linear gradient, base to shine to base, clipped to the glyphs. duration defaults to 1.8 and is the time for one pass. className is appended, so you can set size and weight without restyling the gradient. Reduced motion leaves the span at its initial background position, which still shows the base color through the clip. The demo stacks three lines: Thinking, Searching the web at 2.2 seconds, and Reading 14 sources at 2.6 seconds. There is no role on this span. If the status must be announced, put a visually hidden live region next to it, or use Letter wave, which already has role status.
Example
import { SpectralShimmer } from "@/components/ai/text-shimmer-spectral"
<SpectralShimmer
children="…"
/>Props SpectralShimmer
| Prop | Type & description | Required |
|---|---|---|
children | string | Required |
duration | number | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Spectral exports SpectralShimmer. The comment in the file calls it a slow-moving spectral gradient for a status that deserves attention. duration defaults to 3. The gradient runs 300% wide across the same palette used on the hero border of Prompt input, and backgroundPosition animates toward 300%. The demo centers Generating your page at 32 pixels and semibold, with a separate sentence, Usually takes about a minute, in ordinary zinc text. That second sentence is not part of the component. Pass only the phrase that should move. className overrides size. Reduced motion stops the loop and leaves the first frame of the gradient.
Example
import { LetterWave } from "@/components/ai/text-shimmer-wave"
<LetterWave
children="…"
/>Props LetterWave
| Prop | Type & description | Required |
|---|---|---|
children | string | Required |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Letter wave exports LetterWave. children is split per character, including spaces, which keep whitespace-pre so the gaps do not collapse. Each letter starts at opacity 0.4 unless reduced motion is on, then animates y through 0, -2 and 0 while opacity goes 0.4, 1, 0.4. The delay is index times 0.06 seconds. repeatDelay is the full cycle minus 0.6, so letters do not stack their animations on top of each other. The outer span's accessible name is the whole string. The demo shows Thinking and Writing the migration. There is no duration prop. To slow it down you would change the step, and that value is not exposed.
Choosing a layout
Put Sweep on an ordinary chat turn: Thinking, Searching the web, Reading 14 sources. The demo uses durations 1.8, 2.2 and 2.6 for those three lines, longer when the phrase is longer, so the light does not streak through a short word too fast. Put Spectral on a full-screen wait where the status is the page, the way the demo sets Generating your page at a large size and adds Usually takes about a minute underneath in plain type. Put Letter wave on a phrase you want read as a pulse, such as Writing the migration, when a gradient would look too glossy.
Do not use any of them as the reply. They render children as one string, with no markdown and no caret. Streaming text fades words, parses partial markdown, blurs the leading edge, or fills a table. Message has its own typing row in the bubbles demo, three dots labelled Assistant is typing, which is a bubble rather than a line of text. Text shimmer also does not toggle itself. If the request fails, swap it for Message error instead of leaving Thinking on screen.
Will a screen reader spell the shimmer one letter at a time?
Not on Letter wave. The moving spans are aria-hidden, and the parent exposes one aria-label plus role status. Sweep and Spectral are plain spans with no live region, so a reader sees the text once, as normal content, and will not re-announce it when the gradient loops. If Thinking should be announced when it appears, wrap Sweep in a container with aria-live, or render Letter wave when the status changes.
Can I pass a timer or a token count into the shimmer?
Only as part of the children string. There is no progress prop and no tick. The demo's Reading 14 sources is a literal. When the count changes, pass a new string. duration on Sweep and Spectral is the length of one visual pass, in seconds, not an estimate of how long the model will take. Spectral's Usually takes about a minute line is outside the component, in the demo.