Blur Reveal

"use client";

import { motion } from "motion/react";
import { EASE_OUT, TEXT, glyph, type EffectProps } from "../_text-effects/shared";

// 03 — A blur travels left to right across the line: each character
// fades in from soft to sharp a beat after the one before it.
export function BlurReveal({
  play,
  text = "Coming into focus",
  duration = 0.4,
  stagger = 0.03,
  blur = 8,
}: EffectProps & {
  text?: string;
  /** Seconds each character takes to sharpen. */
  duration?: number;
  /** Seconds between characters. */
  stagger?: number;
  /** Starting blur in px. */
  blur?: number;
}) {
  return (
    <p className={TEXT} aria-label={text}>
      {Array.from(text).map((ch, i) => (
        <motion.span
          key={`${play}-${i}`}
          aria-hidden
          className="inline-block"
          initial={play ? { opacity: 0, filter: `blur(${blur}px)` } : false}
          animate={{ opacity: 1, filter: "blur(0px)" }}
          transition={{ duration, delay: i * stagger, ease: EASE_OUT }}
        >
          {glyph(ch)}
        </motion.span>
      ))}
    </p>
  );
}