"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface AnimatedBorderGradientProps extends React.HTMLAttributes<HTMLElement> {
  children?: React.ReactNode;
  className?: string;
  /**
   * Border width in pixels
   * @default 2
   */
  borderWidth?: number;
  /**
   * Animation duration in seconds
   * @default 3
   */
  duration?: number;
  /**
   * Border radius
   * @default "xl"
   */
  borderRadius?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
  /**
   * Gradient colors using CSS variables
   * @default uses primary and secondary colors
   */
  gradientColors?: string[];
  /**
   * Pause animation on hover
   * @default false
   */
  pauseOnHover?: boolean;
  /**
   * Container element type
   * @default "div"
   */
  as?: "div" | "article" | "section" | "aside";
}

const radiusMap = {
  sm: "rounded-sm",
  md: "rounded-md",
  lg: "rounded-lg",
  xl: "rounded-xl",
  "2xl": "rounded-2xl",
  full: "rounded-full",
};

function AnimatedBorderGradient({
  children,
  className,
  borderWidth = 2,
  duration = 3,
  borderRadius = "xl",
  gradientColors,
  pauseOnHover = false,
  as: Component = "div",
  ...props
}: AnimatedBorderGradientProps) {
  const [isPaused, setIsPaused] = React.useState(false);

  const defaultColors = [
    "hsl(var(--primary))",
    "hsl(var(--primary) / 0.5)",
    "hsl(var(--muted))",
    "hsl(var(--primary) / 0.5)",
    "hsl(var(--primary))",
  ];

  const colors = gradientColors || defaultColors;
  const gradientString = `conic-gradient(from var(--gradient-angle), ${colors.join(", ")})`;

  const handleMouseEnter = React.useCallback(() => {
    if (pauseOnHover) setIsPaused(true);
  }, [pauseOnHover]);

  const handleMouseLeave = React.useCallback(() => {
    if (pauseOnHover) setIsPaused(false);
  }, [pauseOnHover]);

  return (
    <Component
      className={cn("relative", radiusMap[borderRadius], className)}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      {...props}
    >
      {/* Animated gradient border */}
      <motion.div
        className={cn(
          "absolute inset-0 z-0",
          radiusMap[borderRadius]
        )}
        style={{
          background: gradientString,
          padding: borderWidth,
        }}
        animate={{
          "--gradient-angle": ["0deg", "360deg"],
        } as Record<string, string[]>}
        transition={{
          duration,
          repeat: Infinity,
          ease: "linear",
          ...(isPaused && { repeat: 0 }),
        }}
      >
        {/* Inner mask to create border effect */}
        <div
          className={cn(
            "h-full w-full bg-card",
            radiusMap[borderRadius]
          )}
        />
      </motion.div>

      {/* Content container */}
      <div
        className={cn(
          "relative z-10 bg-card",
          radiusMap[borderRadius]
        )}
        style={{
          margin: borderWidth,
        }}
      >
        {children}
      </div>
    </Component>
  );
}

export { AnimatedBorderGradient };
Animated Border Gradient

Dependencies

Files

Installation
