Skip to main content
A text component with an animated glitch effect featuring customizable intensity levels and color schemes.

​
Installation

npx shadcn@latest add @kokonutui/glitch-text

​
Usage

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

export default function Example() {
  return (
    <GlitchText 
      text="Glitch Effect" 
      glitchIntensity="medium"
      color="gradient-orange"
      size="2xl"
    />
  );
}

​
Props

​
text
string
default:"'Glitch Text'"
The text content to display with glitch effect
​
className
string
Additional CSS classes for the container
​
glitchIntensity
'light' | 'medium' | 'heavy' | 'extreme'
default:"'medium'"
Intensity level of the glitch animation
​
color
'rainbow' | 'blue' | 'purple' | 'cyan' | 'pink' | 'orange' | 'gradient-orange'
default:"'gradient-orange'"
Color scheme for the glitch effect
​
backgroundColor
string
Custom background color
​
isStatic
boolean
default:"false"
Disable animation and show static text
​
size
'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | number
default:"'md'"
Text size (preset or custom pixel value)
​
fontWeight
number
default:"700"
Font weight (100-900)
​
letterSpacing
number
default:"5"
Letter spacing value

​
Glitch Intensity Levels

  • light: Subtle effect with minimal distortion
  • medium: Balanced effect suitable for most uses
  • heavy: Strong distortion and movement
  • extreme: Maximum glitch effect with rapid changes

​
Color Schemes

  • rainbow: Dynamic multi-hue color cycling
  • blue: Vibrant blue tones
  • purple: Rich purple shades
  • cyan: Bright cyan palette
  • pink: Vibrant pink colors
  • orange: Tangerine orange tones
  • gradient-orange: Multi-tone orange gradient

​
Examples

​
Static Glitch

<GlitchText 
  text="No Animation" 
  isStatic={true}
  color="cyan"
/>

​
Extreme Effect

<GlitchText 
  text="Extreme!" 
  glitchIntensity="extreme"
  color="rainbow"
  size="3xl"
/>

​
Dependencies

  • motion/react - Animation library
  • react - useRef hook
  • @/lib/utils - cn utility function

Build docs developers (and LLMs) love

Get started for freeTalk to us