# Text Shimmer

> Sweep a theme-aware highlight through a short text label.

Source: https://www.honestui.com/docs/animated/text-shimmer

```tsx
import { TextShimmer } from "@/registry/default/animated/text-shimmer";

export function TextShimmerDemo() {
  return <TextShimmer className="text-3xl font-semibold">Preparing your workspace…</TextShimmer>;
}

```

## Overview [#overview]

Text Shimmer is a lightweight CSS effect for short, temporary states such as generation or loading labels. It inherits theme colors and does not require Motion.

## Installation [#installation]

<CliBlock commands="[&#x22;text-shimmer&#x22;]" />

## Usage [#usage]

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

<TextShimmer>Preparing your workspace…</TextShimmer>
```

## Accessibility [#accessibility]

Use direct status text and pair ongoing work with `aria-busy` on the affected region when appropriate. The shimmer stops for reduced-motion preferences.

## API Reference [#api-reference]


  ### `children`

type: `ReactNode`

Text content.

  ### `as`

type: `ElementType` · default: `&#x22;span&#x22;`

Rendered element.

  ### `duration`

type: `number` · default: `2.5`

Sweep duration in seconds.

  ### `className`

type: `string`

Text and layout classes.