LetterGlitch
letter-glitchAnimates a terminal-style character matrix with randomized glyph and color glitches.
Usage
Basic usage
Put it into the relative dark container, and the components will be filled with the chart token palette by default.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<LetterGlitch className="absolute inset-0" />
</div>Hard cutting failure feeling
smooth=false turns off frame-by-frame interpolation, character colors are cut hard, and the glitch is more blunt.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<LetterGlitch className="absolute inset-0" smooth={false} glitchSpeed={40} />
</div>Center Vignette + Placed Content
centerVignette Darken the contrast overlay copy in the middle and turn off outerVignette.
GLITCH
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<LetterGlitch className="absolute inset-0" outerVignette={false} centerVignette />
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<p className="text-lg font-semibold tracking-widest text-white">GLITCH</p>
</div>
</div>Custom color palette (terminal green/cyan)
glitchColors passes any CSS color array, and off-screen canvas parses and interpolates.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<LetterGlitch
className="absolute inset-0"
glitchColors={[
"var(--color-chart-2)",
"oklch(0.78 0.18 160)",
"oklch(0.7 0.14 220)",
]}
glitchSpeed={70}
/>
</div>When to Use
Use it for a hacker-terminal or Matrix-style field of glitching characters. Use DotPattern for static geometric dots, or GridPattern for a regular line grid. LetterGlitch is a Canvas 2D character matrix built around rapidly changing glyphs and colors.
Import
import { LetterGlitch } from "@hulianui/ui"Props
ExtendsHTMLAttributes<HTMLDivElement>except forcolor, forwarding native attributes such asidand event handlers.
| Name | Type | Default | Description |
|---|---|---|---|
| glitchColors | string[] | ["var(--color-chart-2)", "var(--color-chart-1)", "var(--color-chart-4)"] | Character flicker palette, any CSS color, internal off-screen canvas parsed to RGB interpolation |
| glitchSpeed | number | 50 | Minimum interval between updates in milliseconds; lower values feel more frantic, with 20–200 recommended |
| smooth | boolean | true | Interpolate color changes frame by frame; false switches colors immediately for a harsher glitch |
| outerVignette | boolean | true | Outer edge vignetting (radial fade around) |
| centerVignette | boolean | false | Center vignetting (dark in the middle→transparent at the edge), used to contrast the embedded content |
| characters | string | Uppercase letters + symbols + numbers | Character set that participates in flickering, internally split by code points, supports any Unicode |
| className | string | — | Root container className |
| style | CSSProperties | — | Forward the root container inline style |
Usage Guidelines
- Canvas 2D renders on the client, so SSR may produce an empty first frame. Reduced-motion users receive the static state.
- The character matrix only has a terminal look on a dark background, and light-colored containers have poor contrast.
- CSS variables in
glitchColorsrequire the--color-prefix. Bare values such asvar(--primary)do not resolve; see [[hulian-token-color-var-needs-color-prefix]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<LetterGlitch
className="absolute inset-0"
glitchSpeed={50}
smooth={true}
outerVignette={true}
centerVignette={false}
/>
</div>