src/components/ScrambleText.jsx

import { useState, useEffect } from "react";

const CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;':,./<>?";

export default function ScrambleText({ text, duration = 1500, className = "" }) {
  const [displayText, setDisplayText] = useState("");

  useEffect(() => {
    let iteration = 0;
    const maxIterations = text.length;
    let interval = null;

    const scramble = () => {
      setDisplayText(
        text.split("").map((char, index) => {
          if (index < iteration) return text[index];
          return CHARACTERS[Math.floor(Math.random() * CHARACTERS.length)];
        }).join("")
      );

      if (iteration >= maxIterations) clearInterval(interval);
      iteration += 1 / (duration / 100); 
    };

    interval = setInterval(scramble, 30);
    return () => clearInterval(interval);
  }, [text, duration]);

  return <span className={className}>{displayText}</span>;
}