1  import React, { useState, useEffect } from 'react';
 2  import './LoadingAnimation.css';
 3  
 4  const characters = '0123456789abcdefABCDEF#';
 5  
 6  export const LoadingAnimation: React.FC<{ width?: number }> = ({ width = 80 }) => {
 7    const [frame, setFrame] = useState(0);
 8  
 9    useEffect(() => {
10      const interval = setInterval(() => {
11        setFrame(prev => prev + 1);
12      }, 50);
13  
14      return () => clearInterval(interval);
15    }, []);
16  
17    const generateRow = (reverse: boolean) => {
18      const chars: React.ReactElement[] = [];
19      for (let i = 0; i < width; i++) {
20        const pos = reverse ? 1 - i / (width - 1) : i / (width - 1);
21        const r = Math.floor(255 * (1 - pos) + 255 * pos);
22        const g = Math.floor(69 * (1 - pos) + 140 * pos);
23        const b = 0;
24  
25        const randomChar = characters[Math.floor(Math.random() * characters.length)];
26  
27        chars.push(
28          <span
29            key={i}
30            style={{ color: `rgb(${r}, ${g}, ${b})` }}
31          >
32            {randomChar}
33          </span>
34        );
35      }
36      return chars;
37    };
38  
39    return (
40      <div className="loading-animation" data-frame={frame}>
41        <div className="gradient-row">{generateRow(false)}</div>
42        <div className="gradient-row">{generateRow(true)}</div>
43        <div className="gradient-row">{generateRow(false)}</div>
44      </div>
45    );
46  };