Text Shimmer

A modern, highly customizable React component that animates a shimmer effect over text. Great for loading states, eye-catching headlines, or subtle UI highlights. Inspired by the best shimmer text patterns in modern UIs.

Live Preview

Installation

You can install the TextShimmer component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/text-shimmer.json

Import

To use the TextShimmer component, import it in your code:

typescript-icon
1import TextShimmer from '@/components/TextShimmer';

Props

The TextShimmer component accepts the following props:

PropTypeDefaultDescriptionRequired
childrenstring-The text to shimmer.Yes
durationnumber3Duration of the shimmer animation (in seconds).No
spreadnumber2Visual width of the shimmer highlight (multiplied by children length).No
baseColorstring#FFFThe base color of the text.No
shimmerColorstring#000The color of the shimmer animation/gradient.No
classNamestring-Additional utility classes for fine-tuning the shimmered text.No
typescript-icon
1interface TextShimmerProps {
2  duration?: number;
3  children: string;
4  className?: string;
5  spread?: number;
6  baseColor?: string;
7  shimmerColor?: string;
8}

Example usage

Basic Usage

typescript-icon
1<TextShimmer>Text Shimmer</TextShimmer>

Custom Duration and Spread

typescript-icon
1<TextShimmer duration={5} spread={4}>Custom Text Shimmer</TextShimmer>

Custom Colors

typescript-icon
1<TextShimmer baseColor="#333" shimmerColor="#fbbf24">Gold Shimmer!</TextShimmer>

With Custom Utility Classes

typescript-icon
1<TextShimmer className="text-xl font-bold uppercase">Bigger & Bold</TextShimmer>

Features

  • Animated shimmer: Moves smoothly across the text for attractive loading or highlight states
  • Highly customizable: Control animation duration, shimmer width, base/shimmer color, and more
  • Type-safe: Fully typed props for developer confidence
  • Utility-class compatible: Style with any Tailwind or custom classes
  • Universal: Works with any string content

Customization

  • Animation speed: Adjust with the duration prop (in seconds)
  • Shimmer width: Control with the spread prop (higher = wider shimmer)
  • Base/shimmer colors: Set via baseColor and shimmerColor
  • Text styles: Use className prop for font size, weight, color, etc.
  • Advanced: Edit the inline style or class lists for specialty effects

Troubleshooting

  • Ensure the children prop is a string (not JSX/element) or the effect will not render as intended.
  • If the shimmer doesn’t animate: Confirm motion.dev is installed and configured in your project.
  • If custom text styles don't appear, check your Tailwind CSS config supports used utilities and class names.
  • You can add more sophisticated color stops and patterns by editing the dynamic backgroundImage or CSS variables.