Text Scramble Effect for React

"use client";

import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

const DEFAULT_CHARS = "!@#$%^&*()_+-=[]{}|;:,.<>?";

interface TextScrambleProps {
  text: string;
  className?: string;
  chars?: string;
  trigger?: "inView" | "mount" | "hover";
  scrambleSpeed?: number;
  cursorClassName?: string;
  inViewThreshold?: number;
  onComplete?: () => void;
}

export function TextScramble({
  text,
  className,
  chars = DEFAULT_CHARS,
  trigger = "inView",
  scrambleSpeed = 0,
  cursorClassName,
  inViewThreshold = 0.3,
  onComplete,
}: TextScrambleProps) {
  const [display, setDisplay] = useState("");
  const [done, setDone] = useState(false);
  const ref = useRef<HTMLSpanElement>(null);
  const hasAnimatedRef = useRef(false);
  const [inView, setInView] = useState(trigger === "mount");
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    if (trigger !== "inView") {
      return;
    }
    const el = ref.current;
    if (!el) {
      return;
    }
    const obs = new IntersectionObserver(
      ([e]) => setInView(e?.isIntersecting ?? false),
      {
        threshold: inViewThreshold,
      },
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [trigger, inViewThreshold]);

  const shouldRun =
    trigger === "mount"
      ? true
      : trigger === "inView"
        ? inView && !hasAnimatedRef.current
        : hovered;

  useEffect(() => {
    if (!shouldRun) {
      return;
    }
    if (trigger === "inView" && hasAnimatedRef.current) {
      return;
    }
    let id: number;
    const resolve = (i: number) => {
      if (i >= text.length) {
        hasAnimatedRef.current = true;
        setDone(true);
        onComplete?.();
        return;
      }
      const scramble = text
        .split("")
        .map((c, j) =>
          j <= i
            ? c
            : (chars[
                Math.floor(Math.random() * chars.length)
              ] ?? "?"),
        )
        .join("");
      setDisplay(scramble);
      id = window.setTimeout(
        () => resolve(i + 1),
        scrambleSpeed,
      );
    };
    id = window.setTimeout(() => resolve(0), scrambleSpeed);
    return () => clearTimeout(id);
  }, [
    shouldRun,
    trigger,
    text,
    chars,
    scrambleSpeed,
    onComplete,
  ]);

  const content = (
    <span ref={ref} className={cn(className)}>
      {display}
      {!done && (
        <span
          className={cn("animate-pulse", cursorClassName)}
          aria-hidden={true}
        >
          |
        </span>
      )}
    </span>
  );

  if (trigger === "hover") {
    return (
      // biome-ignore lint/a11y/useSemanticElements: hover trigger for decorative scramble, not a form group
      <div
        className="inline"
        role="group"
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
      >
        {content}
      </div>
    );
  }

  return content;
}