BlurCascade

"use client";

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

type BlurCascadeProps = {
  text: string;
  className?: string;
  /** Seconds between one word and the next. */
  stagger?: number;
  /** Starting blur, in pixels. */
  blur?: number;
  /** Play only the first time it scrolls into view. */
  once?: boolean;
};

/* BlurCascade: words drift up out of a blur one after another, like a lens finding focus. */
export function BlurCascade({ text, className = "", stagger = 0.08, blur = 12, once = true }: BlurCascadeProps) {
  const reduce = useReducedMotion();
  if (reduce) return <span className={className}>{text}</span>;

  const words = text.split(" ");

  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, i) => (
          <span key={i}>
            <motion.span
              className="inline-block"
              custom={i}
              variants={{
                hidden: { opacity: 0, y: "0.35em", filter: `blur(${blur}px)` },
                show: (n: number) => ({
                  opacity: 1,
                  y: 0,
                  filter: "blur(0px)",
                  transition: { duration: 0.8, delay: n * stagger, ease: [0.22, 1, 0.36, 1] },
                }),
              }}
            >
              {word}
            </motion.span>
            {i < words.length - 1 && " "}
          </span>
        ))}
      </span>
    </motion.span>
  );
}