Components
Glitch Text
A glitch text component that creates digital distortion effects by scrambling characters during word transitions.
Last updated on
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
CodeSlow 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 motionCopy 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?