GradientPulse

"use client";

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

type GradientPulseProps = {
  children: ReactNode;
  className?: string;
  /** Gradient colours, left to right. */
  colors?: string[];
  /** Seconds for one full sweep there and back. */
  duration?: number;
};

/* GradientPulse: a gradient slides slowly through the letters while the text gently brightens and dims. */
export function GradientPulse({
  children,
  className = "",
  colors = ["#a78bfa", "#f472b6", "#fbbf24", "#34f5c5"],
  duration = 6,
}: GradientPulseProps) {
  const reduce = useReducedMotion();

  return (
    <motion.span
      className={`bg-clip-text text-transparent ${className}`}
      style={{ backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`, backgroundSize: "300% 100%" }}
      animate={
        reduce
          ? undefined
          : { backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"], filter: ["brightness(1)", "brightness(1.3)", "brightness(1)"] }
      }
      transition={{ duration, repeat: Infinity, ease: "easeInOut" }}
    >
      {children}
    </motion.span>
  );
}