Shimmer Text

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

Installation

npx shadcn@latest add @iconiq/shimmer-text

Props

TextShimmer

Animated text treatment that moves a highlight band across one string of copy while keeping the base text readable in both light and dark themes.

childrenstring

Required

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

asReact.ElementType

Default "p"

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

classNamestring

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

durationnumber

Default 2

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

spreadnumber

Default 2

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

The component memoizes the computed spread width so it only recalculates when the string content or spread value changes.

Base and highlight colors come from internal CSS custom properties, which can still be overridden through className if you want a different shimmer tone.

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.