# Gradient Text

Text filled with a slowly flowing ember gradient. CSS only.

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

## Install

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

## API — Gradient Text
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `colors` | `string[]` | — |  |
| `duration` | `number` | `6` |  |
| `as` | `ElementType` | `"span"` |  |

## Example — Gradient Text

```tsx
import { GradientText } from "@/components/ui/gradient-text";

export default function GradientTextDemo({ text = "within", duration = 6 }: { text?: string; duration?: number }) {
  return (
    <h3 className="text-center text-5xl font-semibold tracking-tight">
      Lit from <GradientText duration={duration}>{text}</GradientText>
    </h3>
  );
}
```

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

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

export type GradientTextProps = {
  children: React.ReactNode;
  /** Colour stops; defaults to an ember-to-ash flow. */
  colors?: string[];
  /** Seconds per cycle. */
  duration?: number;
  as?: React.ElementType;
  className?: string;
};

const css = `@keyframes charcoal-gradient{0%{background-position:0% 50%}100%{background-position:200% 50%}}`;

/** Text filled with a slowly flowing gradient. Pure CSS; it holds still under reduced motion. */
export function GradientText({ children, colors = ["#0285f7", "#7cc4fa", "#f0f0f0", "#0285f7"], duration = 6, as: Tag = "span", className }: GradientTextProps) {
  return (
    <Tag
      className={cn("inline-block bg-clip-text text-transparent [animation:charcoal-gradient_var(--gt-d)_linear_infinite] motion-reduce:[animation:none]", className)}
      style={{ backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`, backgroundSize: "200% 100%", "--gt-d": `${duration}s` } as React.CSSProperties}
    >
      <style href="charcoal-gradient" precedence="default">
        {css}
      </style>
      {children}
    </Tag>
  );
}
```