Glitch Text

Glitch Text brings cyberpunk aesthetics to your typography! With RGB color distortions, scan line effects, and customizable intensity levels, this component creates the perfect glitch aesthetic for futuristic or retro-tech interfaces.

Preview

Code

Glitch Intensities

Low Intensity GlitchLow Intensity GlitchLow Intensity GlitchLow Intensity Glitch

Medium Intensity GlitchMedium Intensity GlitchMedium Intensity GlitchMedium Intensity Glitch

High Intensity GlitchHigh Intensity GlitchHigh Intensity GlitchHigh Intensity Glitch

Animation Speeds

Slow Glitch EffectSlow Glitch EffectSlow Glitch EffectSlow Glitch Effect

Normal Speed GlitchNormal Speed GlitchNormal Speed GlitchNormal Speed Glitch

Fast Glitch EffectFast Glitch EffectFast Glitch EffectFast Glitch Effect

Stylized Examples

ERROR 404ERROR 404ERROR 404ERROR 404

SYSTEM FAILURESYSTEM FAILURESYSTEM FAILURESYSTEM FAILURE

ACCESS GRANTEDACCESS GRANTEDACCESS GRANTEDACCESS GRANTED

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add glitch-text

yarn @rajdevxd/aura-ui add glitch-text

pnpm dlx @rajdevxd/aura-ui add glitch-text

bunx --bun @rajdevxd/aura-ui add glitch-text

Usage

import { GlitchText } from "@/components/ui/glitch-text"

export function Example() {
  return (
    <GlitchText
      text="SYSTEM ERROR"
      intensity="high"
      speed="fast"
    />
  )
}

Props

Prop	Type	Required	Description
`text`	`string`	Yes	The text to apply glitch effect to
`intensity`	`"low" \| "medium" \| "high"`	No	Strength of the glitch effect (default: "medium")
`speed`	`"slow" \| "normal" \| "fast"`	No	Speed of the glitch animation (default: "normal")
`className`	`string`	No	Additional CSS classes

Intensity Levels

Low Intensity

Subtle glitch effects with gentle distortions.

<GlitchText text="Low Intensity Glitch" intensity="low" />

Medium Intensity (Default)

Balanced glitch effects for most use cases.

<GlitchText text="Medium Intensity Glitch" intensity="medium" />

High Intensity

Dramatic glitch effects with strong distortions.

<GlitchText text="High Intensity Glitch" intensity="high" />

Speed Variations

Slow Glitch

Gentle, pulsing glitch animation.

<GlitchText text="Slow Glitch" speed="slow" />

Normal Speed (Default)

Standard glitch animation timing.

<GlitchText text="Normal Glitch" speed="normal" />

Fast Glitch

Rapid, intense glitch animation.

<GlitchText text="Fast Glitch" speed="fast" />

Features

RGB Color Shifts: Red, blue, and green color distortions
Scan Lines: Retro CRT-style scan line effects
Multiple Layers: Stacked glitch effects for depth
Customizable Intensity: Three levels of glitch strength
Speed Control: Adjustable animation timing
Hardware Acceleration: Smooth 60fps animations
Cyberpunk Aesthetic: Perfect for futuristic interfaces

Advanced Usage

Error Messages

<GlitchText
  text="ACCESS DENIED"
  intensity="high"
  speed="fast"
  className="text-2xl font-bold text-red-500"
/>

System Status

<GlitchText
  text="INITIALIZING..."
  intensity="medium"
  speed="normal"
  className="text-lg font-mono"
/>

Interactive Glitch

const InteractiveGlitch = () => {
  const [intensity, setIntensity] = React.useState('medium')

  return (
    <div className="space-y-4">
      <div className="flex space-x-2">
        <button onClick={() => setIntensity('low')}>Low</button>
        <button onClick={() => setIntensity('medium')}>Medium</button>
        <button onClick={() => setIntensity('high')}>High</button>
      </div>

      <GlitchText
        text="INTERACTIVE GLITCH"
        intensity={intensity}
        speed="normal"
      />
    </div>
  )
}

Multi-line Glitch

<div className="space-y-2">
  <GlitchText text="SYSTEM" intensity="high" />
  <GlitchText text="MALFUNCTION" intensity="high" />
  <GlitchText text="DETECTED" intensity="high" />
</div>

Performance

GPU Accelerated: Uses CSS transforms for smooth animations
Optimized Rendering: Minimal DOM manipulation
Hardware Acceleration: CSS 3D transforms for 60fps
Memory Efficient: Lightweight animation system

Browser Support

Modern Browsers: Full support for Chrome, Firefox, Safari, Edge
CSS Transforms: Requires CSS transform support
Fallback: Graceful degradation to static text

Accessibility

Screen Reader Support: Proper text content for assistive technologies
Reduced Motion: Respects user's motion preferences
High Contrast: Maintains readability with glitch effects

Glitch Text - adding cyberpunk flair to your digital interfaces! ⚡👾

Aura UI