WordMorph

"use client";

import { useEffect, useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

type WordMorphProps = {
  /** Words to cycle through. */
  words: string[];
  className?: string;
  /** Milliseconds each word stays. */
  interval?: number;
  /** Seconds the melt takes. */
  duration?: number;
};

/* WordMorph: one word melts into the next. Both words blur and cross-fade under a threshold filter,
   so their shapes run together like liquid. Best with solid-colour text. */
export function WordMorph({ words, className = "", interval = 2400, duration = 0.9 }: WordMorphProps) {
  const reduce = useReducedMotion();
  const filterId = `wm${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
  const [index, setIndex] = useState(0);
  const word = words[index % words.length] ?? "";

  useEffect(() => {
    if (words.length < 2) return;
    const id = window.setInterval(() => {
      if (!document.hidden) setIndex((i) => (i + 1) % words.length);
    }, interval);
    return () => window.clearInterval(id);
  }, [interval, words.length]);

  return (
    <span className={`relative inline-grid ${className}`}>
      <span className="sr-only">{word}</span>
      <svg aria-hidden className="absolute h-0 w-0">
        <filter id={filterId}>
          {/* Hard alpha cut: soft blurred edges become one solid shape. */}
          <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 255 -140" />
        </filter>
      </svg>
      <span aria-hidden className="inline-grid" style={{ filter: reduce ? undefined : `url(#${filterId})` }}>
        <AnimatePresence initial={false}>
          <motion.span
            key={index}
            className="whitespace-pre text-center [grid-area:1/1]"
            initial={{ opacity: 0, filter: "blur(8px)" }}
            animate={{ opacity: 1, filter: "blur(0px)" }}
            exit={{ opacity: 0, filter: "blur(8px)" }}
            transition={{ duration: reduce ? 0 : duration, ease: "easeInOut" }}
          >
            {word}
          </motion.span>
        </AnimatePresence>
      </span>
    </span>
  );
}