AI generated

matrix.tsx

import React, { useEffect, useRef, useState } from 'react'

const MatrixConsole: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [terminalLines, setTerminalLines] = useState<string[]>([])
  const [isTyping, setIsTyping] = useState(false)
  const terminalRef = useRef<HTMLDivElement>(null)
  const [isHacked, setIsHacked] = useState(false)
  const [showEasterEgg, setShowEasterEgg] = useState(false)
  const [matrixMode, setMatrixMode] = useState<
    'green' | 'blue' | 'red' | 'rainbow'
  >('green')
  const [showRedPill, setShowRedPill] = useState(false)
  const [showQuotes, setShowQuotes] = useState(false)
  const [currentQuote, setCurrentQuote] = useState(0)

  // Predefined hacker commands and responses
  const hackerCommands = [
    {
      command: 'nmap -sS -sV 192.168.1.1',
      response: [
        'Starting Nmap scan...',
        'PORT     STATE SERVICE VERSION',
        '22/tcp   open  ssh     OpenSSH 7.6p1',
        '80/tcp   open  http    Apache 2.4.29',
        '443/tcp  open  https   OpenSSL 1.1.1',
        'Scan completed in 3.45s',
      ],
    },
    {
      command: 'ssh [email protected]',
      response: [
        'Connection established',
        'Last login: Thu Jun 15 03:14:22 2023',
        'root@server:~#',
      ],
    },
    {
      command: 'sudo apt-get update',
      response: [
        'Reading package lists... Done',
        'Building dependency tree... Done',
        'All packages are up to date',
      ],
    },
    {
      command: 'cat /etc/passwd',
      response: [
        'root:x:0:0:root:/root:/bin/bash',
        'daemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologin',
        'bin:x:2:2:bin:/bin:/usr/sbin/nologin',
        '...truncated...',
      ],
    },
    {
      command: 'ps aux | grep root',
      response: [
        'root      1234  0.0  0.1 236496 28596 ?        Ss   Jun15   0:23 /sbin/init',
        'root      2345  0.0  0.0  72784  5512 ?        Ss   Jun15   0:00 /usr/sbin/sshd',
        'root      3456  0.0  0.1 107896 26304 ?        Ss   Jun15   0:02 /usr/sbin/apache2',
      ],
    },
    {
      command: 'find / -name "*.conf" | grep security',
      response: [
        '/etc/security/access.conf',
        '/etc/security/group.conf',
        '/etc/security/limits.conf',
        '/usr/share/security/default.conf',
      ],
    },
    {
      command: 'netstat -tuln',
      response: [
        'Active Internet connections (only servers)',
        'Proto Recv-Q Send-Q Local Address           Foreign Address         State',
        'tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN',
        'tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN',
      ],
    },
    {
      command: 'python3 exploit.py --target 192.168.1.100',
      response: [
        '[+] Connecting to target...',
        '[+] Checking vulnerabilities...',
        '[+] CVE-2023-1234 found!',
        '[+] Exploiting vulnerability...',
        '[+] Shell access granted!',
      ],
    },
    {
      command: 'sudo tcpdump -i eth0',
      response: [
        'tcpdump: verbose output suppressed, use -v for full protocol decode',
        '14:23:15.482539 IP 192.168.1.100.56789 > 192.168.1.1.80: TCP 1420:2880',
        '14:23:15.482571 IP 192.168.1.1.80 > 192.168.1.100.56789: TCP 1:1460',
        '14:23:15.482601 IP 192.168.1.100.56790 > 192.168.1.1.443: TLSv1.2',
      ],
    },
    {
      command: 'grep -r "password" /var/www/',
      response: [
        '/var/www/html/config.php:$password = "supersecret";',
        '/var/www/html/admin/login.php:if($password === $stored_hash) {',
        '/var/www/html/includes/db.php:$db_password = getenv("DB_PASSWORD");',
      ],
    },
    {
      command: 'docker ps',
      response: [
        'CONTAINER ID   IMAGE          COMMAND                  CREATED        STATUS        PORTS                  NAMES',
        'a1b2c3d4e5f6   nginx:latest   "/docker-entrypoint.…"   2 hours ago    Up 2 hours    0.0.0.0:80->80/tcp     web-server',
        'f6e5d4c3b2a1   mysql:5.7     "docker-entrypoint.s…"   2 hours ago    Up 2 hours    0.0.0.0:3306->3306/tcp  database',
      ],
    },
    {
      command: 'git log --oneline',
      response: [
        'a1b2c3d Fix security vulnerability in login form',
        'e5f6g7h Update dependencies',
        'i9j0k1l Implement new encryption algorithm',
        'm2n3o4p Initial commit',
      ],
    },
    {
      command: 'sudo ./brute_force.sh --target auth.example.com',
      response: [
        '[+] Starting brute force attack...',
        '[+] Testing common passwords...',
        '[+] Trying: admin123... Failed',
        '[+] Trying: password123... Failed',
        '[+] Trying: qwerty... Failed',
        '[+] Trying: letmein... SUCCESS!',
        '[+] Credentials found: admin:letmein',
        '[+] Access granted to auth.example.com',
      ],
    },
    {
      command: 'sudo rm -rf --no-preserve-root /',
      response: [
        '[!] WARNING: Destructive command detected',
        '[!] System protection engaged',
        '[!] Command blocked by security policy',
        '[!] Incident reported to system administrator',
      ],
    },
    {
      command: 'sudo ./ransomware.py --encrypt /home',
      response: [
        '[+] Initializing encryption module...',
        '[+] Generating 4096-bit RSA key pair...',
        '[+] Scanning target directory...',
        '[+] Found 1,342 files to encrypt',
        '[+] Encrypting: /home/user/Documents...',
        '[+] Encrypting: /home/user/Pictures...',
        '[+] Encryption complete',
        '[+] Ransom note created: /home/DECRYPT_INSTRUCTIONS.txt',
      ],
    },
  ]

  // System messages that appear randomly
  const systemMessages = [
    '[SYSTEM] Memory usage: 67%',
    '[SYSTEM] CPU load: 42%',
    '[SYSTEM] Network traffic spike detected',
    '[SYSTEM] New connection from 185.27.134.29',
    '[WARNING] Unusual activity detected in /var/log',
    '[ALERT] Failed login attempt from 103.245.88.17',
    '[SYSTEM] Database connection pool: 12/20',
    '[WARNING] Disk usage at 89%',
    '[SYSTEM] Firewall updated',
    '[ALERT] Possible intrusion attempt blocked',
    '[CRITICAL] Unauthorized access detected in admin panel',
    '[ALERT] Brute force attack in progress',
    '[WARNING] Suspicious file uploaded to /tmp',
    '[CRITICAL] Firewall breach on port 22',
    '[ALERT] Data exfiltration detected on port 443',
    '[WARNING] Multiple failed sudo attempts',
    '[CRITICAL] Rootkit detected in kernel module',
    '[ALERT] Unusual outbound traffic to 91.243.85.12',
    '[WARNING] SSH keys compromised',
    '[CRITICAL] System integrity check failed',
  ]

  // Hack messages for the "system getting hacked" effect
  const hackMessages = [
    '[CRITICAL] Security breach detected!',
    '[ALERT] Firewall bypassed from 176.32.45.122',
    '[CRITICAL] Root access compromised',
    '[ALERT] Encryption keys stolen',
    '[CRITICAL] Database dump in progress',
    '[ALERT] Backdoor installed in system32',
    '[CRITICAL] Admin credentials compromised',
    '[ALERT] Remote access trojan detected',
    '[CRITICAL] System files being modified',
    '[ALERT] Memory injection attack detected',
    '[CRITICAL] Kernel exploit successful',
    '[ALERT] Command and control server connected',
    '[CRITICAL] User data being exfiltrated',
    '[ALERT] Ransomware deployment detected',
    '[CRITICAL] System shutdown imminent',
  ]

  // Konami code sequence
  const konamiCode = [
    'ArrowUp',
    'ArrowUp',
    'ArrowDown',
    'ArrowDown',
    'ArrowLeft',
    'ArrowRight',
    'ArrowLeft',
    'ArrowRight',
    'b',
    'a',
  ]
  const [konamiSequence, setKonamiSequence] = useState<string[]>([])

  // Add Matrix movie quotes
  const matrixQuotes = [
    'I know kung fu.',
    'There is no spoon.',
    'Unfortunately, no one can be told what the Matrix is. You have to see it for yourself.',
    'You take the blue pill, the story ends. You take the red pill, you stay in Wonderland.',
    'What is real? How do you define real?',
    'The Matrix is everywhere. It is all around us.',
    "Never send a human to do a machine's job.",
    'Welcome to the desert of the real.',
    "I'm trying to free your mind, Neo. But I can only show you the door. You're the one that has to walk through it.",
    "You've been living in a dream world, Neo.",
    'Fate, it seems, is not without a sense of irony.',
    'The Matrix is a system, Neo. That system is our enemy.',
    'Dodge this.',
    'Human beings are a disease, a cancer of this planet.',
    "Remember, all I'm offering is the truth. Nothing more.",
  ]

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    const fontSize = 14
    const columns = Math.floor(canvas.width / fontSize)

    // Array to store the y position of each column
    const drops: number[] = Array(columns).fill(1)

    // Characters to display (Matrix style)
    const chars =
      'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'

    const draw = () => {
      // Semi-transparent black background to create trail effect
      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      // Change color based on mode
      if (matrixMode === 'green') {
        ctx.fillStyle = isHacked
          ? Math.random() > 0.5
            ? '#FF0000'
            : '#0F0'
          : '#0F0'
      } else if (matrixMode === 'blue') {
        ctx.fillStyle = '#00BFFF'
      } else if (matrixMode === 'red') {
        ctx.fillStyle = '#FF0000'
      } else if (matrixMode === 'rainbow') {
        // Rainbow effect - different color for each character
        const hue = Math.floor(Math.random() * 360)
        ctx.fillStyle = `hsl(${hue}, 100%, 50%)`
      }

      ctx.font = `${fontSize}px monospace`

      for (let i = 0; i < drops.length; i++) {
        // Random character
        const text = chars[Math.floor(Math.random() * chars.length)]

        // For rainbow mode, each character gets its own color
        if (matrixMode === 'rainbow') {
          const hue = (i * 5) % 360
          ctx.fillStyle = `hsl(${hue}, 100%, 50%)`
        }

        // x = i * fontSize, y = drops[i] * fontSize
        ctx.fillText(text, i * fontSize, drops[i] * fontSize)

        // Randomly reset the drop position to create the effect
        // Make drops faster when hacked or in red pill mode
        const resetChance = isHacked || matrixMode === 'red' ? 0.95 : 0.975
        if (
          drops[i] * fontSize > canvas.height &&
          Math.random() > resetChance
        ) {
          drops[i] = 0
        }

        // Move the drop down - faster when hacked or in special modes
        const speedFactor =
          isHacked || matrixMode !== 'green' ? (Math.random() > 0.5 ? 2 : 1) : 1
        drops[i] += speedFactor
      }
    }

    const interval = setInterval(
      draw,
      matrixMode === 'red' ? 20 : matrixMode === 'rainbow' ? 15 : 33,
    )

    const handleResize = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

    window.addEventListener('resize', handleResize)

    return () => {
      clearInterval(interval)
      window.removeEventListener('resize', handleResize)
    }
  }, [isHacked, matrixMode])

  // Initialize terminal with some content
  useEffect(() => {
    setTerminalLines([
      'System initialized',
      'Establishing secure connection...',
      'Welcome to the Matrix',
      'Type "help" for available commands',
    ])

    // Start the hacker simulation
    startHackerSimulation()
  }, [])

  // Auto-scroll to the bottom of the terminal
  useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
    }
  }, [terminalLines])

  // Konami code listener
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Convert key to lowercase for case insensitivity
      const key = e.key === 'B' || e.key === 'A' ? e.key.toLowerCase() : e.key

      // Add the key to the sequence
      const newSequence = [...konamiSequence, key]

      // Only keep the last N keys where N is the length of the Konami code
      if (newSequence.length > konamiCode.length) {
        newSequence.shift()
      }

      setKonamiSequence(newSequence)

      // Check if the sequence matches the Konami code
      if (
        newSequence.length === konamiCode.length &&
        newSequence.every((k, i) => k === konamiCode[i])
      ) {
        activateEasterEgg()
      }
    }

    window.addEventListener('keydown', handleKeyDown)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [konamiSequence])

  // Activate the Easter Egg
  const activateEasterEgg = () => {
    setShowEasterEgg(true)

    // Add special messages to the terminal
    setTerminalLines((prev) => [
      ...prev,
      '[SYSTEM] Konami code detected!',
      '[SYSTEM] Unlocking secret hacker mode...',
      '[SYSTEM] You are now officially a hacker!',
    ])

    // Make the matrix rain faster and change colors temporarily
    setIsHacked(true)

    // Hide the easter egg modal after a few seconds
    setTimeout(() => {
      setShowEasterEgg(false)
      setIsHacked(false)
    }, 8000)
  }

  // Simulate typing character by character
  const typeCommand = async (command: string) => {
    setIsTyping(true)
    let currentCommand = ''

    for (let i = 0; i < command.length; i++) {
      currentCommand += command[i]
      setTerminalLines((prev) => [...prev.slice(0, -1), `${currentCommand}_`])

      // Random typing speed between 10ms and 50ms
      // Faster when hacked
      await new Promise((resolve) =>
        setTimeout(
          resolve,
          isHacked ? Math.random() * 20 + 5 : Math.random() * 40 + 10,
        ),
      )
    }

    // Remove the cursor
    setTerminalLines((prev) => [...prev.slice(0, -1), command])
    setIsTyping(false)

    return command
  }

  // Display response line by line with delays
  const showResponse = async (response: string[]) => {
    for (const line of response) {
      setTerminalLines((prev) => [...prev, line])
      // Random delay between 100ms and 300ms
      // Faster when hacked
      await new Promise((resolve) =>
        setTimeout(
          resolve,
          isHacked ? Math.random() * 100 + 50 : Math.random() * 200 + 100,
        ),
      )
    }
  }

  // Simulate system being hacked
  const simulateHack = async () => {
    setIsHacked(true)

    // Show hack messages
    for (let i = 0; i < 8; i++) {
      const randomHackMessage =
        hackMessages[Math.floor(Math.random() * hackMessages.length)]
      setTerminalLines((prev) => [...prev, randomHackMessage])
      await new Promise((resolve) =>
        setTimeout(resolve, Math.random() * 300 + 100),
      )
    }

    // Simulate screen glitching
    const terminalElement = terminalRef.current
    if (terminalElement) {
      terminalElement.classList.add('glitch')
      setTimeout(() => {
        terminalElement.classList.remove('glitch')
      }, 2000)
    }

    // Add more hack messages
    for (let i = 0; i < 5; i++) {
      const randomHackMessage =
        hackMessages[Math.floor(Math.random() * hackMessages.length)]
      setTerminalLines((prev) => [...prev, randomHackMessage])
      await new Promise((resolve) =>
        setTimeout(resolve, Math.random() * 300 + 100),
      )
    }

    // Return to normal after some time
    await new Promise((resolve) => setTimeout(resolve, 5000))
    setIsHacked(false)
  }

  // Main simulation function
  const startHackerSimulation = async () => {
    // Wait a bit before starting
    await new Promise((resolve) => setTimeout(resolve, 2000))

    while (true) {
      // Randomly decide whether to show a system message
      if (Math.random() < 0.3) {
        const randomMessage =
          systemMessages[Math.floor(Math.random() * systemMessages.length)]
        setTerminalLines((prev) => [...prev, randomMessage])
        await new Promise((resolve) =>
          setTimeout(resolve, Math.random() * 1000 + 500),
        )
      }

      // Randomly trigger hack simulation (about 10% chance)
      if (Math.random() < 0.1) {
        await simulateHack()
      }

      // Select a random command
      const commandObj =
        hackerCommands[Math.floor(Math.random() * hackerCommands.length)]

      // Add cursor for typing effect
      setTerminalLines((prev) => [...prev, '_'])

      // Type the command
      await typeCommand(commandObj.command)

      // Show the response
      await showResponse(commandObj.response)

      // Wait between commands
      await new Promise((resolve) =>
        setTimeout(resolve, Math.random() * 2000 + 1000),
      )
    }
  }

  // Add new red pill Easter egg
  const activateRedPill = () => {
    setShowRedPill(true)
    setMatrixMode('red')

    setTerminalLines((prev) => [
      ...prev,
      '[MORPHEUS] You take the red pill - you stay in Wonderland...',
      '[MORPHEUS] And I show you how deep the rabbit-hole goes.',
    ])

    // Start showing Matrix quotes
    setShowQuotes(true)

    // Hide the red pill modal after some time
    setTimeout(() => {
      setShowRedPill(false)
      // Keep the red mode
    }, 5000)
  }

  // Add blue pill effect
  const activateBluePill = () => {
    setMatrixMode('blue')

    setTerminalLines((prev) => [
      ...prev,
      '[MORPHEUS] You take the blue pill - the story ends...',
      '[MORPHEUS] You wake up in your bed and believe whatever you want to believe.',
    ])

    // Return to normal after some time
    setTimeout(() => {
      setMatrixMode('green')
    }, 5000)
  }

  // Add rainbow mode
  const activateRainbowMode = () => {
    setMatrixMode('rainbow')

    setTerminalLines((prev) => [
      ...prev,
      '[SYSTEM] Rainbow mode activated!',
      '[SYSTEM] The Matrix has you...',
    ])
  }

  // Display Matrix quotes periodically
  useEffect(() => {
    if (!showQuotes) return

    const quoteInterval = setInterval(() => {
      setTerminalLines((prev) => [
        ...prev,
        `[MATRIX] ${matrixQuotes[currentQuote]}`,
      ])

      setCurrentQuote((prev) => (prev + 1) % matrixQuotes.length)
    }, 8000)

    return () => clearInterval(quoteInterval)
  }, [showQuotes, currentQuote])

  // Add keyboard shortcuts for different modes
  useEffect(() => {
    const handleKeyPress = (e: KeyboardEvent) => {
      // Secret key combinations
      if (e.ctrlKey && e.key === 'r') {
        activateRedPill()
      } else if (e.ctrlKey && e.key === 'b') {
        activateBluePill()
      } else if (e.ctrlKey && e.key === 'g') {
        setMatrixMode('green')
      } else if (e.ctrlKey && e.key === 'p') {
        activateRainbowMode()
      } else if (e.key === 'Escape') {
        // Reset everything
        setMatrixMode('green')
        setShowQuotes(false)
      }
    }

    window.addEventListener('keydown', handleKeyPress)
    return () => window.removeEventListener('keydown', handleKeyPress)
  }, [])

  return (
    <div className="relative h-screen w-screen overflow-hidden bg-black">
      <canvas
        ref={canvasRef}
        className="absolute top-0 left-0 h-full w-full"
      ></canvas>
      <div className="relative z-10 flex h-full flex-col items-center justify-center">
        <div
          className={`max-h-[80vh] w-11/12 overflow-auto rounded-lg border ${
            matrixMode === 'red'
              ? 'border-red-500'
              : matrixMode === 'blue'
                ? 'border-blue-500'
                : matrixMode === 'rainbow'
                  ? 'animate-pulse border-purple-500'
                  : isHacked
                    ? 'animate-pulse border-red-500'
                    : 'border-green-500'
          } bg-black/70 p-6 shadow-lg ${
            matrixMode === 'red'
              ? 'shadow-red-500/40'
              : matrixMode === 'blue'
                ? 'shadow-blue-500/40'
                : matrixMode === 'rainbow'
                  ? 'shadow-purple-500/40'
                  : isHacked
                    ? 'shadow-red-500/40'
                    : 'shadow-green-500/20'
          } md:w-3/4 lg:w-1/2`}
        >
          <div
            className={`font-mono ${
              matrixMode === 'red'
                ? 'text-red-500'
                : matrixMode === 'blue'
                  ? 'text-blue-500'
                  : matrixMode === 'rainbow'
                    ? 'text-purple-500'
                    : isHacked
                      ? 'text-red-500'
                      : 'text-green-500'
            }`}
          >
            <h1
              className={`mb-4 border-b ${
                matrixMode === 'red'
                  ? 'border-red-500'
                  : matrixMode === 'blue'
                    ? 'border-blue-500'
                    : matrixMode === 'rainbow'
                      ? 'border-purple-500'
                      : isHacked
                        ? 'border-red-500'
                        : 'border-green-500'
              } pb-2 text-xl`}
            >
              Matrix Console{' '}
              {isHacked && (
                <span className="animate-pulse">- SECURITY BREACH</span>
              )}
              {matrixMode === 'red' && (
                <span className="animate-pulse"> - RED PILL ACTIVATED</span>
              )}
              {matrixMode === 'blue' && <span> - BLUE PILL ACTIVATED</span>}
              {matrixMode === 'rainbow' && (
                <span
                  className="animate-pulse"
                  style={{ color: `hsl(${Date.now() % 360}, 100%, 50%)` }}
                >
                  {' '}
                  - RAINBOW MODE
                </span>
              )}
            </h1>
            <div
              ref={terminalRef}
              className={`terminal-output max-h-[50vh] space-y-1 overflow-y-auto ${isHacked || matrixMode === 'red' ? 'glitch-text' : ''}`}
            >
              {terminalLines.map((line, index) => (
                <p
                  key={index}
                  className={
                    line.includes('[CRITICAL]')
                      ? 'animate-pulse font-bold text-red-500'
                      : line.includes('[ALERT]')
                        ? 'text-red-500'
                        : line.includes('[WARNING]')
                          ? 'text-yellow-500'
                          : line.includes('[MORPHEUS]')
                            ? 'font-bold text-blue-400'
                            : line.includes('[MATRIX]')
                              ? 'text-purple-400 italic'
                              : ''
                  }
                >
                  &gt; {line}
                </p>
              ))}
              {isTyping ? null : <p className="animate-pulse">&gt; _</p>}
            </div>
          </div>
        </div>

        {/* Add help text */}
        <div className="absolute bottom-4 left-4 text-xs text-gray-500">
          <p>
            Keyboard shortcuts: Ctrl+R (Red Pill), Ctrl+B (Blue Pill), Ctrl+G
            (Green), Ctrl+P (Rainbow), ESC (Reset)
          </p>
          <p>Konami Code: ↑↑↓↓←→←→BA</p>
        </div>
      </div>

      {/* Easter Egg */}
      {showEasterEgg && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
          <div className="animate-bounce text-center">
            <h2 className="mb-4 text-4xl font-bold text-green-500">
              Easter Egg Found!
            </h2>
            <p className="text-2xl text-white">
              You&apos;ve unlocked the secret Konami code!
            </p>
            <div className="mt-8 text-xl text-green-400">
              <p>↑↑↓↓←→←→BA</p>
              <p className="mt-4">You are now officially a hacker!</p>
            </div>
          </div>
        </div>
      )}

      {/* Red Pill Modal */}
      {showRedPill && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
          <div className="animate-pulse text-center">
            <h2 className="mb-4 text-4xl font-bold text-red-500">
              RED PILL ACTIVATED
            </h2>
            <p className="text-2xl text-white">
              Welcome to the desert of the real.
            </p>
            <div className="mt-8 text-xl text-red-400">
              <p className="mt-4">How deep does the rabbit hole go?</p>
            </div>
          </div>
        </div>
      )}

      {/* Add some CSS for glitch effects */}
      <style>{`
        .glitch {
          animation: glitch 0.5s infinite;
        }

        .glitch-text {
          text-shadow: ${
            matrixMode === 'red'
              ? '2px 2px 5px rgba(255, 0, 0, 0.7)'
              : isHacked
                ? '2px 2px 5px rgba(255, 0, 0, 0.7)'
                : 'none'
          };
        }

        @keyframes glitch {
          0% {
            transform: translate(0);
          }
          20% {
            transform: translate(-5px, 5px);
          }
          40% {
            transform: translate(-5px, -5px);
          }
          60% {
            transform: translate(5px, 5px);
          }
          80% {
            transform: translate(5px, -5px);
          }
          100% {
            transform: translate(0);
          }
        }
        
        @keyframes rainbow {
          0% { color: red; }
          14% { color: orange; }
          28% { color: yellow; }
          42% { color: green; }
          57% { color: blue; }
          71% { color: indigo; }
          85% { color: violet; }
          100% { color: red; }
        }
        
        .rainbow-text {
          animation: rainbow 5s infinite;
        }
      `}</style>
    </div>
  )
}

const App: React.FC = () => {
  return (
    <div className="App">
      <MatrixConsole />
    </div>
  )
}

export default App