Shimmer
Animated text effect for AI-generating and loading states.
Examples
Basic
Thinking…Custom duration
Fast — 1sDefault — 2sSlow — 4s
Inline
Rogo is analyzing your portfolio…
Sizes
Extra smallSmallBaseLargeExtra large
Overview
The Shimmer 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.
tsx
import { Shimmer } from "@rogo-technologies/ui/shimmer";
<Shimmer>Thinking…</Shimmer>;Usage
Custom duration
Pass duration (in seconds) to control how fast the gradient sweeps. Default is 2.
tsx
<Shimmer duration={1}>Fast</Shimmer>
<Shimmer duration={4}>Slow</Shimmer>Inline
Shimmer renders an inline <span>, so it composes inside larger text blocks.
tsx
<p>
Rogo is <Shimmer>analyzing your portfolio</Shimmer>…
</p>Sizes
The shimmer scales with the surrounding font — set the text size on the parent or via className.
tsx
<Shimmer className="text-xs">Extra small</Shimmer>
<Shimmer className="text-2xl">Extra large</Shimmer>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-liveoraria-labelon a parent rather than relying on the animation alone.
API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Text content the shimmer plays over. |
duration | number | 2 | Animation duration in seconds. |
className | string | — | Additional CSS classes — useful for sizing or color overrides. |
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 — it implies "in progress"
- Don't stack multiple shimmers on the same screen for the same operation