Text Reveal

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "motion/react";

type RevealTag = "div" | "li" | "span" | "p" | "h2" | "h3";

export interface TextRevealProps {
  children: React.ReactNode;
  /** Stagger this reveal after siblings (seconds). */
  delay?: number;
  className?: string;
  style?: React.CSSProperties;
  /** Element to render as — lets it wrap headings, list items, inline text. */
  as?: RevealTag;
}

/**
 * Reveals its children with a soft de-blur + fade as they scroll into view —
 * the "text develops into focus" effect used on marketing pages. Fires once,
 * respects `prefers-reduced-motion` (drops the blur), and is polymorphic via
 * `as` so it can wrap a heading, a paragraph, or a single list item.
 */
export function TextReveal({
  children,
  delay = 0,
  className = "",
  style,
  as = "div",
}: TextRevealProps) {
  const shouldReduceMotion = useReducedMotion();
  const MotionTag = motion[as];

  return (
    <MotionTag
      initial={{
        opacity: 0,
        filter: shouldReduceMotion ? "blur(0px)" : "blur(15px)",
      }}
      whileInView={{ opacity: 1, filter: "blur(0px)" }}
      viewport={{ once: true, margin: "-80px" }}
      transition={{ duration: 0.4, ease: [0.6, 0.9, 0.9, 1], delay }}
      className={className}
      style={style}
    >
      {children}
    </MotionTag>
  );
}