Border Trail

An animated border trail effect that follows the perimeter of a container using CSS offset-path and Framer Motion. The trail creates a smooth, continuous animation around the border with a glowing effect.

The component uses CSS offset-path with a rounded rectangle path, allowing the animated element to smoothly follow the container's border. The animation is infinite and linear, creating a consistent orbital motion.

Key Features

• CSS offset-path: Modern CSS property for path-based animations
• Framer Motion: Smooth animation with customizable transitions
• Configurable size: Adjustable trail size and speed
• Glowing effects: Multiple box-shadow layers for depth
• Responsive design: Adapts to container dimensions

Component Structure

'use client';
import { motion, Transition } from 'framer-motion';

export function BorderTrail({ size = 60, transition, className }) {
  const defaultTransition: Transition = {
    repeat: Infinity,
    duration: 5,
    ease: 'linear',
  };

  return (
    <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)]'>
      <motion.div
        className={cn('absolute aspect-square bg-zinc-500', className)}
        style={{
          width: size,
          offsetPath: `rect(0 auto auto 0 round ${size}px)`,
        }}
        animate={{
          offsetDistance: ['0%', '100%'],
        }}
        transition={transition || defaultTransition}
      />
    </div>
  );
}

The effect works by combining several CSS and animation techniques:

1. Mask compositing to create a border-only visible area
2. CSS offset-path with rect() function for the rounded rectangle path
3. Framer Motion to animate the offsetDistance from 0% to 100%
4. Multiple box-shadows for the glowing background effect