LetterFlow

"use client";

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

type LetterFlowProps = {
  text: string;
  className?: string;
  /** Seconds between one letter and the next. */
  stagger?: number;
  /** Play only the first time it scrolls into view. */
  once?: boolean;
};

/* LetterFlow: letters rise out from under an invisible line, tilting upright as they land, in one flowing wave. */
export function LetterFlow({ text, className = "", stagger = 0.025, once = true }: LetterFlowProps) {
  const reduce = useReducedMotion();
  if (reduce) return <span className={className}>{text}</span>;

  const words = text.split(" ");
  // Each letter's place in the whole text, so the wave carries on across words.
  const starts = words.map((_, w) => words.slice(0, w).join("").length);

  return (
    <motion.span className={className} initial="hidden" whileInView="show" viewport={{ once, amount: 0.6 }}>
      <span className="sr-only">{text}</span>
      <span aria-hidden>
        {words.map((word, w) => (
          <span key={w}>
            {/* Each word clips its own letters and never breaks across lines. */}
            <span className="-mb-[0.15em] inline-block overflow-hidden whitespace-nowrap pb-[0.15em] align-bottom">
              {[...word].map((ch, i) => (
                <motion.span
                  key={i}
                  className="inline-block origin-bottom-left"
                  custom={starts[w] + i}
                  variants={{
                    hidden: { y: "110%", rotate: 12 },
                    show: (k: number) => ({
                      y: 0,
                      rotate: 0,
                      transition: { type: "spring", stiffness: 260, damping: 24, delay: k * stagger },
                    }),
                  }}
                >
                  {ch}
                </motion.span>
              ))}
            </span>
            {w < words.length - 1 && " "}
          </span>
        ))}
      </span>
    </motion.span>
  );
}