# Fuzzy Text

> Canvas-rendered fuzzy text — each row (or column) is offset by a random amount per frame for a TV-static or motion-blur look. Intensity ramps up on hover, click, and during periodic glitch bursts.

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

## Import

```angular-ts
import { WrFuzzyText } from 'ngwr/fuzzy-text';
```

## Playground

```html
<wr-fuzzy-text
  text="404"
  [fuzzRange]="30"
  [baseIntensity]="0.18"
  [hoverIntensity]="0.5"
  direction="horizontal"
  [glitchMode]="false"
/>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to render. | `string` | `— (required)` |
| `fontSize` | Font size as a CSS length or px number. | `string \| number` | `'clamp(2rem, 10vw, 10rem)'` |
| `fontWeight` | Font weight. | `number \| string` | `900` |
| `fontFamily` | Font family. `'inherit'` reads the canvas's computed style. | `string` | `'inherit'` |
| `color` | Text colour. Ignored if `[gradient]` is set. | `string` | `'inherit'` |
| `gradient` | Optional horizontal gradient stops (2+ colours). | `readonly string[] \| null` | `null` |
| `enableHover` | Enable hover / touch reactivity. | `boolean` | `true` |
| `baseIntensity` | Base intensity (0..1) when idle. | `number` | `0.18` |
| `hoverIntensity` | Intensity (0..1) while the pointer hovers the text. | `number` | `0.5` |
| `fuzzRange` | Max pixel displacement per row/column at intensity 1. | `number` | `30` |
| `fps` | Frame rate cap. | `number` | `60` |
| `direction` | Fuzz direction. | `'horizontal' \| 'vertical' \| 'both'` | `'horizontal'` |
| `transitionDuration` | Ms to ease intensity toward target. `0` snaps. | `number` | `0` |
| `clickEffect` | Spike to full intensity briefly on click. | `boolean` | `false` |
| `glitchMode` | Periodic glitch bursts at full intensity. | `boolean` | `false` |
| `glitchInterval` | Ms between glitch bursts. | `number` | `2000` |
| `glitchDuration` | Ms a glitch burst lasts. | `number` | `200` |
| `letterSpacing` | Extra pixels between glyphs. | `number` | `0` |