Shimmer Text

shimmer x sweep

Text with animated shimmer sweep effect. From Animata.

textshimmersweepanimata

Shimmer TextShimmer Text

Code

text-shimmer.tsx

export function ShimmerText({ children }: { children: React.ReactNode }) {
  return (
    <span className="relative">
      <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent bg-[length:200%_100%] bg-clip-text text-transparent animate-[shimmer_2s_infinite]">{children}</span>
      {children}
    </span>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Shimmer Text component and wire it to my accent.”