Shimmer

PreviewCopy Anchor Link

UsageCopy Anchor Link

Shimmer is a Tailwind utility, not a component, so there's nothing to import. It ships with the shadcn package, which VitNode apps already load in src/styles.css:

@import 'shadcn/tailwind.css';

<p className="shimmer text-muted-foreground">Generating response...</p>

The highlight comes from currentColor, so it works on any text color, and it brightens on its own in dark mode. One sweep takes two seconds, then loops.

VariantsCopy Anchor Link

The sweep follows the reading direction, so it runs right to left in RTL.

Play onceCopy Anchor Link

shimmer-once makes a nice "done!" when streaming finishes. Change the element's key to replay it.

<p className="shimmer shimmer-once shimmer-duration-1100" key={replays}>
  Response generated.
</p>

Turning it offCopy Anchor Link

shimmer-none wins regardless of class order, so it works with breakpoints and state variants:

<p className="shimmer md:shimmer-none">Generating response...</p>

With a status lineCopy Anchor Link

Pair it with a Spinner and a Marker:

<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent className="shimmer">Thinking...</MarkerContent>
</Marker>

Browser supportCopy Anchor Link

Shimmer needs relative color syntax and color-mix(), which every current browser has. Older ones may render the text transparent. To be safe, apply it only where it works:

<p className="supports-[color:oklch(from_white_l_c_h)]:shimmer">
  Generating response...
</p>

AccessibilityCopy Anchor Link

• Reduced motion stops the animation automatically, but only for the plain shimmer class. Behind a variant (group-hover:shimmer), add motion-reduce:shimmer-none yourself.
• Shimmer is decoration, not a loading signal. Put real text inside role="status", like "Thinking...".
• Keep it on short status text. A whole sparkling paragraph is more disco than progress.

ReferenceCopy Anchor Link

shadcn/ui - shimmer