Shimmer

A CSS utility that sweeps a soft highlight across text for live status - 'Thinking…', 'Generating response…', running tools, streaming markers. Honors prefers-reduced-motion. Ships in main.css.

Text status

Add shimmer to any text element. The sweep uses currentColor.

Thinking…

Generating response…

Running tools…

Modifiers

Tune the effect with duration, spread, and angle modifiers, or play once with shimmer-once.

Faster (shimmer-duration-1200)

Wider band (shimmer-spread-20)

Steeper angle (shimmer-angle-45)

Inherits currentColor (text-primary)

API Reference

Utility classes

Prop	Type	Default	Description
`shimmer`	`utility`	—	Animate a highlight sweep across the text.
`shimmer-once`	`utility`	—	Run the sweep a single time instead of looping.
`shimmer-reverse`	`utility`	—	Reverse the sweep direction.
`shimmer-none`	`utility`	—	Disable the effect (useful at a breakpoint).
`shimmer-duration-<ms>`	`modifier`	`2000`	Sweep duration in milliseconds, e.g. shimmer-duration-1200.
`shimmer-spread-<n> / shimmer-angle-<deg>`	`modifier`	—	Width of the highlight band and its angle.

Sheet Sidebar