Morph Text

"use client";

import * as React from "react";

export interface MorphTextProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
  /** Words (or short phrases) to cycle through, in order. */
  words?: string[];
  /** Element to render. */
  as?: "span" | "p" | "h1" | "h2" | "h3" | "div";
  /** Duration of one morph, in ms. */
  morphTime?: number;
  /** How long each word holds before the next morph, in ms. */
  cooldownTime?: number;
  /** Blur strength of the morph; higher melts the letterforms further. */
  blur?: number;
  /** Alpha cut-off of the threshold filter (0–255); lower makes the liquid bridges thicker. */
  threshold?: number;
  /** Stop cycling and hold the current word. */
  paused?: boolean;
  /** Horizontal alignment of words of different widths. */
  align?: "left" | "center" | "right";
}

/* --------------------------- reduced-motion hook --------------------------- */

const REDUCED_QUERY = "(prefers-reduced-motion: reduce)";

function subscribeReducedMotion(onChange: () => void) {
  const mq = window.matchMedia(REDUCED_QUERY);
  mq.addEventListener("change", onChange);
  return () => mq.removeEventListener("change", onChange);
}

function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia(REDUCED_QUERY).matches,
    () => false,
  );
}

const DEFAULT_WORDS = ["Craft", "Motion", "Detail", "Intent"];

const ALIGN = {
  left: "justify-items-start text-left",
  center: "justify-items-center text-center",
  right: "justify-items-end text-right",
} as const;

/* -------------------------------- component -------------------------------- */

/**
 * Words that melt into each other. Two stacked copies cross-blur while an SVG filter
 * (feColorMatrix alpha threshold) snaps the blurred alpha back to hard edges, so the letterforms
 * appear to flow like liquid. Driven by one rAF loop that pauses offscreen and in hidden tabs.
 */
export function MorphText({
  words = DEFAULT_WORDS,
  as = "span",
  morphTime = 1000,
  cooldownTime = 1800,
  blur = 8,
  threshold = 140,
  paused = false,
  align = "center",
  className = "",
  ...props
}: MorphTextProps) {
  const reduceMotion = usePrefersReducedMotion();
  const rootRef = React.useRef<HTMLElement>(null);
  const aRef = React.useRef<HTMLSpanElement>(null);
  const bRef = React.useRef<HTMLSpanElement>(null);
  const stackRef = React.useRef<HTMLSpanElement>(null);
  const filterId = `morph-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
  const Tag = as as React.ElementType;

  const list = words.length ? words : [""];
  const wordsKey = list.join("\u0000");

  React.useEffect(() => {
    const root = rootRef.current;
    const a = aRef.current; // outgoing word
    const b = bRef.current; // incoming word
    const stack = stackRef.current;
    if (!root || !a || !b || !stack) return;
    // The threshold filter only runs during a morph; at rest the text keeps its normal anti-aliasing.
    const liquid = (on: boolean) => {
      stack.style.filter = on && !reduceMotion ? `url(#${filterId}) blur(0.6px)` : "";
    };
    const items = wordsKey.split("\u0000");
    const n = items.length;

    let index = 0;
    let morph = 0;
    let cooldown = cooldownTime;
    let frame = 0;
    let visible = true;
    let last = performance.now();

    const rest = () => {
      // Hold: incoming word fully shown, outgoing hidden.
      morph = 0;
      b.style.filter = "";
      b.style.opacity = "1";
      a.style.filter = "";
      a.style.opacity = "0";
      liquid(false);
    };

    const setMorph = (fraction: number) => {
      if (reduceMotion) {
        // Plain crossfade, no blur and no threshold.
        b.style.opacity = String(fraction);
        a.style.opacity = String(1 - fraction);
        return;
      }
      const inv = 1 - fraction;
      b.style.filter = `blur(${Math.min(blur / Math.max(fraction, 1e-3) - blur, 100)}px)`;
      b.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
      a.style.filter = `blur(${Math.min(blur / Math.max(inv, 1e-3) - blur, 100)}px)`;
      a.style.opacity = `${Math.pow(inv, 0.4) * 100}%`;
    };

    a.textContent = items[0];
    b.textContent = items[0];
    rest();

    const tick = (now: number) => {
      const dt = Math.min(64, now - last);
      last = now;
      const wasCooling = cooldown > 0;
      cooldown -= dt;
      if (cooldown <= 0) {
        if (wasCooling) {
          // Start the next morph: current word fades out of A, next word forms in B.
          a.textContent = items[index % n];
          index = (index + 1) % n;
          b.textContent = items[index];
          liquid(true);
        }
        morph += dt;
        let fraction = morph / Math.max(1, morphTime);
        if (fraction >= 1) {
          cooldown = cooldownTime;
          fraction = 1;
        }
        setMorph(fraction);
        if (fraction === 1) rest();
      }
      frame = requestAnimationFrame(tick);
    };

    const sync = () => {
      const run = visible && !document.hidden && !paused && n > 1;
      if (run && !frame) {
        last = performance.now();
        frame = requestAnimationFrame(tick);
      } else if (!run && frame) {
        cancelAnimationFrame(frame);
        frame = 0;
      }
    };

    const io = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      sync();
    });
    io.observe(root);
    document.addEventListener("visibilitychange", sync);
    sync();

    return () => {
      cancelAnimationFrame(frame);
      io.disconnect();
      document.removeEventListener("visibilitychange", sync);
      liquid(false);
    };
  }, [filterId, wordsKey, morphTime, cooldownTime, blur, paused, reduceMotion]);

  const layer = "col-start-1 row-start-1 whitespace-nowrap will-change-[filter,opacity]";

  return (
    <Tag ref={rootRef} className={`relative inline-block ${className}`} {...props}>
      <span className="sr-only">{list.join(", ")}</span>
      <span ref={stackRef} aria-hidden="true" className={`grid select-none ${ALIGN[align] ?? ALIGN.center}`}>
        {/* Every word, invisible, reserves the width of the longest one so nothing reflows. */}
        {list.map((word, i) => (
          <span key={i} className="invisible col-start-1 row-start-1 whitespace-nowrap">
            {word}
          </span>
        ))}
        <span ref={aRef} className={layer} style={{ opacity: 0 }}>
          {list[0]}
        </span>
        <span ref={bRef} className={layer}>
          {list[0]}
        </span>
      </span>
      <svg aria-hidden="true" focusable="false" className="absolute h-0 w-0">
        <defs>
          <filter id={filterId}>
            {/* Hard alpha threshold: blurred edges snap back to crisp, merged shapes. */}
            <feColorMatrix
              in="SourceGraphic"
              type="matrix"
              values={`1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 255 -${Math.max(1, Math.min(254, Math.round(threshold)))}`}
            />
          </filter>
        </defs>
      </svg>
    </Tag>
  );
}