# Shiny Text

> Shimmer-over-text effect. A bright stripe sweeps across the text using `background-clip: text` + an animated `background-position`. Pure CSS port — no JS animation loop.

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

## Import

```angular-ts
import { WrShinyText } from 'ngwr/shiny-text';
```

## Playground

```html
<wr-shiny-text
  text="Premium"
  [speed]="2"
  [spread]="120"
  direction="left"
  [yoyo]="false"
  [pauseOnHover]="false"
/>
```

## Directive variant ([wrShimmer])

```angular-ts
import { WrShimmer } from 'ngwr/shiny-text';

<h1 wrShimmer>Premium</h1>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to render. | `string` | `— (required)` |
| `disabled` | Pause the animation. | `boolean` | `false` |
| `speed` | Time for the bright stripe to traverse the text, in seconds. | `number` | `2` |
| `color` | Base text colour (outside the bright stripe). | `string` | `theme token` |
| `shineColor` | Bright stripe colour. | `string \| null` | `theme token` |
| `spread` | Gradient angle in degrees. | `number` | `120` |
| `yoyo` | Bounce back-and-forth instead of restarting. | `boolean` | `false` |
| `pauseOnHover` | Pause the animation while hovered. | `boolean` | `false` |
| `direction` | Sweep direction. | `'left' \| 'right'` | `'left'` |
| `delay` | Pause between sweeps in seconds. | `number` | `0` |
| `[wrShimmer]` | Lightweight directive variant — adds the `.wr-shimmer` host class for a continuous sweep over any element. Same package. | `directive` | `—` |