# Shiny Text

> Text with a light stripe sweeping across it.

Source: https://ngwr.dev/bits/shiny-text  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrShimmer, WrShinyText } from 'ngwr/bits/shiny-text';

@Component({ imports: [WrShimmer, WrShinyText] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/shiny-text';
```

## Playground

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

```angular-ts
import { Component } from '@angular/core';

import { WrShinyText } from 'ngwr/bits/shiny-text';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrShinyText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## Directive variant ([wrShimmer])

`[wrShimmer]` adds the same sweep to any element.

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

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

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to render. | `string` | — |
| `disabled` | Pause the animation. | `boolean` | `false` |
| `speed` | Seconds for one sweep. | `number` | `2` |
| `color` | Text colour outside the stripe. Unset, it uses `--wr-shiny-text-base`. | `string \| null` | `null` |
| `shineColor` | Stripe colour. Unset, it follows the theme. | `string \| null` | `null` |
| `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` | Rest between sweeps, in seconds. | `number` | `0` |
| `[wrShimmer]` | Adds a continuous sweep to any element. | `directive` | `—` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/shiny-text`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-shiny-text-base` | `light-dark(var(--wr-color-on-surface-muted, #8594a4), #b5b5b5)` | `.wr-shiny-text` |
| `--wr-shiny-text-motion` | `1` | `.wr-shiny-text` |
| `--wr-shiny-text-progress` | `0` only under `from` — unset elsewhere | `from` +1 variant override |
| `--wr-shiny-text-shine` | `light-dark(var(--wr-color-on-surface, #0f172a), #ffffff)` | `.wr-shiny-text` |

## See also

- [Gradient Text](https://ngwr.dev/bits/gradient-text) — Text filled with a moving gradient.
- [Star Border](https://ngwr.dev/bits/star-border) — Light rays that run along the edges of a box.