"use client";

import * as React from "react";
import { motion } from "framer-motion";

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

const motionComponents = {
  span: motion.span,
  p: motion.p,
  h1: motion.h1,
  h2: motion.h2,
  h3: motion.h3,
  h4: motion.h4,
  div: motion.div,
};

type GradientTextElement = keyof typeof motionComponents;

type GradientVariant = "primary" | "accent" | "muted" | "spotlight" | "custom";

interface GradientTextProps extends React.HTMLAttributes<HTMLElement> {
  children: React.ReactNode;
  className?: string;
  /**
   * Gradient style variants using semantic colors
   * @default "primary"
   */
  variant?: GradientVariant;
  /**
   * Custom gradient classes when variant is custom
   */
  gradientClassName?: string;
  /**
   * Enable animated gradient movement
   * @default true
   */
  animated?: boolean;
  /**
   * Animation duration in seconds
   * @default 6
   */
  duration?: number;
  /**
   * Render as different element
   * @default "span"
   */
  as?: GradientTextElement;
}

const gradientVariants: Record<Exclude<GradientVariant, "custom">, string> = {
  primary: "from-primary via-accent to-secondary",
  accent: "from-accent via-primary to-secondary",
  muted: "from-muted-foreground via-foreground to-muted-foreground",
  spotlight: "from-foreground via-primary to-foreground",
};

function GradientText({
  className,
  children,
  variant = "primary",
  gradientClassName,
  animated = true,
  duration = 6,
  as = "span",
}: GradientTextProps) {
  const MotionComponent = motionComponents[as] as React.ElementType;
  const gradientClass =
    variant === "custom" ? gradientClassName : gradientVariants[variant];

  return (
    <MotionComponent
      className={cn(
        "inline-block bg-gradient-to-r bg-clip-text text-transparent",
        animated && "bg-[length:200%_200%]",
        gradientClass,
        className
      )}
      animate={
        animated
          ? { backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }
          : { backgroundPosition: "0% 50%" }
      }
      transition={
        animated
          ? {
              duration,
              repeat: Infinity,
              ease: "linear",
            }
          : undefined
      }
    >
      {children}
    </MotionComponent>
  );
}

export { GradientText };
Gradient Text

Primary Flow

Accent Energy

Spotlight Shine

Muted Glow

Dependencies

Files

Installation
