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
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

Contact

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

Agent is thinking ...