GlitchText
glitch-textAdds layered chromatic offsets and jitter to create a controlled glitch effect.
Usage
Basic usage
Two layers of pseudo elements RGB dislocation + clip-path slicing, a sense of resident digital glitch.
HULIAN
tsx
<GlitchText className="text-4xl font-extrabold tracking-tight">HULIAN</GlitchText>Hover trigger
enableOnHover Rests as normal text, and fails when hovering.
GLITCH
tsx
<GlitchText enableOnHover className="text-4xl font-extrabold tracking-tight">
GLITCH
</GlitchText>Tear frequency
speed is the tearing cycle in seconds. The smaller the jitter, the more violent it is.
SYSTEM
tsx
<GlitchText speed={0.8} className="text-4xl font-extrabold tracking-tight">
SYSTEM
</GlitchText>When to use
Use GlitchText for a cyberpunk or technical heading with RGB offsets and sliced jitter. The effect is pure CSS with no runtime dependency and renders in an RSC. Use DecryptedText for a character-decoding reveal, BlurText for focus, or Heading for static text.
Import
ts
import { GlitchText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 2.5 | Tear cycle seconds, the smaller it is, the more violent it is |
| enableOnHover | boolean | false | Fault only on hover, rest as normal text; default permanent fault |
The remaining <span> native properties support.
Slots
| Slot | Type | Description |
|---|---|---|
| children * | string | The text to be used for the tearing fault effect must be a pure string (copied by the pseudo element attr(data-text)) |
Usage guidelines
childrenmust be a plain string. Pseudo-elements copy it throughattr(data-text); JSX leaves the offset layers empty.- Glitch colors use chart tokens such as
var(--color-chart-*)and follow the theme. Custom colors need a--color-token or another valid CSS color; barevar(--primary)is not resolved by this Tailwind v4 setup. - With
prefers-reduced-motion, the component falls back to stable ordinary text.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
SYSTEM
<GlitchText speed={2.5} enableOnHover={false}>SYSTEM</GlitchText>