Glitch Text Hover
An RGB-split, jittery glitch effect on text when you hover it.
- Category
- Text Effects
- Added
- 2026-08-22
- Deps
- none
- Updated
- 2026-09-01
Props
"use client";
export function GlitchText({
text = "GLITCH",
intensity = 3,
}: {
text?: string;
intensity?: number;
}) {
return (
<span
className="group relative inline-block font-black tracking-tight"
style={{ "--glitch-intensity": `${intensity}px` } as React.CSSProperties}
>
<span
aria-hidden
className="viberdy-glitch-layer absolute left-0 top-0 hidden text-red-500 group-hover:block"
style={{ clipPath: "inset(0 0 55% 0)" }}
>
{text}
</span>
<span className="relative">{text}</span>
<span
aria-hidden
className="viberdy-glitch-layer-2 absolute left-0 top-0 hidden text-cyan-300 group-hover:block"
style={{ clipPath: "inset(55% 0 0 0)" }}
>
{text}
</span>
<style jsx>{`
.viberdy-glitch-layer {
animation: viberdy-glitch-shift-a 0.35s steps(2, jump-none) infinite;
}
.viberdy-glitch-layer-2 {
animation: viberdy-glitch-shift-b 0.35s steps(2, jump-none) infinite;
}
@keyframes viberdy-glitch-shift-a {
0% { transform: translate(0, 0); }
50% { transform: translate(calc(var(--glitch-intensity, 3px) * -1), 1px); }
100% { transform: translate(0, 0); }
}
@keyframes viberdy-glitch-shift-b {
0% { transform: translate(0, 0); }
50% { transform: translate(var(--glitch-intensity, 3px), -1px); }
100% { transform: translate(0, 0); }
}
`}</style>
</span>
);
}
About this text effect
The RGB-split glitch look usually gets built with a JS interval nudging random offsets every few milliseconds, which is unnecessary churn for what's really a two-layer animation. This version does it in pure CSS: two absolutely-positioned duplicate copies of the text, one clipped to its top half and tinted red, one clipped to its bottom half and tinted cyan, each with its own steps()-timed keyframe that exists only while group-hover is true — nothing runs or costs anything off-hover. Reach for it over a JS-driven glitch when the trigger is a discrete hover state rather than an ambient background effect; reach for canvas or WebGL instead for a whole-page or scroll-triggered glitch, which this component doesn't attempt. The non-obvious detail: the intensity prop is threaded through a CSS custom property on the wrapper's inline style and read via var() inside the keyframes, deliberately not interpolated straight into the style jsx template literal, which can compile to a frozen, unreacting value under some bundler setups. It also depends on styled-jsx being configured, which a bare Vite or CRA project won't have out of the box.
Curator’s note
Two clipped, colored duplicate layers (top-half red, bottom-half cyan) rather than a full-height duplicate each — clipping each to a half keeps the effect reading as a split-scan glitch instead of two solid colored copies of the whole word stacked on each other.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Scramble Text
text effectsText that decodes from random characters into its real word on hover.
Extruded Type Tilt
text effectsDisplay type with a solid extrusion that swings around as the pointer moves.
Chromatic Split Hover
text effectsRGB channels of a headline separate toward the pointer and recombine to white.