Text Shimmer

MAX

A shimmer text effect for elements

Demo

Animate your ideas with CSS

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates

All animations

No subscriptions

No hidden fees

$19.99

Payment once and get lifetime access

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