Glitch Text
Glitch text effect with RGB channel separation and jitter, supporting continuous playback and hover triggering.
Simulates the classic cyberpunk glitch text with RGB channel separation, scanline slices, and jitter — pure CSS animation, with no fonts or external resources required.
Loading preview…
npx shadcn@latest add https://webberui.com/r/glitch-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
2.2
3
<GlitchText />
Installation
npx shadcn@latest add https://webberui.com/r/glitch-text.jsonOr, once registries are configured in components.json, install it as @webberui/glitch-text.
Usage
import { GlitchText } from "@/components/ui/glitch-text";
<GlitchText text="SYSTEM FAILURE" className="text-5xl font-bold" />Glitch on hover only:
<GlitchText text="hover to glitch" trigger="hover" intensity={2} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text to display |
trigger | "always" | "hover" | "always" | Glitch continuously, or only on hover |
speed | number | 2.2 | Main glitch cycle (seconds); smaller is more frantic |
intensity | number | 3 | Horizontal separation of the RGB channels (px) |
colorBefore | string | "#ff2d75" | Ghost color of the red channel |
colorAfter | string | "#00e5ff" | Ghost color of the cyan channel |
as | "span" | "p" | "h1"–"h6" | "span" | The HTML tag to render |
className | string | — | forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, static text is rendered with no jitter or ghosting applied
- The RGB ghost layers are produced by
::before/::afterand markedpointer-events: none, so they do not affect selection or announcement - Each instance generates its own keyframes and class names via
useId(), so multiple instances coexist without interfering with each other