Fuzzy Text

Angular adaptation of an effect by David Haz / reactbits.dev.

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

404

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

Fuzz Range (px)

30 px

Base Intensity

0.18

Hover Intensity

0.50

Direction

Glitch Mode

Text

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`

Import