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

Documentation

Animations