Scramble Text

"use client";

import { useEffect, useState } from "react";

const CHARS = "!<>-_\\/[]{}—=+*^?#";

export function ScrambleText({ text = "MAROV STUDIO" }: { text?: string }) {
  const [display, setDisplay] = useState(text);

  useEffect(() => {
    let frame = 0;
    const id = window.setInterval(() => {
      frame += 1;
      const settled = Math.floor(frame / 3);
      if (settled > text.length + 8) frame = 0;
      setDisplay(
        text
          .split("")
          .map((char, i) => {
            if (char === " " || i < settled) return char;
            return CHARS[(i * 7 + frame * 5) % CHARS.length];
          })
          .join(""),
      );
    }, 50);
    return () => window.clearInterval(id);
  }, [text]);

  return (
    <p className="font-mono text-2xl font-bold tracking-wider">{display}</p>
  );
}