"use client";

import { useEffect, useRef, useState } from "react";

const TARGET = "DECODING THE FUTURE";
const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&@$*";

export function ScrambleText() {
  const [text, setText] = useState(TARGET);
  const frame = useRef(0);

  useEffect(() => {
    let raf = 0;
    let revealed = 0;
    let tick = 0;

    const run = () => {
      tick++;
      // reveal one more character every 3 frames
      if (tick % 3 === 0 && revealed < TARGET.length) revealed++;

      const next = TARGET.split("")
        .map((ch, i) => {
          if (ch === " ") return " ";
          if (i < revealed) return ch;
          return GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
        })
        .join("");
      setText(next);

      if (revealed >= TARGET.length) {
        // pause, then restart the scramble loop
        frame.current = window.setTimeout(() => {
          revealed = 0;
          tick = 0;
          raf = requestAnimationFrame(run);
        }, 1600);
        return;
      }
      raf = requestAnimationFrame(run);
    };

    raf = requestAnimationFrame(run);
    return () => {
      cancelAnimationFrame(raf);
      clearTimeout(frame.current);
    };
  }, []);

  return (
    <div className="grid min-h-[240px] place-items-center bg-[#F4F3EF] p-16">
      <div className="text-center">
        <div
          className="font-mono text-[24px] font-medium tracking-[0.08em] text-[#111111] sm:text-[34px]"
          aria-label={TARGET}
        >
          {text}
        </div>
        <div className="mt-4 font-mono text-[10px] uppercase tracking-[0.2em] text-[#6B6B66]">
          self-resetting scramble
        </div>
      </div>
    </div>
  );
}
Scramble Text
