Hacker Text

1"use client";
2 
3import { useEffect } from "react";
4 
5import { Bebas_Neue } from "next/font/google";
6 
7import { cn } from "@/lib/utils";
8 
9const bebas = Bebas_Neue({ subsets: ["latin"], weight: ["400"] });
10 
11export const HackerText = ({
12  text,
13  className,
14}: {
15  text: string;
16  className?: string;
17}) => {
18  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
19 
20  useEffect(() => {
21    const textElement = document.getElementById("text");
22    let interval: NodeJS.Timeout | null = null;
23    let timeout: NodeJS.Timeout | null = null;
24 
25    const scrambleText = (target: HTMLElement) => {
26      let iteration = 0;
27 
28      clearInterval(interval as NodeJS.Timeout);
29 
30      interval = setInterval(() => {
31        if (!target.dataset.value) return;
32 
33        target.innerText = target.innerText
34          .split("")
35          .map((letter, index) => {
36            if (index < iteration) {
37              return target.dataset.value![index];
38            }
39            return letters[Math.floor(Math.random() * 26)];
40          })
41          .join("");
42 
43        if (iteration >= target.dataset.value.length) {
44          clearInterval(interval as NodeJS.Timeout);
45        }
46 
47        iteration += 1 / 3;
48      }, 30);
49    };
50 
51    const applyEffect = () => {
52      if (window.matchMedia("(min-width: 768px)").matches) {
53        // For non-mobile devices
54        if (textElement) {
55          textElement.addEventListener("mouseover", (event) => {
56            const target = event.target as HTMLElement;
57            scrambleText(target);
58          });
59        }
60      }
61      // Run the effect after 600ms on page load for all devices
62      if (textElement) {
63        timeout = setTimeout(() => {
64          scrambleText(textElement);
65        }, 600);
66      }
67    };
68 
69    applyEffect();
70 
71    return () => {
72      if (textElement && window.matchMedia("(min-width: 768px)").matches) {
73        textElement.removeEventListener("mouseover", (event) => {
74          const target = event.target as HTMLElement;
75          scrambleText(target);
76        });
77      }
78      if (interval) {
79        clearInterval(interval);
80      }
81      if (timeout) {
82        clearTimeout(timeout);
83      }
84    };
85  }, [letters]);
86  return (
87    <span
88      id="text"
89      data-value={text}
90      className={cn("text-4xl uppercase", bebas.className, className)}
91    >
92      {text}
93    </span>
94  );
95};