Motion Text Scramble

"use client";
import { useState, useEffect } from "react";

const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

export default function MotionText({ text = "Hello World" }) {
  const [display, setDisplay] = useState(text);

  const scramble = () => {
    let frame = 0;
    const totalFrames = text.length * 3;
    const interval = setInterval(() => {
      frame++;
      const resolved = Math.floor((frame / totalFrames) * text.length);
      setDisplay(
        text.split("").map((char, i) =>
          i < resolved ? char : CHARS[Math.floor(Math.random() * CHARS.length)]
        ).join("")
      );
      if (frame >= totalFrames) clearInterval(interval);
    }, 30);
  };

  useEffect(() => { scramble(); }, []);

  return (
    <div onClick={scramble} style={{ cursor: "pointer", fontFamily: "monospace" }}>
      {display}
    </div>
  );
}