Aspekt logoAspekt UI

Shimmer adds animated text shimmer for pending and generated states.

Install once

Shimmer ships in the Aspekt theme block. Run init once, then add the utility classes to text that represents loading, pending, or generated output.

terminalbash
pnpm dlx @aspekt/ui init

Text shimmer

Use shimmer on text that should feel alive while a response, summary, or result is being prepared. It uses the text color as the base and sweeps a highlight through the glyphs.

Generating response...

shimmer

Searching project context...

shimmer shimmer-color-info/60 shimmer-duration-1000

pending-state.tsxtsx
<p className="shimmer text-primary">  Generating response...</p> <p className="shimmer shimmer-color-info/60 shimmer-duration-1000">  Searching project context...</p>

Direction and spread

Tune the highlight with color, duration, angle, and spread modifiers. Use shimmer-reverse for the opposite sweep, or shimmer-once when the shimmer should run one time.

Syncing workspace state...

shimmer shimmer-color-success/70 shimmer-spread-24

Preparing handoff notes...

shimmer shimmer-angle-45 shimmer-reverse

shimmer-options.tsxtsx
<span className="shimmer shimmer-color-success/70 shimmer-spread-24">  Syncing workspace state...</span> <span className="shimmer shimmer-angle-45 shimmer-reverse">  Preparing handoff notes...</span>

Disable when needed

Use shimmer-none for responsive or stateful overrides. Reduced-motion users also receive the non-animated fallback.

Created summary

shimmer shimmer-once

Static text fallback

shimmer shimmer-none

Reference

  • shimmer applies the animated text shimmer.
  • shimmer-color-info/60 and shimmer-color-[#7c3aed] set the highlight color.
  • shimmer-duration-1000 and shimmer-duration-[1.75s] set animation speed.
  • shimmer-spread-24 and shimmer-angle-45 adjust the sweep shape.
  • shimmer-once, shimmer-reverse, and shimmer-none control repetition, direction, and fallback.