Texto con degradado animado

import { motion } from "framer-motion";

interface GradientTextProps {
  text?: string;
  color?: string;
  /** Segundos por pasada del degradado. */
  speed?: number;
}

export default function GradientText({
  text = "Diseñado para fluir",
  color = "#0071e3",
  speed = 5,
}: GradientTextProps) {
  return (
    // --gradient-fg es el color del texto normal, para que el degradado respete el modo oscuro
    <motion.h2
      className="bg-clip-text text-4xl font-semibold text-transparent [--gradient-fg:#1d1d1f] dark:[--gradient-fg:#f5f5f7]"
      style={{
        backgroundImage: `linear-gradient(90deg,var(--gradient-fg),${color},var(--gradient-fg))`,
        backgroundSize: "200% 100%",
      }}
      animate={{ backgroundPosition: ["0% 0", "200% 0"] }}
      transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
    >
      {text}
    </motion.h2>
  );
}