# shimmer

Utilities for adding a shimmer effect to text elements.

## When to use

* Show that text is loading or generating, such as "Generating response…".
* Draw attention to a status line while an agent works.

## How it works

`shimmer` is a utility class from `shadcn/tailwind.css`. It clips an animated background to the text (`background-clip: text`). `shimmer-once` runs the animation once and `shimmer-reverse` reverses its direction; `--shimmer-duration` sets the speed (2s by default).

## Example

```tsx
'use client'

export default function ShimmerDemo() {
  return (
    <p className="shimmer text-sm text-muted-foreground">
      Generating response&hellip;
    </p>
  )
}
```

## Installation

```bash
npm install shadcn
```

## Reference

Official page: https://ui.shadcn.com/docs/utils/shimmer