Border Trail
Animated conic-gradient border that spins around the element using CSS keyframes. No framer-motion required.
Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.
Border TrailAnimated conic-gradient border that spins around the element using CSS keyframes. No framer-motion required.
"use client";
type BorderTrailProps = {
children: React.ReactNode;
duration?: number;
trailColor?: string;
borderWidth?: number;
borderRadius?: number;
};
export function BorderTrail({
children,
duration = 3,
trailColor = "#7c3aed",
borderWidth = 2,
borderRadius = 14,
}: BorderTrailProps) {
return (
<div
className="mp-border-trail"
style={
{
"--trail-duration": duration + "s",
"--trail-color": trailColor,
"--trail-width": borderWidth + "px",
"--trail-radius": borderRadius + "px",
} as React.CSSProperties
}
>
<div className="mp-border-trail-inner" style={{ borderRadius: (borderRadius - borderWidth) + "px" }}>
{children}
</div>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | Content inside the bordered container |
| duration | number | 3 | Trail spin duration in seconds |
| trailColor | string | "#7c3aed" | Trail highlight color |
| borderWidth | number | 2 | Border width in px |
| borderRadius | number | 14 | Container border-radius in px |