Text Shimmer
An animated text component that sweeps a highlight across its content using a GSAP-driven shimmer effect.
TextShimmer wraps a string in a configurable shimmer sweep animation. It uses GSAP to drive the gradient across the text on repeat, making it well-suited for loading states, hero subtitles, or decorative callouts.
Installation
npx shadcn@latest add @adv/text-shimmerUsage
import { TextShimmer } from '@/components/TextShimmer';
<TextShimmer>Loading…</TextShimmer>Example
Loading your experience…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | The text content to animate. Required. |
as | ElementType | "p" | The HTML element or component to render as. |
className | string | — | Additional CSS classes. |
duration | number | 2 | Duration (in seconds) of one full shimmer pass. |
spread | number | 2 | Per-character multiplier for the shimmer gradient width (px). |