# Shimmer Text

> A band of light sweeping across muted text.

The 'thinking…' and 'working…' look for in-progress labels, skeleton titles and quiet emphasis.

- Family: Typography
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/shimmer-text/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add shimmer-text
```

It installs to `components/galactrex/shimmer-text.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { ShimmerText } from "@/components/galactrex/shimmer-text";

<ShimmerText>Generating your brief…</ShimmerText>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Text. |
| `as` | `ElementType` | `"span"` | Element. |
| `duration` | `number` | `2` | Seconds per pass. |
| `spread` | `number` | `0.25` | Band width, 0.1 to 0.6. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Thinking.** Next to an agent's working state.

## Accessibility

- Fully readable throughout.

## Motion

- Background position loop.
- Reduced motion: plain muted text.