Gradient GeneratorForm Builderllms-full.txt
ComponentsText Animations

Glitch Text

Cyberpunk-style glitch text effect for React. Digital distortion animation with character scrambling. Perfect for hero sections and tech websites.

Last updated on

Edit on GitHub
Open in
Hello
"use client";
 
import { GlitchText } from "@/components/ui/glitch-text";
 
export function GlitchTextDemo() {
  return (
    <div className="flex items-center justify-center">
      <GlitchText
        words={["Hello", "World", "Glitch", "Effect"]}
        className="font-bold text-4xl text-foreground"
      />
    </div>
  );
}

Examples

Custom Timing

Open in

Fast Glitch

Code

Slow Glitch

Design
"use client";
 
import { GlitchText } from "@/components/ui/glitch-text";
 
export function GlitchTextCustomDemo() {
  return (
    <div className="flex flex-col items-center justify-center gap-8">
      <div className="text-center">
        <h3 className="mb-4 font-semibold text-lg">Fast Glitch</h3>
        <GlitchText
          words={["Code", "Hack", "Debug", "Fix"]}
          interval={1500}
          glitchDuration={200}
          className="font-mono text-2xl text-primary"
        />
      </div>
 
      <div className="text-center">
        <h3 className="mb-4 font-semibold text-lg">Slow Glitch</h3>
        <GlitchText
          words={["Design", "Create", "Build", "Deploy"]}
          interval={5000}
          glitchDuration={500}
          className="font-bold text-3xl text-destructive"
        />
      </div>
    </div>
  );
}

Installation

CLI

npx shadcn@latest add "https://jolyui.dev/r/glitch-text"

Manual

Install the following dependencies:

npm install motion

Copy and paste the following code into your project. component/ui/glitch-text.tsx

import * as React from "react";
import { cn } from "@/lib/utils";
 
interface GlitchTextProps {
  words: string[];
  className?: string;
  interval?: number;
  glitchDuration?: number;
}
 
const GlitchText = React.forwardRef<HTMLSpanElement, GlitchTextProps>(
  ({ words, className, interval = 3000, glitchDuration = 300 }, ref) => {
    const [currentIndex, setCurrentIndex] = React.useState(0);
    const [isGlitching, setIsGlitching] = React.useState(false);
    const [displayText, setDisplayText] = React.useState(words[0] || "");
 
    const glitchChars = "!<>-_\\/[]{}—=+*^?#________";
 
    React.useEffect(() => {
      const timer = setInterval(() => {
        setIsGlitching(true);
 
        const nextIndex = (currentIndex + 1) % words.length;
        const targetWord = words[nextIndex] || "";
        const iterations = 10;
        let iteration = 0;
 
        const glitchInterval = setInterval(() => {
          setDisplayText(
            targetWord
              .split("")
              .map((char, i) => {
                if (i < iteration) return char;
                return glitchChars[
                  Math.floor(Math.random() * glitchChars.length)
                ];
              })
              .join(""),
          );
 
          iteration += 1;
          if (iteration > targetWord.length) {
            clearInterval(glitchInterval);
            setDisplayText(targetWord);
            setCurrentIndex(nextIndex);
            setIsGlitching(false);
          }
        }, glitchDuration / iterations);
      }, interval);
 
      return () => clearInterval(timer);
    }, [currentIndex, words, interval, glitchDuration]);
 
    return (
      <span
        ref={ref}
        className={cn(
          "inline-block font-mono",
          isGlitching && "text-primary",
          className,
        )}
      >
        {displayText}
      </span>
    );
  },
);
GlitchText.displayName = "GlitchText";
 
export { GlitchText };

API Reference

Prop

Type

Notes

  • Uses character scrambling with random glitch characters during transitions
  • Creates authentic digital distortion effects
  • Customizable glitch duration and word change intervals
  • Supports custom CSS classes for styling
  • Perfect for cyberpunk themes, tech demos, or gaming interfaces

How is this guide?

Falling Text

A physics-based text animation component that makes words fall and interact with realistic physics. Supports multiple triggers, customizable physics, and mouse interactions.

Gooey Text Morphing

Liquid gooey text morph effect for React. SVG filter-based animation with smooth blob-like transitions. Unique eye-catching text animation.

On this page

Examples
Custom Timing
Installation
CLI
Manual
API Reference
Notes