Text Shimmer

Motion

Elegant Tailwind text shimmer and Tailwind CSS highlight animation components for drawing continuous attention to important text.

On this page

Implementation Usage Default Shimmer Custom Duration & Spread Props

Draw the eye without overwhelming the layout using a Tailwind text shimmer. This subtle Tailwind CSS highlight animation passes a soft, glowing sweep over your text, making it perfect for new feature announcements or premium tier badges.

Use a text shimmer within a Badge to highlight a "New" status, or wrap it around the primary label of a pricing Card.

Implementation

"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface TextShimmerProps {
  children: string;
  className?: string;
  duration?: number;
  spread?: number;
}

export const TextShimmer: React.FC<TextShimmerProps> = ({
  children, className = "", duration = 2.5, spread = 2,
}) => (
  <span className={cn("inline-block bg-clip-text text-transparent", className)}
    style={{
      backgroundImage: `linear-gradient(110deg, currentColor 35%,
        rgba(156,163,175,0.5) ${45 + spread}%, currentColor ${55 + spread * 2}%)`,
      backgroundSize: "250% 100%",
      animation: `text-shimmer ${duration}s ease-in-out infinite`,
      color: "inherit",
    }}>
    {children}
  </span>
);

Usage

Default Shimmer

Introducing Motion

A shimmer effect sweeps across the text continuously

<TextShimmer className="text-4xl font-semibold">
  Introducing Motion
</TextShimmer>

Custom Duration & Spread

Fast shimmer, wide spreadSlow shimmer, tight spread

<TextShimmer duration={2} spread={3}>Fast shimmer, wide spread</TextShimmer>
<TextShimmer duration={4} spread={1}>Slow shimmer, tight spread</TextShimmer>

Props

Prop	Type	Default	Description
`children`	`string`	—	Text content
`className`	`string`	`""`	Additional CSS classes
`duration`	`number`	`2.5`	Animation duration (seconds)
`spread`	`number`	`2`	Width of the shimmer highlight

Magnetic Element

Word Rotate