Text Shimmer

A soft light sweep — great for AI loading states.

0.4 KB gzippedZero dependenciesReduced-motion safeBase UI & Radix compatible

Generating your page…

Installation

npx shadcn@latest add https://velora.colorlib.com/r/text-shimmer.json

Source

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

interface TextShimmerProps extends React.HTMLAttributes<HTMLSpanElement> {
  children: React.ReactNode;
}

/**
 * A soft light sweep across the text — great for "AI thinking"
 * states and subtle emphasis.
 */
export function TextShimmer({ className, children, ...props }: TextShimmerProps) {
  return (
    <span
      data-slot="text-shimmer"
      className={cn(
        "animate-shimmer inline-block bg-[linear-gradient(110deg,var(--color-muted-foreground)_35%,var(--color-foreground)_50%,var(--color-muted-foreground)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent",
        className
      )}
      {...props}
    >
      {children}
    </span>
  );
}