Gradient Text

"use client";
import * as React from "react";
import { motion, HTMLMotionProps } from "motion/react";
import { cn } from "@/lib/utils";
export interface TextGradientProps
  extends Omit<HTMLMotionProps<"p">, "children"> {
  children: string;
  gradient?: string;
  animate?: boolean;
  duration?: number;
}
export function TextGradient({
  children,
  className,
  gradient = "linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899)",
  animate: shouldAnimate = true,
  duration = 3,
  ...props
}: TextGradientProps) {
  return (
    <motion.p
      className={cn(className)}
      style={{
        backgroundImage: gradient,
        backgroundSize: shouldAnimate ? "200% auto" : "100% auto",
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent",
        backgroundClip: "text",
      }}
      animate={
        shouldAnimate
          ? {
              backgroundPosition: ["0% center", "200% center"],
            }
          : undefined
      }
      transition={
        shouldAnimate
          ? {
              duration,
              ease: "linear",
              repeat: Infinity,
            }
          : undefined
      }
      {...props}
    >
      {children}
    </motion.p>
  );
}