## Thinking Shimmer (S—053)

The gap between prompt and answer: a shimmering "Thinking" that folds into "Thought for 3s" as the reply streams in.

- URL: https://sundaeui.dev/components/thinking-shimmer
- Category: Animations & interactions · Art direction: Understated
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/thinking-shimmer.json`
- Tags: chat, shimmer, streaming, text, loading, ai

A light sweeps across the word Thinking while the model works. When the answer starts it collapses into a disclosure that reveals the reasoning summary.
The answer streams with a blinking caret; pass the characters received so far.

### Usage

```tsx
import { ThinkingShimmer } from '@/components/sundae/thinking-shimmer'

<ThinkingShimmer phase={phase} shown={received} answer={text} reasoning={summary} seconds={3} />
```

### Props

- `phase` (`'thinking' | 'answer'`, required): Which state to show.
- `answer` (`string`, required): Full answer text.
- `shown` (`number`): Characters streamed so far.
- `reasoning` (`string`): Collapsible reasoning summary.
- `tone` (`'white' | 'gold' | 'aqua'`, default `'white'`): Shimmer colour.
- `speed` (`number`, default `1.6`): Sweep duration, seconds.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Chat and assistant replies, especially reasoning models with a visible think phase.

### When not to use

- Waits longer than about 20 seconds: show steps or progress instead.

### Accessibility

- "Thinking" is role="status"; the answer is a polite live region with aria-busy while streaming.
- The reasoning toggle uses aria-expanded.
- Reduced motion shows plain text with no sweep or caret blink.

### Keyboard

- Enter / Space: Show or hide reasoning