Pro

shimmer

PreviousNext

Pure CSS utilities for rendering an animated luminescent shimmer sweep across headings and text elements.

The shimmer utility adds a continuous light sweep across text elements. It is commonly used in award-winning landing pages for premium badges, AI generating indicators, and callout headings.

Installation

Add the shimmer keyframes and utility class to your Tailwind CSS setup:

app/globals.css
@theme inline {
  --animate-shimmer: shimmer 2.5s linear infinite;
  @keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }
}
 
@utility shimmer {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, currentColor 40%, transparent) 0%,
    currentColor 50%,
    color-mix(in oklch, currentColor 40%, transparent) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: var(--animate-shimmer);
}

Basic Usage

Add the shimmer class to any text element:

<p className="shimmer text-lg font-medium text-foreground">
  Generating Architecture Breakdown...
</p>

Accent Shimmer Badges

Combine shimmer with badges and rounded pills:

<span className="inline-flex items-center rounded-full border border-border px-3 py-1 text-xs">
  <span className="shimmer font-semibold">NEW SHOWCASE DROP</span>
</span>

Reduced Motion Support

When a user enables reduced motion in their operating system settings, the animation should gracefully pause:

app/globals.css
@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none;
    color: inherit;
    background: none;
  }
}