TextShimmer

A calm light sweep across a short status line, such as "Thinking" or "Generating summary", that glides off and settles to solid text when the work ends.

When to use

• Agent and job status lines while work is ongoing, especially when the label changes step by step ("Retrieving brand facts", "Composing the draft").
• When the finish should be smooth: set active={false} and the band glides off instead of cutting.
• For the lighter gradient used inside AI primitives, use Shimmer. For skeleton placeholders of whole blocks, use a skeleton component instead.

Usage

import { TextShimmer } from "@/components/iris/text-shimmer/text-shimmer";

<TextShimmer active={!done} className="status-line">
  {done ? "Draft ready" : step}
</TextShimmer>;

Props

Prop	Type	Default	Description
children	string	—	The status text (required). Keep it to one short line.
active	boolean	true	Sweep while work is ongoing; false settles to solid.
duration	number	1.8	Seconds for one sweep across the text.
as	"span" | "p" | "div" | "h2" | "h3" | "h4"	"span"	Element to render.
className	string	—	Typography and colour; the band uses the current text colour.
id	string	—	Id on the element.

Notes

• Sets aria-busy while active; announce completion from your own live region.
• The sweep pauses when the text is off screen or the page is hidden, and resumes where it stopped. Reduced motion shows static text.
• A changed label rises in place while the line springs to its new width.
• Override the colours with --text-shimmer-highlight and --text-shimmer-base; the base defaults to a mix of currentColor and --ink-3. Falls back to plain text without color-mix support or in forced-colors mode.