# Text Shimmer
Source: https://ui.spencerwueste.com/docs/components/text-shimmer
Markdown: https://ui.spencerwueste.com/llm/components/text-shimmer.md

> Animated shimmer for loading and thinking states, with no dependencies.

> Live preview: https://ui.spencerwueste.com/docs/components/text-shimmer (demo source: `src/demos/text-shimmer-demo.tsx`)

## Installation

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

Registry JSON: https://ui.spencerwueste.com/r/text-shimmer.json

## Usage

```tsx
import { TextShimmer } from "@/components/pandacoderz-ui/text-shimmer";
```

```tsx
<TextShimmer className="text-muted-foreground" invertLight>
  Thinking...
</TextShimmer>
```

The beam color derives from `currentColor`, so it adapts to whatever text color you apply. Use `invertLight` or `invertDark` when the default beam has too little contrast on one theme.

## API Reference

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `ElementType` | `span` | Element to render. |
| `duration` | `number` | `1` | Seconds per pass. |
| `repeatDelay` | `number` | `0` | Pause between passes, in seconds. |
| `spread` | `number` | `20` | Beam width in percent points (5–45). |
| `angle` | `number` | `0` | Beam angle in degrees. |
| `color` | `string` | | Explicit beam color. |
| `invert` / `invertLight` / `invertDark` | `boolean` | `false` | Use a dark beam instead of a bright one. |
| `disableShimmer` | `boolean` | `false` | Render plain text. |