InkReveal

"use client";

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

type InkRevealProps = {
  children: ReactNode;
  className?: string;
  /** Seconds the ink takes to spread. */
  duration?: number;
  /** Play only the first time it scrolls into view. */
  once?: boolean;
};

const MASK = "radial-gradient(circle at 0% 50%, #000 var(--ink), transparent calc(var(--ink) + 25%))";

/* InkReveal: text spreads out from the left like ink soaking into paper, soft at the edge and sharpening as it dries. */
export function InkReveal({ children, className = "", duration = 1.6, once = true }: InkRevealProps) {
  const reduce = useReducedMotion();
  if (reduce) return <span className={className}>{children}</span>;

  return (
    <motion.span
      className={`inline-block ${className}`}
      style={{ maskImage: MASK, WebkitMaskImage: MASK }}
      initial={{ "--ink": "-25%", filter: "blur(6px)" }}
      whileInView={{ "--ink": "150%", filter: "blur(0px)" }}
      viewport={{ once, amount: 0.6 }}
      transition={{ duration, ease: [0.25, 1, 0.5, 1] }}
    >
      {children}
    </motion.span>
  );
}