Shimmer Text

shimmer-text is a global utility class that animates a horizontal highlight sweep across text colour. Use it to convey an in-progress state — AI generation, background processing, or any “working on it” indicator.

The class works on any element with text content, including inside Zinc components. Colour variants mirror the standard Zinc palette: zn-primary, zn-accent, zn-info, zn-success, zn-warning, zn-error.

When prefers-reduced-motion: reduce is set, the animation is suppressed and the text falls back to a solid colour matching the chosen variant.

Examples

Default

Thinking…

<span class="shimmer-text">Thinking…</span>

Colour Variants

Default Primary Accent Info Success Warning Error

<div style="display: flex; flex-direction: column; gap: 8px;">
  <span class="shimmer-text">Default</span>
  <span class="shimmer-text zn-primary">Primary</span>
  <span class="shimmer-text zn-accent">Accent</span>
  <span class="shimmer-text zn-info">Info</span>
  <span class="shimmer-text zn-success">Success</span>
  <span class="shimmer-text zn-warning">Warning</span>
  <span class="shimmer-text zn-error">Error</span>
</div>

Headings and Larger Text

The shimmer scales with whatever font-size is on the element, so it can be applied to headings or inline within prose.

Generating summary…

Please wait while we analyse your data.

<h2 class="shimmer-text zn-primary" style="margin: 0;">Generating summary…</h2>
<p style="margin: 8px 0 0;">
  Please wait while we <span class="shimmer-text zn-info">analyse your data</span>.
</p>

Inside Zinc Components

Because shimmer-text is a plain class, it composes with any Zinc component that renders slotted text.

Processing

<zn-chip class="shimmer-text zn-accent">Processing</zn-chip>

Tuning the Sweep

The effect mirrors the Claude CLI’s character-level shimmer: a narrow, sharper highlight slides across text rather than a soft gradient wash. The class exposes these CSS custom properties — all sized in ch so they scale with the current font size.

Variable	Default	Purpose
`--shimmer-base`	`rgb(var(--zn-text))`	Resting text colour.
`--shimmer-highlight`	`rgb(var(--zn-text-heading))`	Colour of the spotlight.
`--shimmer-core`	`0.5ch`	Half-width of the solid-colour core of the spotlight.
`--shimmer-spread`	`1.5ch`	Half-width of the full highlight including its fade-out edges.
`--shimmer-duration`	`2s`	Time for one full sweep cycle.

Default sweep Faster sweep Slower, gentler sweep Wider spotlight

<div style="display: flex; flex-direction: column; gap: 6px;">
  <span class="shimmer-text">Default sweep</span>
  <span class="shimmer-text" style="--shimmer-duration: 1s;">Faster sweep</span>
  <span class="shimmer-text" style="--shimmer-duration: 4s;">Slower, gentler sweep</span>
  <span class="shimmer-text" style="--shimmer-core: 1ch; --shimmer-spread: 3ch;">Wider spotlight</span>
</div>

The Claude CLI scales its sweep with message length (50ms per character plus 10 characters of offscreen pause on each side). To match that feel in CSS, set --shimmer-duration to roughly (messageCharacters + 20) × 50ms.

Reduced Motion

The animation is wrapped in @media (prefers-reduced-motion: no-preference). Users who have requested reduced motion see the static colour variant instead — no configuration required.