# Shimmer Text

A band of light sweeps across text. Good for loading or thinking states.

**Category:** Text  
**Exports:** `ShimmerText`  
**npm dependencies:** none (+ clsx, tailwind-merge for `cn`)

## Install

```bash
npx shadcn@latest add https://charcoalui.com/r/shimmer-text.json
```
The file lands at `components/ui/shimmer-text.tsx`; import from `@/components/ui/shimmer-text`.

## API — Shimmer Text
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `children` | `string` | — |  |
| `duration` | `number` | `2.4` |  |

## Example — Shimmer Text

```tsx
import { ShimmerText } from "@/components/ui/shimmer-text";

export default function ShimmerTextDemo({ text = "Generating your component…", duration = 2.4 }: { text?: string; duration?: number }) {
  return (
    <div className="grid gap-4 text-center">
      <ShimmerText duration={duration} className="text-2xl font-semibold tracking-tight">{text}</ShimmerText>
      <ShimmerText duration={3.2} className="text-sm">Thinking through edge cases</ShimmerText>
    </div>
  );
}
```

## Source — components/ui/shimmer-text.tsx

```tsx
import * as React from "react";
import { cn } from "@/lib/utils";

export type ShimmerTextProps = {
  children: string;
  /** Seconds per sweep. */
  duration?: number;
  className?: string;
};

const css = `@keyframes charcoal-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}`;

/** A band of light sweeps across the text. Pure CSS; it holds still under reduced motion. */
export function ShimmerText({ children, duration = 2.4, className }: ShimmerTextProps) {
  return (
    <span
      className={cn(
        "inline-block bg-clip-text text-transparent",
        "bg-[linear-gradient(110deg,var(--color-muted-foreground)_35%,var(--color-foreground)_50%,var(--color-muted-foreground)_65%)] bg-[length:250%_100%]",
        "[animation:charcoal-shimmer_var(--shimmer-duration)_linear_infinite] motion-reduce:animate-none",
        className,
      )}
      style={{ "--shimmer-duration": `${duration}s` } as React.CSSProperties}
    >
      <style href="charcoal-shimmer" precedence="default">
        {css}
      </style>
      {children}
    </span>
  );
}
```