Scramble text

"use client";

import * as React from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrambleTextPlugin } from "gsap/ScrambleTextPlugin";
import { SplitText } from "gsap/SplitText";

import { cn } from "@/lib/utils";

gsap.registerPlugin(useGSAP, ScrambleTextPlugin, SplitText);

const MOTION = "(prefers-reduced-motion: no-preference)";
const POINTER = "(hover: hover) and (pointer: fine)";

type ScrambleTextProps = Omit<React.ComponentProps<"span">, "children"> & {
  /** The text. It stays a plain string so screen readers get one clean sentence. */
  children: string;
  /** The element to render. */
  as?: "span" | "p" | "h1" | "h2" | "h3";
  /** Run once on entering view, or on every hover and keyboard focus. */
  trigger?: "view" | "hover";
  /** Glyphs to scramble through. Keep them to one width class, and leave out `<` and `&`. */
  chars?: string;
  /** Seconds each character spends scrambling. */
  hold?: number;
};

/**
 * Characters scramble then settle in a wave from the left. Each character is locked to its own settled
 * width first, so nothing reflows. A character that has not been reached still shows its real glyph,
 * which makes the first frame the same as the server's HTML: there is no flash on hydration.
 */
function ScrambleText({
  as = "span",
  trigger = "view",
  chars = "abcdefghijklmnopqrstuvwxyz0123456789/_-+=",
  hold = 0.5,
  className,
  children,
  ...props
}: ScrambleTextProps) {
  const Tag = as as React.ElementType;
  const root = React.useRef<HTMLElement>(null);

  useGSAP(
    () => {
      const media = gsap.matchMedia();
      media.add(MOTION, (_, contextSafe) => {
        const element = root.current;
        const glyphs = element?.querySelector<HTMLElement>("[data-slot=scramble-text-glyphs]");
        if (!element || !glyphs || !contextSafe) return;
        let alive = true;
        let running = false;

        const play = contextSafe(() => {
          if (!alive || running) return;
          running = true;
          const split = SplitText.create(glyphs, { type: "words,chars", tag: "span", aria: "none" });
          const cells = split.chars as HTMLElement[];
          // Span wrappers are inline and ignore width, so words and cells become inline blocks first.
          gsap.set([...split.words, ...cells], { display: "inline-block" });
          const widths = cells.map((cell) => cell.getBoundingClientRect().width);
          cells.forEach((cell, i) => {
            cell.style.width = `${widths[i]}px`;
            cell.style.textAlign = "center";
          });
          const step = Math.min(0.03, 0.9 / cells.length);
          const timeline = gsap.timeline({
            onComplete: () => {
              split.revert();
              running = false;
            },
          });
          cells.forEach((cell, i) => {
            timeline.fromTo(
              cell,
              { opacity: 0.45 },
              {
                opacity: 1,
                duration: hold,
                ease: "power2.in",
                immediateRender: false,
                scrambleText: {
                  text: cell.textContent ?? "",
                  chars,
                  speed: 0.7,
                  revealDelay: hold,
                  tweenLength: false,
                },
              },
              i * step,
            );
          });
        }) as () => void;

        const cleanups: Array<() => void> = [];
        if (trigger === "view") {
          const watcher = new IntersectionObserver(
            (entries) => {
              if (!entries.some((e) => e.isIntersecting)) return;
              watcher.disconnect();
              void document.fonts.ready.then(play);
            },
            { threshold: 0.1 },
          );
          watcher.observe(element);
          cleanups.push(() => watcher.disconnect());
        } else {
          // A scramble inside a link or button answers to the whole control, keyboard included.
          const target = element.closest<HTMLElement>("a, button") ?? element;
          const onFocus = (e: FocusEvent) => {
            if ((e.target as HTMLElement).matches(":focus-visible")) play();
          };
          target.addEventListener("focusin", onFocus);
          cleanups.push(() => target.removeEventListener("focusin", onFocus));
          if (window.matchMedia(POINTER).matches) {
            target.addEventListener("pointerenter", play);
            cleanups.push(() => target.removeEventListener("pointerenter", play));
          }
        }
        return () => {
          alive = false;
          cleanups.forEach((clean) => clean());
        };
      });
      return () => media.revert();
    },
    { scope: root, dependencies: [children, trigger, chars, hold] },
  );

  return (
    <Tag ref={root} data-slot="scramble-text" className={cn("m-0", className)} {...props}>
      <span className="sr-only select-none">{children}</span>
      <span aria-hidden="true" data-slot="scramble-text-glyphs">
        {children}
      </span>
    </Tag>
  );
}

export { ScrambleText };