Shimmer

A light sweep across text for thinking and loading states.

import { Shimmer } from "../components/shimmer";

export default function ShimmerExample() {
  return (
    <div className="text-muted-foreground flex flex-col gap-3 p-6 text-sm">
      <Shimmer>Thinking...</Shimmer>
      <Shimmer duration={2.4}>Searching the web</Shimmer>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/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:

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

Used in

ChatGPT

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

Claude

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

Gemini

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

Perplexity

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