Shimmer

A shimmering label: a soft gradient sweeps across inline text to signal that the agent is processing.

When to use

• Inline "the agent is working" labels inside AI components: loading states, selection actions, tool rows.
• Anywhere a lightweight, CSS-only effect is enough and the label does not change.
• For status lines that change step by step or need a graceful finish, use TextShimmer. For streaming the actual answer, use StreamText.

Usage

import { Shimmer } from "@/components/iris/shimmer/shimmer";

<div className="status-row">
  <Shimmer>Searching the notdocs workspace</Shimmer>
</div>;

Props

Prop	Type	Default	Description
children	ReactNode	—	The label to shimmer (required).
className	string	""	Typography; size, weight and font come from here or the surrounding text.

Notes

• Implemented as background-clip: text with a --ink-3 → --ink → --ink-3 gradient and the animate-shimmer-sweep keyframes (1.8s linear, infinite), so it follows both themes automatically.
• Under reduced motion the global rule stops the sweep after one frame. It sets no aria-busy; set aria-busy or a live region on the container if the state matters to screen-reader users.
• Renders an inline-block span; the text stays selectable and readable by assistive tech.