# Shimmer

> Animated shimmering text for loading and thinking states in AI interfaces.

Source: https://ui.cortexcn.dev/docs/components/shimmer

## Installation

```bash
npx shadcn@latest add @cortexcn/shimmer
```

## Usage

```tsx
import { Shimmer } from "@/components/shimmer";
```

```tsx
<Shimmer>Thinking...</Shimmer>
```

A band of light sweeps across the text on a loop. The [Reasoning](https://ui.cortexcn.dev/docs/components/reasoning) trigger uses it while the model streams.

## Behavior

- The band's width grows with the text, so short and long labels sweep at the same pace. Change it with `spread`.
- With reduced motion enabled, the text renders still, in the muted color.

## Examples

### Heading

### In a message

## Props

| Prop        | Type          | Default | Description                                       |
| ----------- | ------------- | ------- | ------------------------------------------------- |
| `children`  | `string`      | -       | The text to shimmer                               |
| `as`        | `ElementType` | `"p"`   | The element to render                             |
| `duration`  | `number`      | `2`     | Seconds for one sweep                             |
| `spread`    | `number`      | `2`     | Width of the band, in pixels per character        |
| `className` | `string`      | -       | Extra classes for the text                        |

Adapted from [AI Elements](https://elements.ai-sdk.dev) by Vercel (Apache 2.0).