import * as React from "react";

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

type AnimatedGradientBorderCardProps = React.HTMLAttributes<HTMLDivElement> & {
  title: string;
  description?: string;
  eyebrow?: string;
  borderWidth?: number;
  duration?: number;
};

export function AnimatedGradientBorderCard({
  title,
  description,
  eyebrow,
  borderWidth = 2,
  duration = 8,
  className,
  children,
  ...props
}: AnimatedGradientBorderCardProps) {
  return (
    <div
      className={cn(
        "relative rounded-2xl p-[var(--border-size)]",
        className
      )}
      style={{ "--border-size": `${borderWidth}px` } as React.CSSProperties}
      {...props}
    >
      <div
        className="absolute inset-0 rounded-2xl bg-[conic-gradient(from_180deg,hsl(var(--foreground)),hsl(var(--muted-foreground)),hsl(var(--foreground)))]"
        style={{ animation: `gradient-border-spin ${duration}s linear infinite` }}
        aria-hidden="true"
      />
      <div className="relative z-10 rounded-2xl border border-border bg-card p-6">
        <div className="space-y-3">
          {eyebrow ? (
            <p className="text-xs uppercase tracking-[0.32em] text-muted-foreground">
              {eyebrow}
            </p>
          ) : null}
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          {description ? (
            <p className="text-sm text-muted-foreground">{description}</p>
          ) : null}
        </div>
        {children ? <div className="mt-4">{children}</div> : null}
      </div>
      <style jsx>{`
        @keyframes gradient-border-spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </div>
  );
}
Animated Gradient Border Card

Animated Gradient Border

Dependencies

Files

Installation
