# Glitch Text

> Colour-split horizontal-tear glitch on the provided text. Defaults to glitching on hover; flip `[enableOnHover]` to play constantly. Pure CSS port — two pseudo-element clones with offset coloured shadows and a clip-path keyframe.

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

## Import

```angular-ts
import { WrGlitchText } from 'ngwr/glitch-text';
```

## Playground

```html
<wr-glitch-text
  text="ERROR"
  [speed]="1"
  [enableShadows]="true"
  [enableOnHover]="true"
/>
```

## 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)` |