# Fuzzy Text

> Text drawn on a canvas with a TV-static jitter.

Source: https://ngwr.dev/bits/fuzzy-text  
Updated in v15

## Installation

Import the class. This entry point has no stylesheet.

```typescript
import { Component } from '@angular/core';
import { WrFuzzyText } from 'ngwr/bits/fuzzy-text';

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

## Playground

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

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

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

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to render. | `string` | — |
| `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, any CSS colour — a `var()` token or `light-dark()` included. Followed live while the text animates. Ignored if `[gradient]` is set. | `string` | `'inherit'` |
| `gradient` | Optional horizontal gradient stops (2+ colours), each resolved the way `color` is. | `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` |

## See also

- [Glitch Text](https://ngwr.dev/bits/glitch-text) — Text with a colour-split glitch, on hover or all the time.
- [Decrypt Text](https://ngwr.dev/bits/decrypt-text) — Text that scrambles, then resolves into the real string.