import { Component } from '@angular/core';
import { WrDestruct } from 'ngwr/animations/destruct';
@Component({ imports: [WrDestruct] })
export class MyComponent {}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.
Installation
Import the class, and @use the entry point in your global styles. Nothing warns you when the @use is missing.
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.
<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.
<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.
<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
Animation GlitchA 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.Animation DecodeA readout locking on: every character shows random glyphs that change quickly, then settles on the real one, left to right.Guide MotionEasing and duration tokens for your transitions and animations.