AntLine

npx shadcn@latest add "https://designpass.dev/r/AntLine-TS-TW.json"

/*!
 * AntLine, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/ant-line
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { CSSProperties } from "react";

export type AntLineProps = {
  /** Stroke color for the marching line. */
  color?: string;
  /** Vertical padding around the line inside the edge slot. */
  height?: number;
  /** Dash length in px. */
  dash?: number;
  /** Gap length in px. */
  gap?: number;
  /** Stroke weight in px. */
  weight?: number;
  /** Seconds for one dash cycle. */
  speed?: number;
  /** Use round dots instead of dashes. */
  dotted?: boolean;
  flip?: boolean;
  className?: string;
  style?: CSSProperties;
};

/**
 * Subtle marching-ants edge: a dashed or dotted line that crawls sideways
 * between sections. Lighter than a filled shape, still alive.
 */
export default function AntLine({
  color = "rgba(24,24,27,0.28)",
  height = 28,
  dash = 10,
  gap = 8,
  weight = 1.5,
  speed = 1.2,
  dotted = false,
  flip = false,
  className = "",
  style,
}: AntLineProps) {
  const pattern = dotted ? `0 ${dash + gap}` : `${dash} ${gap}`;
  const mid = height / 2;

  return (
    <div
      aria-hidden
      className={`pointer-events-none absolute inset-x-0 bottom-0 w-full overflow-hidden ${
        flip ? "rotate-180" : ""
      } ${className}`.trim()}
      style={{ height, ...style }}
    >
      <svg viewBox={`0 0 1200 ${height}`} preserveAspectRatio="none" className="block h-full w-full">
        <line
          x1="0"
          y1={mid}
          x2="1200"
          y2={mid}
          stroke={color}
          strokeWidth={weight}
          strokeDasharray={pattern}
          strokeLinecap={dotted ? "round" : "butt"}
          style={{
            animation: `dp-ant-march ${Math.max(speed, 0.2)}s linear infinite`,
          }}
        />
      </svg>
      <style>{`
        @keyframes dp-ant-march {
          from { stroke-dashoffset: 0; }
          to { stroke-dashoffset: -${dash + gap}; }
        }
        @media (prefers-reduced-motion: reduce) {
          line { animation: none !important; }
        }
      `}</style>
    </div>
  );
}