Shimmer
A light that sweeps across a label while something runs, the way a conversational chat shows a step in progress.
-
.aparte-shimmer
On this page
<span class="aparte-shimmer">Searching the web…</span>.aparte-shimmer goes on the span that holds the words of a step in progress: “Searching the
web…”, “Thinking”. A light sweeps across the letters, which is what conversational chats show
where an agent’s row shows a spinner and a word. Take the class off when the step ends; the text
stays the same element.
The chat uses it in three places: the reasoning line while it arrives, a quiet tool row while its call runs, and a conversation’s title in the conversation list while it answers.
Customize
Section titled “Customize”| Variable | Default |
|---|---|
--aparte-shimmer-base | var(--aparte-text-muted) |
--aparte-shimmer-shine | var(--aparte-text) |
The sweep runs from the muted ink to the full ink, two text colours whose order holds in both
themes. --aparte-duration-shimmer is the length of one sweep.
Classes
Section titled “Classes”.aparte-shimmer
Accessibility
Section titled “Accessibility”- The words are real text: a screen reader reads them, and the element keeps its colour for everything that reads it. The sweep is drawn through the text fill.
- It holds still under
prefers-reduced-motion, and reads as plain text in forced colours and in a browser withoutbackground-clip: text. - The motion says “in progress” to the eye only. Pair it with words that say so, or with a status region, where the state matters.