MaskFlow

"use client";

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

type MaskFlowProps = {
  children: ReactNode;
  className?: string;
  /** Seconds for the band to cross once. */
  duration?: number;
  /** Outline width, in pixels. */
  stroke?: number;
};

// A soft solid band in the middle of a mask three times the text width.
const MASK = "linear-gradient(90deg, transparent 30%, #000 42%, #000 58%, transparent 70%)";

/* MaskFlow: outlined letters with a band of solid fill flowing through them, filling and emptying as it passes. */
export function MaskFlow({ children, className = "", duration = 3, stroke = 1 }: MaskFlowProps) {
  const reduce = useReducedMotion();

  return (
    <span className={`inline-grid ${className}`}>
      <span className="[grid-area:1/1]" style={{ WebkitTextFillColor: "transparent", WebkitTextStroke: `${stroke}px currentColor` }}>
        {children}
      </span>
      {!reduce && (
        <motion.span
          aria-hidden
          className="[grid-area:1/1]"
          style={{ maskImage: MASK, WebkitMaskImage: MASK, maskSize: "300% 100%", WebkitMaskSize: "300% 100%", maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" }}
          animate={{ maskPosition: ["100% 0%", "0% 0%"] }}
          transition={{ duration, repeat: Infinity, ease: "easeInOut" }}
        >
          {children}
        </motion.span>
      )}
    </span>
  );
}