Text Shimmer

Sweeping shimmer animation over text using CSS background-clip. No JS — pure CSS keyframes.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Text ShimmerSweeping shimmer animation over text using CSS background-clip. No JS — pure CSS keyframes.

"use client";

type TextShimmerProps = {
  text: string;
  duration?: number;
  shimmerColor?: string;
};

export function TextShimmer({ text, duration = 2, shimmerColor = "#ffffff" }: TextShimmerProps) {
  return (
    <span
      className="mp-text-shimmer"
      style={
        {
          "--shimmer-duration": duration + "s",
          "--shimmer-color": shimmerColor,
        } as React.CSSProperties
      }
    >
      {text}
    </span>
  );
}

Props

Prop	Type	Default	Description
textrequired	string	—	Text to apply shimmer to
duration	number	2	Shimmer sweep duration in seconds
shimmerColor	string	"#ffffff"	Shimmer highlight color