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) |
CSS variables
Custom properties ngwr/glitch-text publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-glitch-text-after-duration | 3s | .wr-glitch-text |
--wr-glitch-text-after-shadow | -5px 0 var(--wr-color-danger) | .wr-glitch-text |
--wr-glitch-text-before-duration | 2s | .wr-glitch-text |
--wr-glitch-text-before-shadow | 5px 0 var(--wr-color-info) | .wr-glitch-text |