Bouton à liseré lumineux

import { motion } from "framer-motion";

interface RotatingLightBorderProps {
  text?: string;
  color?: string;
  /** Segundos por vuelta del reflejo. */
  speed?: number;
}

export default function RotatingLightBorder({
  text = "Explorer",
  color = "#2997ff",
  speed = 3,
}: RotatingLightBorderProps) {
  return (
    <div className="relative overflow-hidden rounded-full p-[1px]">
      <motion.span
        className="absolute inset-[-150%]"
        style={{ background: `conic-gradient(transparent 0 75%, ${color})` }}
        animate={{ rotate: 360 }}
        transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
      />
      <button
        type="button"
        className="relative rounded-full bg-white dark:bg-[#1c1c1e] px-6 py-3 text-sm font-medium text-[#1d1d1f] dark:text-[#f5f5f7]"
      >
        {text}
      </button>
    </div>
  );
}