Text Shimmer

MAX

A shimmer text effect for elements

Demo

Animate your ideas with CSS

Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$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:

PropertyTypeDefaultDescription
childrenReactNode-The text content to animate
asElementType"p"The HTML element to render
classNamestring""Additional CSS classes
durationnumber2Duration of the shimmer animation (seconds)
spreadnumber2Spread factor for the shimmer effect
shimmerColorstring"#ffffff"Color of the shimmer effect
baseColorstring"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