The details are done.The code is yours.

"use client";
 
import * as React from "react";
import { cn } from "@/lib/utils";
 
import "./marching-border.css";
 
export type MarchingBorderProps = React.ComponentProps<"svg"> & {
  /** Stroke thickness in pixels. */
  strokeWidth?: number;
  /** Dash length as a percentage of the path's perimeter. */
  dash?: number;
  /** Gap length as a percentage of the path's perimeter. */
  gap?: number;
  /**
   * Seconds per dash-cycle. One cycle = one dash + one gap traversal,
   * which is the minimum seamless time-loop.
   */
  duration?: number;
};
 
/**
 * Builds the `d` for a rounded-rect path starting at the midpoint of the top
 * edge, so any residual subpixel seam falls on a straight side (invisible)
 * rather than at a corner. `inset` shifts coordinates inward by half the stroke
 * so the stroke sits inside the SVG box instead of clipping at the edges.
 */
function buildRoundedRectPath(
  width: number,
  height: number,
  radius: number,
  inset: number,
): string {
  const innerW = width - 2 * inset;
  const innerH = height - 2 * inset;
  if (innerW <= 0 || innerH <= 0) return "";
  const r = Math.min(radius, innerW / 2, innerH / 2);
  const left = inset;
  const top = inset;
  const right = inset + innerW;