Shimmer

<p class="text-muted-foreground shimmer text-sm">Generating response…</p>

shimmer ships with Spartan's Tailwind preset ( hlm-tailwind-preset.css ). Projects set up with the Spartan CLI already have it — no extra install step.

Add shimmer to a text element. The effect is built on currentColor , so it adapts to muted text, brand colors, and dark mode automatically. It is disabled when prefers-reduced-motion: reduce is set, so you do not need your own motion guard.

A common pattern is a Marker showing a live status while the assistant is working.

<div hlmMarker role="status">
  <span hlmMarkerIcon>
    <hlm-spinner />
  </span>
  <span hlmMarkerContent class="shimmer">Thinking...</span>
</div>
<div hlmMarker variant="separator" role="status">
  <span hlmMarkerContent class="shimmer">Reading 4 files</span>
</div>

Use shimmer-color-* to set the highlight color explicitly. It accepts theme colors with an optional opacity modifier, or any arbitrary color value.

<p class="shimmer shimmer-color-blue-500/60">Generating response…</p>
<p class="shimmer shimmer-color-[#378ADD]">Generating response…</p>

Use shimmer-duration-* to set the duration of one sweep in milliseconds. The default is 2000 .

<p class="shimmer shimmer-duration-1000">Generating response…</p>

Use shimmer-spread-* to set the width of the highlight band using the spacing scale.

<p class="shimmer shimmer-spread-24">Generating response…</p>

Use shimmer-angle-* to set the tilt of the highlight band in degrees. The default is 20 .

<p class="shimmer shimmer-angle-45">Generating response…</p>

Use shimmer-once to play a single sweep instead of looping. Remount the element to replay.

<p class="shimmer shimmer-duration-1100 shimmer-once text-muted-foreground text-sm">
  Generating response…
</p>

Use shimmer-none to turn the effect off. It works in any class order.

<p class="shimmer md:shimmer-none">Generating response…</p>

The sweep follows the reading direction — left to right in LTR and right to left in RTL — with no extra classes. Use shimmer-reverse to flip the direction manually.

<p class="shimmer" dir="ltr">Generating response…</p>
<p class="shimmer" dir="rtl">جارٍ إنشاء الرد…</p>