border-trail

1'use client';
2import { cn } from '@/lib/utils';
3import { motion, Transition } from 'motion/react';
4
5export type BorderTrailProps = {
6  className?: string;
7  size?: number;
8  transition?: Transition;
9  onAnimationComplete?: () => void;
10  style?: React.CSSProperties;
11};
12
13export function BorderTrail({
14  className,
15  size = 60,
16  transition,
17  onAnimationComplete,
18  style,
19}: BorderTrailProps) {
20  const defaultTransition: Transition = {
21    repeat: Infinity,
22    duration: 5,
23    ease: 'linear',
24  };
25
26  return (
27    <div className='pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]'>
28      <motion.div
29        className={cn('absolute aspect-square bg-zinc-500', className)}
30        style={{
31          width: size,
32          offsetPath: `rect(0 auto auto 0 round ${size}px)`,
33          ...style,
34        }}
35        animate={{
36          offsetDistance: ['0%', '100%'],
37        }}
38        transition={transition || defaultTransition}
39        onAnimationComplete={onAnimationComplete}
40      />
41    </div>
42  );
43}
44