Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrGlitchText } from 'ngwr/glitch-text';Playground
<wr-glitch-text
text="ERROR"
[speed]="1"
[enableShadows]="true"
[enableOnHover]="true"
/>Customize
Speed
Shadows
On Hover Only
Text
API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to glitch. Required — the value populates data-text for the pseudo clones. | string | — |
speed | Time multiplier — higher = slower glitching. | number | 1 |
enableShadows | Show the red / cyan colour-split shadows. | boolean | true |
enableOnHover | Only glitch on hover (idle until then). | boolean | true |
background | Surface colour for the clone slices. Pass the colour of the surface the component sits on so the slicing illusion masks cleanly; leave unset (transparent) on the page canvas. | string | '' (transparent) |