# Glitch Text

> Text with a colour-split glitch, on hover or all the time.

Source: https://ngwr.dev/bits/glitch-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 { WrGlitchText } from 'ngwr/bits/glitch-text';

@Component({ imports: [WrGlitchText] })
export class MyComponent {}
```

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

## Playground

On a card, set `background` to the card colour.

```angular-html
<wr-glitch-text
  text="ERROR"
  [speed]="1"
  [enableShadows]="true"
  [enableOnHover]="true"
  background="var(--wr-color-surface)"
/>
```

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

import { WrGlitchText } from 'ngwr/bits/glitch-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: [WrGlitchText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to glitch. Required — the value populates `data-text` for the pseudo clones. | `string` | — |
| `speed` | Time multiplier — higher = slower glitching. | `number` | `1` |
| `enableShadows` | Show the red / cyan colour-split shadows. | `boolean` | `true` |
| `enableOnHover` | Only glitch on hover (idle until then). | `boolean` | `true` |
| `background` | Surface colour for the clone slices. Pass the colour of the surface the component sits on so the slicing illusion masks cleanly; leave unset (transparent) on the page canvas. | `string` | `'' (transparent)` |

## CSS variables

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

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-glitch-text-after-duration` | `3s` | `.wr-glitch-text` |
| `--wr-glitch-text-after-shadow` | `-5px 0 var(--wr-color-danger)` | `.wr-glitch-text` |
| `--wr-glitch-text-before-duration` | `2s` | `.wr-glitch-text` |
| `--wr-glitch-text-before-shadow` | `5px 0 var(--wr-color-info)` | `.wr-glitch-text` |
| `--wr-glitch-text-font-weight` | `var(--wr-font-weight-extrabold)` | `.wr-glitch-text` |

## See also

- [Fuzzy Text](https://ngwr.dev/bits/fuzzy-text) — Text drawn on a canvas with a TV-static jitter.
- [Decrypt Text](https://ngwr.dev/bits/decrypt-text) — Text that scrambles, then resolves into the real string.