Border Trail

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion, type Transition, useReducedMotion } from "motion/react";
5import { type CSSProperties, useEffect, useRef } from "react";
6 
7export interface BorderTrailProps {
8  className?: string;
9  onAnimationComplete?: () => void;
10  size?: number;
11  style?: CSSProperties;
12  transition?: Transition;
13}
14 
15const DEFAULT_TRANSITION: Transition = {
16  repeat: Number.POSITIVE_INFINITY,
17  duration: 5,
18  ease: "linear",
19};
20 
21function getReducedMotionCompletionMs(
22  duration: number,
23  delay: number,
24  repeat: number | undefined,
25  repeatDelay: number
26): number | null {
27  if (
28    repeat === Number.POSITIVE_INFINITY ||
29    repeat === Number.NEGATIVE_INFINITY
30  ) {
31    return null;
32  }
33 
34  // Motion: repeat N = initial play + N additional iterations.
35  const iterationCount =
36    typeof repeat === "number" && repeat > 0 ? repeat + 1 : 1;
37  const betweenRepeatDelays =
38    typeof repeat === "number" && repeat > 0 ? repeat * repeatDelay : 0;
39 
40  return (delay + duration * iterationCount + betweenRepeatDelays) * 1000;
41}
42 
43export function BorderTrail({
44  className,
45  size = 60,
46  transition,
47  onAnimationComplete,
48  style,
49}: BorderTrailProps) {
50  const prefersReducedMotion = useReducedMotion();
51  const onAnimationCompleteRef = useRef(onAnimationComplete);
52  onAnimationCompleteRef.current = onAnimationComplete;
53 
54  const resolvedTransition = { ...DEFAULT_TRANSITION, ...transition };
55  const duration =
56    typeof resolvedTransition.duration === "number"
57      ? resolvedTransition.duration
58      : 5;
59  const delay =
60    typeof resolvedTransition.delay === "number" ? resolvedTransition.delay : 0;
61  const repeat = resolvedTransition.repeat;
62  const repeatDelay =
63    typeof resolvedTransition.repeatDelay === "number"
64      ? resolvedTransition.repeatDelay
65      : 0;
66 
67  useEffect(() => {
68    if (!prefersReducedMotion) {
69      return;
70    }
71 
72    const completionMs = getReducedMotionCompletionMs(
73      duration,
74      delay,
75      repeat,
76      repeatDelay
77    );
78    if (completionMs === null) {
79      return;
80    }
81 
82    const timeoutId = window.setTimeout(
83      () => onAnimationCompleteRef.current?.(),
84      completionMs
85    );
86    return () => window.clearTimeout(timeoutId);
87  }, [prefersReducedMotion, duration, delay, repeat, repeatDelay]);
88 
89  if (prefersReducedMotion) {
90    // className/style style the small moving square (glow shadows, gradient
91    // fills sized for `size`px) — reusing them here would stretch a
92// … truncated