import { Component } from '@angular/core';
import { WrGlitchText } from 'ngwr/bits/glitch-text';
@Component({ imports: [WrGlitchText] })
export class MyComponent {}Glitch Text
Text with a colour-split glitch, on hover or all the time.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
On a card, set background to the card colour.
<wr-glitch-text
text="ERROR"
[speed]="1"
[enableShadows]="true"
[enableOnHover]="true"
background="var(--wr-color-surface)"
/>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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/glitch-text's own element.
| 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 |
--wr-glitch-text-font-weight | var(--wr-font-weight-extrabold) | .wr-glitch-text |