# Shimmer text

> Text with a light sweep, for thinking and loading states.

Component · Free · https://lodeui.com/components/shimmer-text

## When to use

- Pending states like Thinking… or Generating…

## When not to use

- Static headings.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/shimmer-text.json
```

## Usage

```tsx title="example.tsx"
import { ShimmerText } from "@/components/ui/shimmer-text";

export function Thinking() {
  return <ShimmerText>Thinking…</ShimmerText>;
}
```

## API reference

### ShimmerText

Text with a light sweeping across it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `ReactNode` | – | The text. |

## Accessibility

- Plain text; stops animating under reduced motion.

## Motion

- A gradient sweeps every 2.2s.

## Responsive behavior

- Inline.

## Performance

- CSS animation.

## Notes for AI

- Pair with aria-live on the container when status changes.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Text scramble](https://lodeui.com/components/text-scramble) — Characters cycle through glyphs and settle into the final text.