Shiny Button

"use client";

import { motion } from "framer-motion";
import { type FC, type ReactNode } from "react";

interface ShinyButtonProps {
  children: ReactNode;
  className?: string;
}

const ShinyButton: FC<ShinyButtonProps> = ({ children, className }) => {
  return (
    <motion.button
      initial={{ "--x": "100%", scale: 1 }}
      animate={{ "--x": "-100%" }}
      whileTap={{ scale: 0.97 }}
      transition={{
        repeat: Infinity,
        repeatType: "loop",
        repeatDelay: 1,
        type: "spring",
        stiffness: 20,
        damping: 15,
        mass: 2,
        scale: {
          type: "spring",
          stiffness: 10,
          damping: 5,
          mass: 0.1,
        },
      }}
      className={`relative radial-gradient-button px-6 py-3 rounded-md ${className}`}
    >
      <span className="text-neutral-100 tracking-wide font-light h-full w-full block relative linear-mask">
        {children}
      </span>
      <span className="block absolute inset-0 rounded-md p-px linear-overlay" />
    </motion.button>
  );
};

export default ShinyButton;