Word Reveal

"use client";

import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface WordRevealProps {
  text?: string;
  as?: "h1" | "h2" | "h3" | "p";
  /** Seconds between words. */
  stagger?: number;
  delay?: number;
  /** Replay on every viewport entry. */
  repeat?: boolean;
  className?: string;
}

/** Headline whose words rise out of a clipping mask one after another when scrolled into view. */
export function WordReveal({
  text = "Ship fast. Sleep well. Let Tracewise handle the pager.",
  as = "h2",
  stagger = 0.06,
  delay = 0,
  repeat = false,
  className,
}: WordRevealProps) {
  const reduce = useReducedMotion();
  const Tag = motion[as];
  const words = text.split(" ");

  return (
    <Tag
      className={cn("text-balance", className)}
      aria-label={text}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: !repeat, amount: 0.5 }}
      transition={{ staggerChildren: stagger, delayChildren: delay }}
    >
      {words.map((w, i) => (
        <span key={i} aria-hidden className="inline-block overflow-hidden pb-[0.1em] align-bottom">
          <motion.span
            className="inline-block"
            variants={{ hidden: { y: "105%", opacity: 0 }, shown: { y: "0%", opacity: 1, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } } }}
          >
            {w}
          </motion.span>
          {i < words.length - 1 && " "}
        </span>
      ))}
    </Tag>
  );
}

export default WordReveal;