---
title: Shimmer
description: A light sweep across text for thinking and loading states.
---

<Component path="shimmer/examples/shimmer" />

<RegistryInstall name="shimmer" />

The Perplexity, ChatGPT, Gemini and Claude blocks use it for their thinking labels. The text keeps its own color and a highlight sweeps across it. Reduced motion turns the sweep off.

| Prop | Default | Description |
| --- | --- | --- |
| `duration` | `1.7` | Seconds per sweep. |
| `spread` | `4` | Width of the highlight in `ch`. |

The highlight uses the `foreground` theme color. Set `--shimmer-highlight` to change it:

```tsx
<Shimmer className="[--shimmer-highlight:white]">Thinking...</Shimmer>
```

## Used in

**[ChatGPT](/blocks/chatgpt)**

A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker.

**[Claude](/blocks/claude)**

A full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker.

**[Gemini](/blocks/gemini)**

A full recreation of the Gemini chat with the animated sparkle, streamed replies and a model picker.

**[Perplexity](/blocks/perplexity)**

A full recreation of a Perplexity thread with search steps, citations with hover cards and the composer.