A compact thinking state that cycles through phrases with a fade, as a shimmering label or breathing dots, with an optional elapsed timer.
npx shadcn@latest add https://hyperblur.dev/r/thinking-indicator.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/thinking-indicator.tsx.
import { ThinkingIndicator } from "@/components/hyperblur/thinking-indicator"
<ThinkingIndicator phrases={["Thinking", "Searching"]} showTimer />| Prop | Type | Default | Description |
|---|---|---|---|
| phrases | string[] | ["Thinking", "Searching", "Writing"] | Labels to cycle through. |
| interval | number | 1800 | Milliseconds between phrases. |
| showTimer | boolean | false | Show elapsed time next to the label. |
| variant | "dots" | "shimmer" | "shimmer" | Shimmering label, or breathing dots beside a plain label. |
| color | string | "#2f7bff" | Dot color for the dots variant. |