Text Shimmer
MAX
A shimmer text effect for elements
Demo
Animate your ideas with CSS
Exclusive Launch 50% offspots left: 0 / 50


$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Usage Example
// Basic shimmer effect
<TextShimmer duration={2} spread={2}>
Animate your ideas with CSS
</TextShimmer>
// ------------------------------------------------------------
// Custom colors and faster animation
<TextShimmer
duration={1.5}
spread={3}
shimmerColor="#60a5fa"
baseColor="#71717a"
as="h1"
className="text-4xl font-bold"
>
Fast Blue Shimmer
</TextShimmer>
// ------------------------------------------------------------
// Slow elegant shimmer
<TextShimmer
duration={3}
spread={1}
shimmerColor="#fbbf24"
baseColor="#a1a1aa"
className="text-2xl"
>
Elegant Gold Shimmer
</TextShimmer>
Properties
The TextShimmer
component accepts the following props:
Property | Type | Default | Description |
---|---|---|---|
children | ReactNode | - | The text content to animate |
as | ElementType | "p" | The HTML element to render |
className | string | "" | Additional CSS classes |
duration | number | 2 | Duration of the shimmer animation (seconds) |
spread | number | 2 | Spread factor for the shimmer effect |
shimmerColor | string | "#ffffff" | Color of the shimmer effect |
baseColor | string | "var(--base-color, #a1a1aa)" | Base color of the text |
Usage Examples
Default Shimmer
Fast Blue Shimmer
Slow Gold Shimmer
Green Shimmer
Fast Wide Shimmer
Slow Purple Shimmer