Fade In Left to Right

"use client";

import { animate, motion, useMotionTemplate, useMotionValue } from "motion/react";
import { useEffect } from "react";
import { TEXT, type EffectProps } from "../_text-effects/shared";

// 17 — The line is revealed by a soft edge that travels left to right,
// fading the letters in rather than cutting them.
export function FadeLeftToRight({
  play,
  text = "Revealed with a soft edge",
  duration = 0.9,
  softness = 30,
}: EffectProps & {
  text?: string;
  /** Seconds for the edge to cross the line. */
  duration?: number;
  /** Width of the soft edge, % of the line. */
  softness?: number;
}) {
  const edge = useMotionValue(100);
  const mask = useMotionTemplate`linear-gradient(90deg, black ${edge}%, transparent calc(${edge}% + ${softness}%))`;

  useEffect(() => {
    if (!play) return;
    const controls = animate(edge, [-softness, 100], { duration, ease: "easeInOut" });
    return () => controls.stop();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [play, edge]);

  return (
    <motion.p className={TEXT} style={{ maskImage: mask, WebkitMaskImage: mask }}>
      {text}
    </motion.p>
  );
}