# Gradient Text

> Animated multi-stop gradient text. The gradient slides across the text via `background-clip: text`. Optional border variant wraps the text in a dark pill with the same animated gradient as a border ring. Pure CSS port — no JS animation loop.

Source: https://ngwr.dev/animations/gradient-text  
Kind: Animation

## Import

```angular-ts
import { WrGradientText } from 'ngwr/gradient-text';
```

## Playground

```html
<wr-gradient-text
  [animationSpeed]="8"
  direction="horizontal"
  [yoyo]="true"
  [pauseOnHover]="false"
  [showBorder]="false"
>
  Hello, ngwr!
</wr-gradient-text>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `colors` | Gradient stops (any CSS colours). | `readonly string[]` | `['#5227FF', '#FF9FFC', '#B497CF']` |
| `animationSpeed` | Seconds per full sweep (or per half if `yoyo` is on). | `number` | `8` |
| `showBorder` | Wrap the text in a dark pill with the gradient as a border. | `boolean` | `false` |
| `direction` | Gradient slide direction. | `'horizontal' \| 'vertical' \| 'diagonal'` | `'horizontal'` |
| `pauseOnHover` | Pause the animation while hovered. | `boolean` | `false` |
| `yoyo` | Bounce back-and-forth instead of restarting. | `boolean` | `true` |