Orbit Border

npm install motion

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type OrbitBorderProps = {
  children?: ReactNode;
  /** Seconds per full orbit. */
  duration?: number;
  /** Color of the travelling light. */
  color?: string;
  /** Border thickness in pixels. */
  width?: number;
  className?: string;
};

export function OrbitBorder({
  children,
  duration = 4,
  color = "#5FAEB4",
  width = 1,
  className = "",
}: OrbitBorderProps) {
  const reduceMotion = useReducedMotion();

  return (
    <div
      style={{ padding: width }}
      className={`relative isolate overflow-hidden rounded-2xl bg-white/10 ${className}`}
    >
      {/* an oversized conic gradient spins behind the content; only the border gap shows it */}
      <motion.div
        aria-hidden
        className="absolute left-1/2 top-1/2 -z-10 aspect-square w-[200%] -translate-x-1/2 -translate-y-1/2"
        style={{ background: `conic-gradient(from 0deg, transparent 0deg 280deg, ${color} 340deg, transparent 360deg)` }}
        animate={reduceMotion ? undefined : { rotate: 360 }}
        transition={{ duration, repeat: Infinity, ease: "linear" }}
      />
      <div style={{ borderRadius: `calc(1rem - ${width}px)` }} className="h-full bg-[#0C1010] p-6">
        {children}
      </div>
    </div>
  );
}