glitch-text

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4interface GlitchTextProps {
5  words: string[];
6  className?: string;
7  interval?: number;
8  glitchDuration?: number;
9}
10 
11const GlitchText = React.forwardRef<HTMLSpanElement, GlitchTextProps>(
12  ({ words, className, interval = 3000, glitchDuration = 300 }, ref) => {
13    const [currentIndex, setCurrentIndex] = React.useState(0);
14    const [isGlitching, setIsGlitching] = React.useState(false);
15    const [displayText, setDisplayText] = React.useState(words[0] || "");
16 
17    const glitchChars = "!<>-_\\/[]{}—=+*^?#________";
18 
19    React.useEffect(() => {
20      const timer = setInterval(() => {
21        setIsGlitching(true);
22 
23        const nextIndex = (currentIndex + 1) % words.length;
24        const targetWord = words[nextIndex] || "";
25        const iterations = 10;
26        let iteration = 0;
27 
28        const glitchInterval = setInterval(() => {
29          setDisplayText(
30            targetWord
31              .split("")
32              .map((char, i) => {
33                if (i < iteration) return char;
34                return glitchChars[
35                  Math.floor(Math.random() * glitchChars.length)
36                ];
37              })
38              .join(""),
39          );
40 
41          iteration += 1;
42          if (iteration > targetWord.length) {
43            clearInterval(glitchInterval);
44            setDisplayText(targetWord);
45            setCurrentIndex(nextIndex);
46            setIsGlitching(false);
47          }
48        }, glitchDuration / iterations);
49      }, interval);
50 
51      return () => clearInterval(timer);
52    }, [currentIndex, words, interval, glitchDuration]);
53 
54    return (
55      <span
56        ref={ref}
57        className={cn(
58          "inline-block font-mono",
59          isGlitching && "text-primary",
60          className,
61        )}
62      >
63        {displayText}
64      </span>
65    );
66  },
67);
68GlitchText.displayName = "GlitchText";
69 
70export { GlitchText };