DocsComponentsBlog
Star us
Docs

Animated Border Trail

A container with animated border trail, this can be used for buttons as well as cards.

Installation

Add this CSS for angle property

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

Update tailwind.config.js

Add the following to your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      keyframes: {
        "trail": {
          "0%": { "--angle": "0deg" },
          "100%": { "--angle": "360deg" },
        },
      },
      animation: {
        "trail": "trail var(--duration) linear infinite",
      },
    }
  }
}

Run the following command

It will create a new file animated-border-trail.tsx inside the components/animata/container directory.

mkdir -p components/animata/container && touch components/animata/container/animated-border-trail.tsx

Paste the code

Open the newly created file and paste the following code:

import { cn } from "@/lib/utils";
 
interface AnimatedTrailProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * The duration of the animation.
   * @default "10s"
   */
  duration?: string;
 
  contentClassName?: string;
 
  trailColor?: string;
  trailSize?: "sm" | "md" | "lg";
}
 
const sizes = {
  sm: 5,
  md: 10,
  lg: 20,
};
 
export default function AnimatedBorderTrail({
  children,
  className,
  duration = "10s",
  trailColor = "purple",
  trailSize = "md",
  contentClassName,
  ...props
}: AnimatedTrailProps) {
  return (
    <div
      {...props}
      className={cn("relative h-fit w-fit overflow-hidden rounded-2xl bg-gray-200 p-px", className)}
    >
      <div
        className="absolute inset-0 h-full w-full animate-trail"
        style={{
          "--duration": duration ?? "10s",
          "--angle": "0deg",
          background: `conic-gradient(from var(--angle) at 50% 50%, transparent ${100 - sizes[trailSize]}%, ${trailColor})`,
        }}
      />
      <div
        className={cn(
          "relative h-full w-full overflow-hidden rounded-[15px] bg-white",
          contentClassName,
        )}
      >
        {children}
      </div>
    </div>
  );
}

Credits

Built by hari

@jh3yy on Twitter

I tried using his method but the transition in the border looked weird in my case so, I created this version.

Edit this page on GitHub
Image CarouselAnimated Dock