React Glitch Text

Most text effects are subtle and boring—basic animations that don't capture attention or convey digital energy. This component creates authentic glitch effects with randomly clipping text fragments, RGB color separation, and distorted shadows that simulate digital corruption and screen interference.

Cyberpunk glitch text with RGB shadows

Text with authentic digital glitch effects and color separation:

import GlitchText from '@/components/ui/shadcn-io/glitch-text';const GlitchTextDemo = () => {  return (    <div className="flex items-center justify-center min-h-screen w-full bg-[#060010]">      <GlitchText        speed={1}        enableShadows={true}        enableOnHover={false}        className="text-center"      >        shadcn/ui      </GlitchText>    </div>  );};export default GlitchTextDemo;

'use client';import { FC, CSSProperties } from 'react';interface GlitchTextProps {  children: string;  speed?: number;  enableShadows?: boolean;  enableOnHover?: boolean;  className?: string;}interface CustomCSSProperties extends CSSProperties {  '--after-duration': string;  '--before-duration': string;  '--after-shadow': string;  '--before-shadow': string;}const GlitchText: FC<GlitchTextProps> = ({  children,  speed = 0.5,  enableShadows = true,  enableOnHover = false,  className = ''}) => {  const inlineStyles: CustomCSSProperties = {    '--after-duration': `${speed * 3}s`,    '--before-duration': `${speed * 2}s`,    '--after-shadow': enableShadows ? '-5px 0 red' : 'none',    '--before-shadow': enableShadows ? '5px 0 cyan' : 'none'  };  const baseClasses = 'text-white text-[clamp(2rem,10vw,8rem)] font-black relative mx-auto select-none cursor-pointer';  const pseudoClasses = !enableOnHover    ? 'after:content-[attr(data-text)] after:absolute after:top-0 after:left-[10px] after:text-white after:bg-[#060010] after:overflow-hidden after:[clip-path:inset(0_0_0_0)] after:[text-shadow:var(--after-shadow)] after:animate-glitch-after ' +      'before:content-[attr(data-text)] before:absolute before:top-0 before:left-[-10px] before:text-white before:bg-[#060010] before:overflow-hidden before:[clip-path:inset(0_0_0_0)] before:[text-shadow:var(--before-shadow)] before:animate-glitch-before'    : "after:content-[''] after:absolute after:top-0 after:left-[10px] after:text-white after:bg-[#060010] after:overflow-hidden after:[clip-path:inset(0_0_0_0)] after:opacity-0 " +      "before:content-[''] before:absolute before:top-0 before:left-[-10px] before:text-white before:bg-[#060010] before:overflow-hidden before:[clip-path:inset(0_0_0_0)] before:opacity-0 " +      'hover:after:content-[attr(data-text)] hover:after:opacity-100 hover:after:[text-shadow:var(--after-shadow)] hover:after:animate-glitch-after ' +      'hover:before:content-[attr(data-text)] hover:before:opacity-100 hover:before:[text-shadow:var(--before-shadow)] hover:before:animate-glitch-before';  const combinedClasses = `${baseClasses} ${pseudoClasses} ${className}`;  return (    <div style={inlineStyles} data-text={children} className={combinedClasses}>      {children}    </div>  );};export default GlitchText;

Built with TypeScript and CSS animations for React applications, using clip-path masking and pseudo-elements. The effect creates multiple text layers with different offsets and shadow colors, animated with randomized clipping patterns to simulate screen glitches.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/glitch-text.json

npx shadcn@latest add https://www.shadcn.io/registry/glitch-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/glitch-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/glitch-text.json

Usage

import GlitchText from "@/components/text/glitch-text";

<GlitchText
  speed={1}
  enableShadows={true}
  enableOnHover={true}
  className="text-center"
>
  Cyberpunk Text
</GlitchText>

Why most glitch effects fail

Most developers use simple transforms or opacity changes—predictable effects that don't capture the chaotic nature of digital corruption. Real glitches are unpredictable, fragmented, and multi-layered, involving color separation, timing variations, and spatial distortion.

This React component uses CSS clip-path with randomized inset values to create authentic fragmentation. The pseudo-elements create offset copies with red and cyan shadows, simulating RGB color separation common in digital interference. The animation timing is intentionally irregular to avoid mechanical repetition.

The key insight: authentic glitches are chaotic. When text fragments appear and disappear at different positions with color bleeding, it creates the visual language of digital malfunction that users recognize from cyberpunk aesthetics and screen corruption.

Features

• Authentic glitch animation with randomized clip-path fragmentation and RGB color separation
• Configurable animation speed with independent timing for before/after pseudo-elements
• Optional hover-triggered glitches for interactive text effects and user engagement
• Customizable shadow colors with red/cyan color separation for authentic RGB bleeding
• Performance optimized with pure CSS animations and hardware-accelerated transforms
• Theme-aware styling with CSS custom properties for foreground and background colors
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

GlitchText

Glitch text component with customizable distortion effects.

Speed Configuration

Control animation intensity with speed settings:

Shadow Options

RGB color separation effects:

Common gotchas

Animation doesn't show: Ensure the Tailwind config includes the glitch keyframes and animation classes. The component requires custom CSS animations that may not be included in default Tailwind configurations.

Text appears cut off: The glitch effect uses large text sizing with clamp() for responsive scaling. Ensure the container has sufficient space and the text length is reasonable for the display area.

Shadows don't match theme: The component uses hardcoded red and cyan shadows for authentic RGB separation. For theme integration, you might want to customize the shadow colors using CSS custom properties.

Performance on mobile: CSS clip-path animations can be intensive on older devices. The component uses hardware acceleration, but consider using enableOnHover for mobile to reduce constant animation load.

Hover state issues: When enableOnHover is true, the pseudo-elements are initially hidden and only appear on hover. Ensure proper hover states are set up and consider touch device behavior for mobile interfaces.

Integration with other components

Perfect for hero sections in cyberpunk-themed Card layouts or attention-grabbing headings in Dialog modals. Works excellently with dark themes and neon color schemes for gaming or tech-focused applications.

For branding interfaces, combine with Badge components for status indicators or Button components with matching glitch aesthetics. The component pairs well with Progress bars for loading states and Alert components for system status messages in tech-themed interfaces.

Questions developers actually ask