Shimmer

The shimmer sweeps a soft highlight across text, signaling that something is in progress. Use it for thinking indicators, streaming status lines, and anywhere a spinner would be too loud; in chat it pairs with the marker component.

<span class="shimmer text-sm text-muted-foreground">Thinking...</span>
<span class="shimmer text-sm text-muted-foreground">Generating a response</span>
<span class="shimmer font-medium">Reading 4 files</span>

Usage

Add the shimmer class to any text element.

Class	Description
`shimmer`	Add to the text element
`shimmer-color-<color>`	Add to set the highlight color, like `shimmer-color-blue-500/60`
`shimmer-duration-<number>`	Add to set one sweep's length in milliseconds
`shimmer-spread-<number>`	Add to set the highlight band's width on the spacing scale
`shimmer-angle-<number>`	Add to set the band's tilt in degrees
`shimmer-reverse`	Add to sweep in the opposite direction
`shimmer-once`	Add to play a single sweep instead of looping
`shimmer-none`	Add to turn the effect off

<span class="shimmer">Thinking...</span>

Examples

Marker

Compose shimmer with a marker for chat status lines.

<div class="marker" role="status">
  <span class="marker-icon" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
  </span>
  <span class="marker-content shimmer">Thinking...</span>
</div>
<div class="marker marker-separator" role="status">
  <span class="marker-content shimmer">Reading 4 files</span>
</div>

Color

shimmer-color-<color> sets the highlight color: theme colors with an opacity modifier, or any arbitrary value.

<span class="shimmer shimmer-color-blue-500/60 text-sm">Generating response...</span>
<span class="shimmer shimmer-color-[#378ADD] text-sm">Generating response...</span>

Duration

shimmer-duration-<number> sets one sweep's length in milliseconds; the default is 2000.

<span class="shimmer text-sm">Generating response...</span>
<span class="shimmer shimmer-duration-1000 text-sm">Generating response...</span>

Spread

shimmer-spread-<number> sets the highlight band's width on the spacing scale. Use an arbitrary length or percentage for one-off values.

<span class="shimmer shimmer-spread-24 text-sm">Generating response...</span>
<span class="shimmer shimmer-spread-[5rem] text-sm">Generating response...</span>

Angle

shimmer-angle-<number> tilts the highlight band in degrees; the default is 20.

<span class="shimmer shimmer-angle-45 text-sm">Generating response...</span>

Reverse

shimmer-reverse sweeps the highlight in the opposite direction.

<span class="shimmer shimmer-reverse text-sm">Generating response...</span>

Play once

shimmer-once plays a single sweep instead of looping. Pair it with shimmer-duration-<number> to control how long the sweep takes.

<span class="shimmer shimmer-duration-1100 shimmer-once text-sm">Response generated.</span>

Disable

shimmer-none turns the effect off, so the text renders normally at a breakpoint or state.

<span class="shimmer md:shimmer-none text-sm">Shimmering only below md</span>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="shimmer-rtl-demo" dir="rtl" class="flex w-full flex-col gap-6">
  <span class="shimmer text-sm text-muted-foreground" data-i18n="thinking">جارٍ التفكير...</span>
  <span class="shimmer font-medium" data-i18n="reading">قراءة 4 ملفات</span>
</div>
 
<script>
  const translations = {
  ar: {
    dir: "rtl",
    thinking: "جارٍ التفكير...",
    reading: "قراءة 4 ملفات",
  },
  he: {
    dir: "rtl",
    thinking: "חושב...",
    reading: "קורא 4 קבצים",
  },
  en: {
    dir: "ltr",
    thinking: "Thinking...",
    reading: "Reading 4 files",
  },
};
window.addEventListener("message", (e) => {
  const t = translations[e.data?.lang];
  if (e.data?.type !== "sp-language" || !t) return;
  document.getElementById("shimmer-rtl-demo").dir = t.dir;
  document.querySelectorAll("[data-i18n]").forEach((el) => {
    el.textContent = t[el.dataset.i18n];
  });
});
</script>

CSS variables

Variable	Default	Description
`--shimmer-color`	`currentColor` at 20%	Highlight color of the sweep
`--shimmer-duration`	`2s`	Time for one sweep across the text
`--shimmer-spread`	`calc(3ch + 40px)`	Width of the moving highlight
`--shimmer-angle`	`20deg`	Tilt of the moving highlight