# Destruct

> Text that wobbles with a fine, living noise, as if seen through heat haze or over a weak signal, while a pointer is over it or focus is in it, and settles back to crisp, still text when the pointer leaves.

Source: https://ngwr.dev/animations/destruct  
Kind: Animation, Directive, SVG  
Added in v15.7

## Installation

Import the class, and `@use` the entry point in your global styles. Nothing warns you when the `@use` is missing.

```typescript
import { Component } from '@angular/core';
import { WrDestruct } from 'ngwr/animations/destruct';

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

```scss
@use 'ngwr/animations/destruct';
```

## Basic

Put `wrDestruct` on the element that holds the text. The text stays real text: one hidden `<svg>` beside the host holds a fractal-noise displacement filter, and the host wears it only while the noise is above zero. The intensity eases in fast and out slower, and the noise field steps about fifteen times a second, often enough to live and seldom enough to read as haze.

```angular-html
<h2><span wrDestruct>Hover me</span></h2>
```

## Focus

The pointer and focus are read on the closest focusable ancestor, so a label inside a button or a link wobbles when the control is reached by keyboard too.

```angular-html
<button wr-btn outlined type="button"><span wrDestruct>Hover or focus me</span></button>
```

## Shift

`shift` is how far a pixel of the text may move at full noise, each way, in em of the host's font size: 0.15 unset, small enough that the word reads at full noise. The frequency of the noise is set from the font size too, so the waves are the same share of a glyph at any size.

```angular-html
<h2><span wrDestruct shift="0.4">Heat haze</span></h2>
```

## Accessibility

| Part | Behaviour |
| --- | --- |
| Screen readers | Nothing changes: no copy, no canvas, no split. The filter is paint over the host, so selection, copy, find-in-page and the accessible tree see the element as it was. |
| Reduced motion | Under `prefers-reduced-motion: reduce` nothing mounts, and a preference that flips mid-run clears the filter at once. The demos on this page follow the same setting. |
| Forced colours | Under `forced-colors: active` no filter is mounted and the text stays as it is. |
| Server | The server renders the text as it is. The filter is mounted in the browser, after the first render, and the text renders exactly as without the effect until a pointer or focus arrives. |

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `shift` | How far a pixel of the text may move at full noise, each way, in em of the host's font size. | `number` | `0.15` |

## See also

- [Glitch](https://ngwr.dev/animations/glitch) — A short piece of text that looks like a broken signal while the pointer is over it: two tinted copies cut into thin slices jump sideways while the text leans a little, and the moment the pointer leaves everything snaps back clean.
- [Decode](https://ngwr.dev/animations/decode) — A readout locking on: every character shows random glyphs that change quickly, then settles on the real one, left to right.
- [Motion](https://ngwr.dev/guides/tokens/motion) — Easing and duration tokens for your transitions and animations.