Thinking Shimmer
The gap between prompt and answer: a shimmering "Thinking" that folds into "Thought for 3s" as the reply streams in.
thinking-shimmer.tsxthinking-shimmer.css
Checking access…
Overview
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.
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.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/thinking-shimmer.json$
npx shadcn@latest add https://sundaeui.dev/r/thinking-shimmer.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/thinking-shimmer.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/thinking-shimmer.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy thinking-shimmer.tsx and thinking-shimmer.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ThinkingShimmer } from '@/components/sundae/thinking-shimmer'
<ThinkingShimmer phase={phase} shown={received} answer={text} reasoning={summary} seconds={3} />Props
| Prop | Type | Default |
|---|---|---|
phase*Which state to show. | 'thinking' | 'answer' | — |
answer*Full answer text. | string | — |
shownCharacters streamed so far. | number | — |
reasoningCollapsible reasoning summary. | string | — |
toneShimmer colour. | 'white' | 'gold' | 'aqua' | 'white' |
speedSweep duration, seconds. | number | 1.6 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Enter / Space
- Show or hide reasoning
FAQ
- Is Thinking Shimmer free?
- Thinking Shimmer is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Thinking Shimmer?
- Run npx shadcn@latest add https://sundaeui.dev/r/thinking-shimmer.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Thinking Shimmer support keyboard and screen readers?
- "Thinking" is role="status"; the answer is a polite live region with aria-busy while streaming. The reasoning toggle uses aria-expanded.
- Does Thinking Shimmer respect reduced motion?
- Reduced motion shows plain text with no sweep or caret blink.
More like this
All motion →- Pro
Split-Flap Display
Motion · Brutalist Decode Text
Motion · Futuristic- Pro
AI Composer
Components · Understated - Pro
Word Morph
Motion · Expressive - Pro
Magnetic Button
Motion · Playful Agent Steps
Components · Understated