Matrix Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Matrix Text
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { useCallback, useEffect, useMemo, useState } from "react";
15import { cn } from "@/lib/utils";
16 
17interface LetterState {
18  char: string;
19  isMatrix: boolean;
20  isSpace: boolean;
21}
22 
23interface MatrixTextProps {
24  text?: string;
25  className?: string;
26  initialDelay?: number;
27  letterAnimationDuration?: number;
28  letterInterval?: number;
29}
30 
31const MatrixText = ({
32  text = "HelloWorld!",
33  className,
34  initialDelay = 200,
35  letterAnimationDuration = 500,
36  letterInterval = 100,
37}: MatrixTextProps) => {
38  const [letters, setLetters] = useState<LetterState[]>(() =>
39    text.split("").map((char) => ({
40      char,
41      isMatrix: false,
42      isSpace: char === " ",
43    }))
44  );
45  const [isAnimating, setIsAnimating] = useState(false);
46 
47  const getRandomChar = useCallback(
48    () => (Math.random() > 0.5 ? "1" : "0"),
49    []
50  );
51 
52  const animateLetter = useCallback(
53    (index: number) => {
54      if (index >= text.length) return;
55 
56      requestAnimationFrame(() => {
57        setLetters((prev) => {
58          const newLetters = [...prev];
59          if (!newLetters[index].isSpace) {
60            newLetters[index] = {
61              ...newLetters[index],
62              char: getRandomChar(),
63              isMatrix: true,
64            };
65          }
66          return newLetters;
67        });
68 
69        setTimeout(() => {
70          setLetters((prev) => {
71            const newLetters = [...prev];
72            newLetters[index] = {
73              ...newLetters[index],
74              char: text[index],
75              isMatrix: false,
76            };
77            return newLetters;
78          });
79        }, letterAnimationDuration);
80      });
81    },
82    [getRandomChar, text, letterAnimationDuration]
83  );
84 
85  const startAnimation = useCallback(() => {
86    if (isAnimating) return;
87 
88    setIsAnimating(true);
89    let currentIndex = 0;
90 
91    const animate = () => {
92      if (currentIndex >= text.length) {
93        setIsAnimating(false);
94        return;
95      }
96 
97      animateLetter(currentIndex);
98      currentIndex++;
99      setTimeout(animate, letterInterval);
100    };
101 
102    animate();
103  }, [animateLetter, text, isAnimating, letterInterval]);
104 
105  useEffect(() => {
106    const timer = setTimeout(startAnimation, initialDelay);
107// … truncated