Overview
A polymorphic text component that creates a beautiful shimmer/shine animation across text. Perfect for loading states, hero sections, or drawing attention to specific content.
Installation
npx shadcn@latest add @elements/text-shimmerUsage
import { TextShimmer } from "@/components/elements/text-shimmer";
export function LoadingState() {
return (
<TextShimmer className="text-2xl font-medium">
Cooking...
</TextShimmer>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | - | The text content to animate |
as | React.ElementType | "p" | HTML element to render |
className | string | - | Additional CSS classes |
duration | number | 2 | Animation duration in seconds |
spread | number | 2 | Shimmer spread multiplier |
delay | number | 0 | Initial delay before animation starts |
repeatDelay | number | 0 | Delay between animation loops |
Examples
Different Durations
<TextShimmer duration={1}>Fast shimmer</TextShimmer>
<TextShimmer duration={3}>Slow shimmer</TextShimmer>As Different Elements
<TextShimmer as="h1" className="text-4xl font-bold">
Hero Title
</TextShimmer>
<TextShimmer as="span" className="text-sm">
Inline shimmer
</TextShimmer>With Delay
<TextShimmer delay={0.5} repeatDelay={1}>
Delayed animation
</TextShimmer>Features
- Polymorphic component (render as any HTML element)
- Smooth CSS gradient animation
- Light and dark mode support
- Customizable timing and spread
- Memoized for performance
- Zero external animation dependencies beyond Motion