Text reveal

"use client";

import * as React from "react";
import { motion, useInView, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface TextRevealProps {
  text: string;
  /** Reveal per word or per character. */
  by?: "word" | "char";
  as?: "h1" | "h2" | "h3" | "p" | "span";
  delay?: number;
  /** Replay every time it scrolls into view. */
  repeat?: boolean;
  className?: string;
}

/** Text that rises out of a blur, word by word, when it enters the viewport. */
export function TextReveal({ text, by = "word", as: Tag = "p", delay = 0, repeat, className }: TextRevealProps) {
  const ref = React.useRef<HTMLElement>(null);
  const inView = useInView(ref, { once: !repeat, margin: "-10% 0px" });
  const reduce = useReducedMotion();
  const parts = by === "word" ? text.split(/(\s+)/) : [...text];
  const MotionTag = motion[Tag];

  return (
    <MotionTag ref={ref as never} className={cn(className)} aria-label={text}>
      {parts.map((p, i) =>
        /^\s+$/.test(p) ? (
          <span key={i}>{p}</span>
        ) : (
          <motion.span
            key={i}
            aria-hidden
            className="inline-block"
            initial={reduce ? false : { opacity: 0, y: "0.35em", filter: "blur(6px)" }}
            animate={inView || reduce ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined}
            transition={{ delay: delay + i * (by === "word" ? 0.04 : 0.015), duration: 0.5, ease: [0.2, 0.8, 0.2, 1] }}
          >
            {p}
          </motion.span>
        ),
      )}
    </MotionTag>
  );
}