Text Scramble

A hover text treatment that rapidly cycles characters before resolving.

"use client";

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

const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

export default function ScrambleText() {
  const text = "Scramble";
  const [display, setDisplay] = useState(text);
  const intervalRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, []);

function scramble() {
    if (intervalRef.current) clearInterval(intervalRef.current);

let iteration = 0;

intervalRef.current = setInterval(() => {
      setDisplay(
        text
          .split("")
          .map((character, index) => {
            if (character === " ") return " ";
            if (index < iteration) return text[index];
            return CHARS[Math.floor(Math.random() * CHARS.length)] ?? character;
          })
          .join("")
      );

iteration += 0.4;

if (iteration >= text.length) {
        setDisplay(text);
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    }, 40);
  }

return (
    <span
      onPointerEnter={scramble}
      style={{
        color: "#ffffff",
        cursor: "default",
        font: "800 clamp(3rem, 9vw, 8rem)/0.95 system-ui",
        letterSpacing: "-0.04em"
      }}
    >
      {display}
    </span>
  );
}