Components

Glitch Text

Animated RGB split, CSS-only glitch effect.

npx neonblade add glitch-text

Modes (active vs hover)

Hover MeHover Me

Always OnAlways On

Intensity (hover each)

subtlesubtle

normalnormal

heavyheavy

chaoschaos

Speed — active mode

slowslow

normalnormal

fastfast

frenzyfrenzy

Custom channel colors (hover)

DefaultDefault

Pink/GreenPink/Green

CustomCustom

Neon Glow add-on

Neon GlowNeon Glow

Neon FlickerNeon Flicker

Chaos NeonChaos Neon

Props Configuration

Prop	Type	Default	Description
`text`	`string`	-	String passed to data-text — must match the children text for the CSS pseudo-element channels to line up.
`mode`	`"hover" \| "active"`	`"hover"`	"hover" plays the glitch only while hovered. "active" plays continuously.
`intensity`	`"subtle" \| "normal" \| "heavy" \| "chaos"`	`"normal"`	Displacement amount of the RGB-split channels. "chaos" uses a full-cycle keyframe with skew.
`speed`	`"slow" \| "normal" \| "fast" \| "frenzy"`	`"normal"`	Animation loop speed shorthand (2 s / 1 s / 0.45 s / 0.2 s).
`customSpeed`	`string`	-	Explicit CSS duration string (e.g. "1.5s") — overrides speed.
`colorA`	`"cyan" \| "pink" \| "green" \| string`	`"pink"`	Color of the ::before channel text-shadow (preset or CSS color).
`colorB`	`"cyan" \| "pink" \| "green" \| string`	`"cyan"`	Color of the ::after channel text-shadow (preset or CSS color).
`offset`	`number`	`2`	Horizontal split offset of the RGB channels in px.
`neon`	`boolean`	`false`	Adds a neon text-shadow glow around the text.
`neonFlicker`	`boolean`	`false`	When neon is true, also animates a neon-flicker on the glow.
`glowColor`	`"cyan" \| "pink" \| "green" \| string`	-	Color of the neon glow (defaults to colorB).
`glitchDuration`	`number`	-	(Deprecated) Legacy loop duration in seconds. Use speed or customSpeed instead.