Shimmer

text and the default slot are two different techniques, not two ways of writing the same thing. text clips the gradient to the glyphs themselves (crisp, but only works for actual text); the slot instead wraps whatever you put in it and blends a translucent highlight over the top, so it works on a colored fill, a skeleton block, an image, anything.

In text mode, the resting (non-swept) color is deliberately dimmer than this app's normal body text, not just text-muted — a lighter resting color reads as plain white-on-white text next to everything else on the page, and the bright sweep barely registers against it.

Under prefers-reduced-motion: reduce, the sweep is dropped entirely: text falls back to a plain text-muted color instead of freezing mid-gradient, and the slot mode just hides the overlay, leaving whatever's inside it static.

spread's unit depends on which mode you're in: with text it's a multiplier of the string's length (text.length * spread px), since a fixed pixel width would look too narrow on a long line and too wide on a short one; without text there's no string to measure, so it's a flat percentage of the element's own width instead.

active only matters without text — it lets you keep content mounted (e.g. ProgressBar's buffer fill) while toggling just the sweep on and off, instead of v-if-ing the whole thing. With text, the sweep always runs while the component is rendered.

There's no loading prop wiring this to other components — it's a standalone placeholder. Swap it for the real content yourself, e.g. <Shimmer v-if="loading" text="Ada is typing..." /><span v-else>{{ reply }}</span>.