Text Shimmer

Installation

1. 1. Install the dependencies.

   npm install clsx tailwind-merge

2. 2. Add the cn helper, if you don't already have it.

   import { clsx, type ClassValue } from "clsx";
   import { twMerge } from "tailwind-merge";
   
   export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
   }

3. 3. Copy the component into your project.

   "use client";
   
   import { createElement, type ElementType } from "react";
   import { cn } from "@/lib/utils";
   
   type TextShimmerProps = {
     children: string;
     className?: string;
     /** Tag to render. Defaults to a span. */
     as?: ElementType;
     /** Seconds for one full sweep. */
     duration?: number;
     /** Width of the highlight band, as a share of the text width. */
     spread?: number;
   };
   
   export function TextShimmer({
     children,
     className,
     as = "span",
     duration = 2.4,
     spread = 0.35,
   }: TextShimmerProps) {
     return createElement(
       as,
       {
         className: cn(
           "inline-block bg-clip-text text-transparent [background-size:200%_100%] motion-safe:animate-shimmer",
           className,
         ),
         style: {
           backgroundImage: `linear-gradient(90deg,
             color-mix(in oklab, currentColor 35%, transparent) 0%,
             color-mix(in oklab, currentColor 35%, transparent) ${50 - spread * 50}%,
             currentColor 50%,
             color-mix(in oklab, currentColor 35%, transparent) ${50 + spread * 50}%,
             color-mix(in oklab, currentColor 35%, transparent) 100%)`,
           animationDuration: `${duration}s`,
         },
       },
       children,
     );
   }

   Expand code

Props