Text Shimmer

An animated shimmer effect for loading and "in progress" feedback. TextShimmer renders a moving highlight across text and exposes controls for speed, spread, direction, contrast, and pause between passes.

Preview

Thinking through your request...

Usage

Installation

$ pnpm dlx shadcn add https://infinityui.vercel.app/r/text-shimmer.json

Manual Installation

Copy the component code into your project: Copy and paste text-shimmer.tsx into your components directory (e.g. components/infinity-ui/text-shimmer.tsx).

Basic Example

import { TextShimmer } from "@/components/infinity-ui/text-shimmer";

export default function App() {
  return (
    <TextShimmer>
      Running tool calls...
    </TextShimmer>
  );
}

Examples

Variants

Below are examples showing how to configure repeat delay pauses, beam angles/spread, dark/inverted sweeps, custom element types, and accent highlight colors:

DefaultThinking through your request...

With Repeat DelayGenerating response...

AngledRe-ranking search results

InvertedProcessing tool output...

Custom ColorSyncing vector index

Slow SweepAnalyzing conversation context

API Reference

TextShimmer

Animated text wrapper component. Generates a unique keyframe animation per instance to prevent name collisions and applies the shimmer sweep via a background gradient clipped to text content.

Prop	Type	Default	Description
`as`	`React.ElementType`	`"span"`	The HTML element or custom component to render the wrapper as.
`duration`	`number`	`1`	Active sweep movement duration in seconds. Values less than or equal to 0 stop movement.
`repeatDelay`	`number`	`0`	Pause duration in seconds after a sweep finishes and before the next pass begins.
`spread`	`number`	`20`	Highlight beam width around the center in percentage points. Clamped internally to 5..45.
`angle`	`number`	`0`	Gradient beam angle in degrees. Positive values tilt the shimmer direction.
`color`	`string`	`—`	Optional highlight color override. Defaults to currentColor.
`invert`	`boolean`	`false`	Uses a darker highlight formula instead of the default brighter one.
`className`	`string`	`—`	Additional classes merged into the wrapper element.
`style`	`React.CSSProperties`	`—`	Inline style overrides merged after generated shimmer styles.