# Text Shimmer (/docs/text-shimmer)

A restrained animated text treatment for transient loading states.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/text-shimmer.json
```

## Usage

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

<TextShimmer duration={2.5}>Syncing changes…</TextShimmer>
```

## API

**Main export:** `TextShimmer`

A looping highlight across a label, for work in progress. `as` renders a different element, and
`duration` sets the cycle length.

The label appears once in the DOM and truncates with an ellipsis at its container's width. Under
reduced motion, and in browsers without text-mask support, the text is static. The overlay CSS
ships in the shared theme; `animate-text-shimmer` is its activation class, not a Tailwind
animation token.