Shimmer Text

Examples

Overview

The ShimmerText component renders text with a gradient that sweeps across it on a loop. Use it to signal an in-progress AI response or a loading label: anything where the work is happening but there's nothing concrete to show yet.

ShimmerText animates words you already have. For a placeholder standing in for content that hasn't arrived, use Skeleton.

import { ShimmerText } from "@rogo-technologies/ui/shimmer-text";

<ShimmerText>Thinking…</ShimmerText>;

Usage

Custom duration

Pass duration (in seconds) to control how fast the gradient sweeps. Default is 2.

<ShimmerText duration={1}>Fast</ShimmerText>
<ShimmerText duration={4}>Slow</ShimmerText>

Inline

ShimmerText renders an inline <span>, so it composes inside larger text blocks.

<p>
  Rogo is <ShimmerText>analyzing your portfolio</ShimmerText>…
</p>

Sizes

The shimmer scales with the surrounding font, so set the text size on the parent or via className.

<ShimmerText className="text-xs">Extra small</ShimmerText>
<ShimmerText className="text-2xl">Extra large</ShimmerText>

Accessibility

• Honors prefers-reduced-motion: the animation stops and text stays legible at the base color.
• The shimmer is purely decorative; the underlying text remains selectable and announced normally by screen readers. If it represents a status (e.g. "loading"), put aria-live or aria-label on a parent rather than relying on the animation alone.

API

Any other <span> attributes (aria-*, title, onClick, etc.) pass through.

Guidelines

Do

• Use for short labels indicating AI generation or loading ("Thinking…", "Generating response…")
• Pair with a concrete state once the work finishes. Don't leave a shimmer running indefinitely

Don't

• Don't shimmer long-form content; it's distracting. Use a skeleton or progress bar instead
• Don't use it as a generic emphasis effect on static text, since it implies "in progress"
• Don't stack multiple shimmers on the same screen for the same operation