Gradient Text

"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface GradientTextProps {
  children: React.ReactNode;
  className?: string;
  colors?: string[];
  animationSpeed?: number;
}

export const GradientText: React.FC<GradientTextProps> = ({
  children, className = "",
  colors = ["#1d1d1f", "#6e6e73", "#1d1d1f"],
  animationSpeed = 5,
}) => {
  const gradientColors = colors.join(", ");

  return (
    <span className={cn("inline-block bg-clip-text text-transparent animate-gradient-flow", className)}
      style={{
        backgroundImage: `linear-gradient(90deg, ${gradientColors})`,
        backgroundSize: "200% 100%",
        animationDuration: `${animationSpeed}s`,
      }}>
      {children}
    </span>
  );
};

<GradientText className="text-5xl font-semibold tracking-tight">
  Think different.
</GradientText>

<GradientText colors={["#0071e3", "#40a9ff", "#0071e3"]} animationSpeed={4}>
  Intelligence
</GradientText>
<GradientText colors={["#bf4800", "#ff9500", "#bf4800"]} animationSpeed={6}>
  Performance
</GradientText>