Shimmer Text
Animated shimmer text that sweeps a moving highlight across one line of copy with adjustable speed, spread, and element rendering.
Agent is thinking ...
Installation
npx shadcn@latest add @iconiq/shimmer-textProps
TextShimmer
5 props
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.
children
stringRequired
The text content to shimmer. The component expects a string because it derives the highlight spread from the child length.
as
React.ElementTypeDefault
"p"Changes which HTML element gets rendered while preserving the same shimmer animation behavior.
className
stringMerged onto the motion element for local typography, spacing, or color-variable overrides.
duration
numberDefault
2Duration in seconds for one full shimmer sweep from right to left.
spread
numberDefault
2Multiplier used to size the highlight band based on the current text length.
Notes
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.