Texto que se descifra

"use client";

/**
 * Texto que se descifra: las letras cambian al azar y se fijan de izquierda a derecha. Se activa al montarse, al entrar en pantalla o al pasar el puntero.
 * Usa una fuente monoespaciada para que el ancho no cambie mientras se mezcla. Con movimiento reducido muestra el texto final.
 *
 *   <ScrambleText text="Acceso concedido" trigger="hover" />
 */

import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";

export type ScrambleTextProps = {
  text: string;
  /** Cuándo se descifra: al montar, al entrar en pantalla o al pasar el puntero (también al montar). */
  trigger?: "mount" | "view" | "hover";
  /** Duración en milisegundos. */
  duration?: number;
  /** Caracteres que se usan para mezclar. */
  charset?: string;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcsc-root { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-ligatures: none; white-space: pre-wrap; }
.gcsc-mixed { opacity: .55; }
`;

export function ScrambleText({ text, trigger = "mount", duration = 1100, charset = "!<>-_\\/[]{}—=+*^?#01", className, style }: ScrambleTextProps) {
  const [frame, setFrame] = useState({ solved: text.length, noise: "" });
  const rootRef = useRef<HTMLSpanElement>(null);
  const raf = useRef(0);

  const run = useCallback(() => {
    cancelAnimationFrame(raf.current);
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setFrame({ solved: text.length, noise: "" }); return; }
    const start = performance.now();
    const tick = (now: number) => {
      const progress = Math.min(1, (now - start) / duration);
      const solved = Math.floor(progress * text.length);
      const noise = Array.from(text.slice(solved), (char) => (char === " " ? " " : charset[Math.floor(Math.random() * charset.length)])).join("");
      setFrame({ solved, noise });
      if (progress < 1) raf.current = requestAnimationFrame(tick);
      else setFrame({ solved: text.length, noise: "" });
    };
    raf.current = requestAnimationFrame(tick);
  }, [text, duration, charset]);

  useEffect(() => {
    const element = rootRef.current;
    if (trigger === "view" && element) {
      const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { observer.disconnect(); run(); } }, { threshold: 0.5 });
      observer.observe(element);
      return () => { observer.disconnect(); cancelAnimationFrame(raf.current); };
    }
    const start = requestAnimationFrame(run);
    return () => { cancelAnimationFrame(start); cancelAnimationFrame(raf.current); };
  }, [trigger, run]);

  return (
    <>
      <style>{CSS}</style>
      <span ref={rootRef} className={["gcsc-root", className].filter(Boolean).join(" ")} style={style} aria-label={text} onPointerEnter={trigger === "hover" ? run : undefined}>
        <span aria-hidden="true">
          {text.slice(0, frame.solved)}
          <span className="gcsc-mixed">{frame.noise}</span>
        </span>
      </span>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/texto-descifrado

import { ScrambleText } from "./scramble-text";

export default function Ejemplo() {
  return <ScrambleText trigger="mount" text="Ejemplo" />;
}