Gradient Shimmer Text

Text 23

About

A zero-dependency text shimmer that sweeps a multi-stop gradient highlight across your text using the Web Animations API, with built-in palettes, easing presets, and off-screen/reduced-motion pausing. Ported to React from the original gradient-shimmer by @mona_biasia.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gradient Shimmer Text to your project and fits it to your theme.

Code

How Gradient Shimmer Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import GradientShimmer from "@/components/ui/gradient-shimmer";

export default function GradientShimmerDemo() {
  return (
    <div className="flex min-h-[440px] w-full flex-col items-center justify-center gap-12 bg-background px-6 py-16 text-foreground">
      <GradientShimmer
        gradient="sunrise"
        className="text-5xl font-semibold tracking-tight"
      >
        gradient-shimmer
      </GradientShimmer>

      <div className="flex flex-col items-center gap-3 text-2xl font-medium">
        <GradientShimmer gradient="mint">
          building your project…
        </GradientShimmer>
        <GradientShimmer gradient="twilight">memory-research</GradientShimmer>
        <GradientShimmer gradient="bay">shipping soon</GradientShimmer>
      </div>

      <div className="w-full max-w-xs rounded-xl border border-border p-2">
        <p className="px-3 pb-2 pt-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
          In the channel sidebar
        </p>
        <ul className="space-y-0.5 text-sm text-muted-foreground">
          <li className="flex items-center gap-2 rounded-md px-3 py-1.5">
            <span className="text-muted-foreground">#</span> general
          </li>
          <li className="flex items-center gap-2 rounded-md bg-muted px-3 py-1.5 text-foreground">
            <span className="text-muted-foreground">#</span>
            <GradientShimmer gradient="sunrise" className="font-medium">
              gradient-shimmer
            </GradientShimmer>
          </li>
          <li className="flex items-center gap-2 rounded-md px-3 py-1.5">
            <span className="text-muted-foreground">#</span> design-sync
          </li>
          <li className="flex items-center gap-2 rounded-md px-3 py-1.5">
            <span className="text-muted-foreground">#</span> release-notes
          </li>
        </ul>
      </div>
    </div>
  );
}