Shimmer text
The thinking sheen: a bright band sweeps across muted text on a loop, for AI and loading states.
Text, timeline, looping, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/shimmer-text.tsx https://motion-brew.com/r/shimmer-text.tsxOne self contained file for React and Tailwind CSS: shimmer-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { ShimmerText } from "@/components/shimmer-text";
export default function Page() {
return (
<ShimmerText text="Thinking…" className="text-lg font-medium" />
);
}Props
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
| text | string | "Thinking…" | The text | ||
| as | "p" \ | "span" \ | "h3" | "span" | Element to render |
| duration | number | 1.8 | Seconds per sweep | ||
| spread | number | 14 | Width of the bright band, percent of the text | ||
| className | string | Font and size |
More text
- Annotation text: Hand-drawn pen marks draw themselves around words in view: circles, underlines, boxes and strikes, chained one after another.
- Backspace text: Types a word, holds, backspaces it letter by letter and types the next, with a blinking caret.
- Binary text: Text scrambles into 0s and 1s, then decodes left to right.
- Wave text: A heading whose words warp like liquid under your cursor: noise-driven displacement bends each glyph into flowing bands, then it settles back to crisp type.