Docs
Animated Border Trail
A container with animated border trail, this can be used for buttons as well as cards.
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/container/animated-border-trail.jsonManual
Add this CSS for angle property
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}Add to your CSS
@keyframes trail {
0% { --angle: 0deg; }
100% { --angle: 360deg; }
}
@theme {
--animate-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.tsxPaste 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)}
>
<style>
{`
@property --border-trail-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes border-trail {
0% { --border-trail-angle: 0deg; }
100% { --border-trail-angle: 360deg; }
}
`}
</style>
<div
className="absolute inset-0 h-full w-full"
style={{
animation: `border-trail ${duration ?? "10s"} linear infinite`,
background: `conic-gradient(from var(--border-trail-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.
This can also be created using clip-path but I like this method better.