cyber-glitch-text

1"use client";
2 
3import React, { useEffect, useRef, useState } from "react";
4import { cn } from "@/lib/utils";
5import { motion } from "framer-motion";
6 
7const CHARS = "!<>-_\\/[]{}—=+*^?#_";
8 
9interface CyberGlitchTextProps {
10  text: string;
11  className?: string;
12  scrambleOnMount?: boolean;
13  scrambleDuration?: number;
14}
15 
16export function CyberGlitchText({
17  text,
18  className,
19  scrambleOnMount = true,
20  scrambleDuration = 40,
21}: CyberGlitchTextProps) {
22  const [displayText, setDisplayText] = useState(text);
23  const [isHovered, setIsHovered] = useState(false);
24  const intervalRef = useRef<NodeJS.Timeout | null>(null);
25 
26  const scramble = () => {
27    let iteration = 0;
28    clearInterval(intervalRef.current as NodeJS.Timeout);
29 
30    intervalRef.current = setInterval(() => {
31      setDisplayText((currentText) =>
32        text
33          .split("")
34          .map((letter, index) => {
35            if (index < iteration) {
36              return text[index];
37            }
38            return CHARS[Math.floor(Math.random() * CHARS.length)];
39          })
40          .join("")
41      );
42 
43      if (iteration >= text.length) {
44        clearInterval(intervalRef.current as NodeJS.Timeout);
45      }
46 
47      iteration += 1 / 3;
48    }, scrambleDuration);
49  };
50 
51  useEffect(() => {
52    if (scrambleOnMount) {
53      scramble();
54    }
55    return () => clearInterval(intervalRef.current as NodeJS.Timeout);
56  }, [text, scrambleOnMount]);
57 
58  return (
59    <div
60      className={cn("relative inline-block group", className)}
61      onMouseEnter={() => {
62        setIsHovered(true);
63        scramble();
64      }}
65      onMouseLeave={() => setIsHovered(false)}
66    >
67      {/* Base Text */}
68      <span className="relative z-10">{displayText}</span>
69 
70      {/* Glitch Layers for Chromatic Aberration */}
71      {isHovered && (
72        <>
73          <motion.span
74            className="absolute top-0 left-[-2px] z-0 text-red-500 opacity-70 mix-blend-screen"
75            initial={{ x: 0, opacity: 0 }}
76            animate={{ x: [-2, 2, -1, 3, 0], opacity: [0, 0.8, 0.4, 0.9, 0] }}
77            transition={{ duration: 0.2, repeat: Infinity, repeatType: "mirror" }}
78            aria-hidden="true"
79          >
80            {displayText}
81          </motion.span>
82          <motion.span
83            className="absolute top-0 left-[2px] z-0 text-blue-500 opacity-70 mix-blend-screen"
84            initial={{ x: 0, opacity: 0 }}
85            animate={{ x: [2, -2, 1, -3, 0], opacity: [0, 0.8, 0.4, 0.9, 0] }}
86// … truncated