# Text Shimmer Sweep — React Text Animation

> A slanted band of light glides across dimmed text, rests, then sweeps again; colours follow the theme.

- Category: [Text Effects](https://pixelpapa.com/components/text.md)
- Tags: text, shimmer, shine, sweep, loop
- Dependencies: lucide-react (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/text/text-shimmer-sweep

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/text-shimmer-sweep.json"
```

The file is written to `components/pixelpapa/text-shimmer-sweep.tsx`. To install manually, run `npm install lucide-react` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { ArrowRight } from "lucide-react";
import type { CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/utils";

type TextShimmerSweepProps = {
  children: ReactNode;
  className?: string;
  /** Seconds per cycle, including the rest between sweeps. */
  duration?: number;
  /** Colour of the text at rest. */
  baseColor?: string;
  /** Colour of the travelling band. */
  highlightColor?: string;
  /** Band angle in degrees. */
  angle?: number;
};

export function TextShimmerSweep({
  children,
  className,
  duration = 2.8,
  baseColor = "color-mix(in oklch, var(--foreground) 42%, transparent)",
  highlightColor = "var(--foreground)",
  angle = 105,
}: TextShimmerSweepProps) {
  const style: CSSProperties = {
    // A narrow highlight on a 250%-wide layer, over a flat base colour.
    backgroundImage: `linear-gradient(${angle}deg, transparent 38%, ${highlightColor} 50%, transparent 62%), linear-gradient(${baseColor}, ${baseColor})`,
    backgroundSize: "250% 100%, 100% 100%",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "100% 0, 0 0",
    WebkitBackgroundClip: "text",
    backgroundClip: "text",
    color: "transparent",
    animation: `pp-text-shimmer-sweep-move ${duration}s cubic-bezier(0.4, 0, 0.2, 1) infinite`,
  };

  return (
    <span className={cn("pp-text-shimmer-sweep inline-block pb-[0.1em]", className)} style={style}>
      <style>{`
        @keyframes pp-text-shimmer-sweep-move {
          0% { background-position: 100% 0, 0 0; }
          78%, 100% { background-position: 0% 0, 0 0; }
        }
        @media (prefers-reduced-motion: reduce) {
          .pp-text-shimmer-sweep { animation: none !important; background-position: 50% 0, 0 0 !important; }
        }
      `}</style>
      {children}
    </span>
  );
}

export default function TextShimmerSweepDemo() {
  return (
    <div className="w-full max-w-2xl px-4 text-center">
      <a
        href="#"
        className="inline-flex items-center gap-2 rounded-full border border-border bg-card py-1 pr-3 pl-1 text-sm shadow-sm"
      >
        <span className="rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground">3.0</span>
        <TextShimmerSweep duration={2.2}>Offline sync is now in beta</TextShimmerSweep>
        <ArrowRight className="size-3.5 text-muted-foreground" />
      </a>
      <h2 className="mt-7 text-5xl leading-[1.05] font-semibold tracking-tight sm:text-7xl">
        <TextShimmerSweep>Polished until</TextShimmerSweep>
        <br />
        <TextShimmerSweep
          baseColor="color-mix(in oklch, var(--primary) 55%, transparent)"
          highlightColor="var(--primary)"
          className="font-serif font-normal italic"
        >
          it catches light
        </TextShimmerSweep>
      </h2>
      <p className="mx-auto mt-5 max-w-sm text-sm text-muted-foreground">
        One element, two background layers, zero JavaScript on the animation path.
      </p>
    </div>
  );
}
```

## AI prompt

```text
Add the "Text Shimmer Sweep" component from PixelPapa UI to this project.

What it is: A slanted band of light glides across dimmed text, rests, then sweeps again; colours follow the theme.
Category: Text Effects. Depends on: lucide-react.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/text-shimmer-sweep.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/text-shimmer-sweep.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/text-shimmer-sweep" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More text effects

- [Blur Reveal Text](https://pixelpapa.com/components/text/blur-reveal-text.md): Words rise out of a blur one after another when the text scrolls into view.
- [Text Circular Rotating](https://pixelpapa.com/components/text/text-circular-rotating.md) (Pro): Text set on a circle that spins continuously and eases down to a crawl on hover, with a slot in the middle for an icon or button.
- [Text Counting Number](https://pixelpapa.com/components/text/text-counting-number.md) (Pro): A spring-driven count-up with locale formatting, prefix, suffix and decimals; writes straight to the DOM so it never re-renders.
- [Text Glitch Slice](https://pixelpapa.com/components/text/text-glitch-slice.md) (Pro): The word is cut into horizontal strips that jolt sideways in short bursts, with two colour ghosts splitting off underneath.
- [Text Gradient Flow](https://pixelpapa.com/components/text/text-gradient-flow.md): A seamless multi-stop gradient that travels through the letters on a loop, with an optional blurred glow of the same gradient behind.
- [Text Highlight Marker](https://pixelpapa.com/components/text/text-highlight-marker.md) (Pro): Hand-drawn marker strokes (highlight, underline or circle) draw themselves behind words when they scroll into view.