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. Vendored consumers get it when the theme stylesheet is copied in by navius add theme.

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