text

GlitchText

RGB split glitch text effect with customizable intensity and colors.

npx chaos add glitch-text

PREVIEW

GLITCH

USAGE

import { GlitchText } from '@/components/chaos/text/glitch-text';

<GlitchText>CHAOS</GlitchText>
<GlitchText intensity="intense">ERROR</GlitchText>
<GlitchText glitchColor="#ff00ff" glitchColorAlt="#00ff00">CUSTOM</GlitchText>
<GlitchText static>HOVER ME</GlitchText>

PROPS

PropTypeDefault

childrenThe text to display

string-

intensityGlitch animation intensity

"subtle" | "medium" | "intense""medium"

glitchColorPrimary glitch color

string"#ff0040"

glitchColorAltSecondary glitch color

string"#00ffff"

staticGlitch only on hover

booleanfalse

CSS VARIABLES

--glitch-color#ff0040Primary glitch layer color

--glitch-color-alt#00ffffSecondary glitch layer color