Hyper Text

1"use client";
2 
3import { cn } from "@workspace/ui/lib/utils";
4import { useEffect, useRef, useState } from "react";
5 
6interface HyperTextProps {
7    className?: string;
8    duration?: number;
9    text: string;
10    animateOnLoad?: boolean;
11}
12 
13const alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
14 
15export const HyperText = ({
16    className,
17    duration = 800,
18    text,
19    animateOnLoad = true,
20}: HyperTextProps) => {
21    const [displayText, setDisplayText] = useState(text.split(""));
22    const [trigger, setTrigger] = useState(false);
23    const iterations = useRef(0);
24    const isFirstRender = useRef(true);
25 
26    const triggerAnimation = () => {
27        iterations.current = 0;
28        setTrigger(true);
29    };
30 
31    useEffect(() => {
32        const interval = setInterval(() => {
33            if (!animateOnLoad && isFirstRender.current) {
34                clearInterval(interval);
35                isFirstRender.current = false;
36                return;
37            }
38            if (iterations.current < text.length) {
39                setDisplayText((t) =>
40                    t.map((l, i) =>
41                        l === " "
42                            ? l
43                            : i <= iterations.current
44                                ? text[i] ?? ""
45                                : alphabets[Math.floor(Math.random() * alphabets.length)]
46                    )
47                );
48                iterations.current = iterations.current + 0.1;
49            } else {
50                setTrigger(false);
51                clearInterval(interval);
52            }
53        }, duration / (text.length * 10));
54        // Clean up interval on unmount
55        return () => clearInterval(interval);
56    }, [text, duration, trigger, animateOnLoad]);
57 
58    return (
59        <div
60            className={cn("flex cursor-default overflow-hidden py-2 font-mono", className)}
61            onMouseEnter={triggerAnimation}
62        >
63            {displayText.map((letter, i) => (
64                <span key={i} className="min-w-[0.1em]">
65                    {letter}
66                </span>
67            ))}
68        </div>
69    );
70};