Shimmer Text

Shimmer highlight across one line—with adjustable speed and spread.

Installation

npx shadcn@latest add @iconiq/shimmer-text

File Structure

Usage

"use client";

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

export function StatusLine() {
  return (
    <TextShimmer className="font-light text-md tracking-tight">
      Agent is thinking ...
    </TextShimmer>
  );
}

Props

Props
Description

TextShimmer

children

The text content to shimmer. The component expects a string because it derives the highlight spread from the child length.

Type string

as

Changes which HTML element gets rendered while preserving the same shimmer animation behavior.

Type React.ElementType·Default "p"

className

Merged onto the motion element for local typography, spacing, or color-variable overrides.

Type string

duration

Duration in seconds for one full shimmer sweep from right to left.

Type number·Default 2

spread

Multiplier used to size the highlight band based on the current text length.

Type number·Default 2

Motion and styling behavior

The shimmer is driven by a looping background-position animation rather than per-character transforms, so the text stays stable while the highlight moves across it.

The moving band is composed from layered gradients: one animated highlight layer plus one static base-color layer.

Dark mode swaps the base and highlight color variables automatically, so the same component remains legible without extra props.

Because the component uses Motion's repeat loop with linear easing, the shimmer reads as continuous rather than pulsing in place.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Agent is thinking ...