Gradient Shimmer

A zero-dependency React text shimmer that sweeps a multi-stop gradient highlight across your text. Web-Animations-API driven — no CSS import, no Tailwind, no runtime deps. The gradient is background-clipped to the glyphs and swept with the WAAPI at a constant px/s regardless of font size, so every shimmer on the page runs at the same frequency. Ships 8 rich multi-stop presets (sunrise, bubble, peach, tonic, mint, spring, twilight, bay) plus fully custom stops, three easing curves (smooth, gentle, snappy), and tunable duration, spread, angle and pause. Automatically pauses while off-screen, while the tab is hidden, or while the page scrolls, and degrades to a static gradient under prefers-reduced-motion. Great for signalling a running / loading task inline in text.

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

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

const settings = {
  gradient: "sunrise",
  easing: "smooth",
  duration: 1.45,
  spread: 3,
  angle: 105,
  pauseBetween: 1000,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="flex h-screen w-screen items-center justify-center bg-background">
      <GradientShimmer
        gradient={s.gradient as any}
        easing={s.easing as any}
        duration={s.duration}
        spread={s.spread}
        angle={s.angle}
        pauseBetween={s.pauseBetween}
        className="text-5xl font-semibold tracking-tight sm:text-7xl"
      >
        Gradient Shimmer
      </GradientShimmer>
    </div>
  );
}