LiquidLetters

"use client";

import { useAnimate, useReducedMotion } from "motion/react";

type LiquidLettersProps = {
  text: string;
  className?: string;
  /** Seconds one wobble takes. */
  duration?: number;
};

/* LiquidLetters: run the pointer over the text and each letter it touches wobbles like jelly, squashing and springing back. */
export function LiquidLetters({ text, className = "", duration = 0.8 }: LiquidLettersProps) {
  const reduce = useReducedMotion();
  const [scope, animate] = useAnimate<HTMLSpanElement>();

  const wobble = (el: HTMLElement) => {
    if (reduce) return;
    animate(el, { scaleX: [1, 1.3, 0.8, 1.1, 0.95, 1], scaleY: [1, 0.7, 1.2, 0.9, 1.05, 1] }, { duration, ease: "easeOut" });
  };

  const words = text.split(" ");

  return (
    <span ref={scope} className={className}>
      <span className="sr-only">{text}</span>
      <span aria-hidden>
        {words.map((word, w) => (
          <span key={w}>
            <span className="inline-block whitespace-nowrap">
              {[...word].map((ch, i) => (
                <span key={i} className="inline-block origin-bottom" onPointerEnter={(e) => wobble(e.currentTarget)}>
                  {ch}
                </span>
              ))}
            </span>
            {w < words.length - 1 && " "}
          </span>
        ))}
      </span>
    </span>
  );
}