Scramble Text

hover x decode

Letters scramble through glyphs on hover, then resolve to the real word. Great for headings and links.

hoverdecodemonospace

Code

scramble-text.tsx

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

export function ScrambleText({ text = "SCRAMBLE" }: { text?: string }) {
  const [out, setOut] = useState(text);
  const raf = useRef<number | null>(null);
  function run() {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#$%&*";
    let frame = 0; const total = 18;
    if (raf.current) cancelAnimationFrame(raf.current);
    const tick = () => {
      setOut(text.split("").map((c, i) =>
        frame / total > i / text.length ? c : chars[Math.floor(Math.random() * chars.length)]
      ).join(""));
      frame++;
      if (frame <= total + text.length) raf.current = requestAnimationFrame(tick);
      else setOut(text);
    };
    tick();
  }
  return <button onMouseEnter={run} className="font-mono tracking-widest">{out}</button>;
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Scramble Text component and wire it to my accent.”