Components / Shimmer

Shimmer

A text shimmer for live status: "Thinking…", running tools, streaming markers. Auto-applied by ZitsAttachmentTitle while uploading or processing. Pure CSS, painted with background-clip: text off currentColor, so it adapts to any text colour. Disabled automatically under reduced motion.

Examples

Thinking… Loaded Streaming reply…

razor

<span class="shimmer">Thinking&hellip;</span>
<span class="shimmer shimmer-once">Loaded</span>
<span class="shimmer shimmer-reverse">Streaming reply&hellip;</span>

Installation

Ships as plain CSS in zits-ui.css, available automatically once you reference Zits.Ui. No separate install; it is already pulled in by navius add chat.

API reference

Duration, spread, and colour ride on fixed CSS custom properties in this build (--shimmer-duration: 2s), not parametrised utility classes.

Prop	Type	Default
shimmer	class	sweeping highlight loop; respects prefers-reduced-motion
shimmer-once	class	a single pass, useful as a completion reveal
shimmer-reverse	class	sweeps in the reverse direction
shimmer-none	class	disables the effect, renders as plain text