Shiny Button

1"use client";
2 
3import { ButtonHTMLAttributes } from "react";
4 
5import { MotionProps, motion } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8 
9type MergedProps = Omit<
10  ButtonHTMLAttributes<HTMLButtonElement>,
11  keyof MotionProps
12> &
13  MotionProps;
14 
15interface ShinyButtonProps extends MergedProps {
16  children: React.ReactNode;
17  className?: string;
18}
19 
20export const ShinyButton = ({
21  children,
22  className,
23  ...props
24}: ShinyButtonProps) => {
25  return (
26    <motion.button
27      className={cn("radial-gradient relative rounded-md px-6 py-2", className)}
28      initial={{ "--x": "100%", scale: 1 }}
29      animate={{ "--x": "-100%" }}
30      whileTap={{ scale: 0.97 }}
31      transition={{
32        repeat: Infinity,
33        repeatType: "loop",
34        repeatDelay: 1,
35        type: "spring",
36        stiffness: 20,
37        damping: 15,
38        mass: 2,
39        scale: {
40          type: "spring",
41          stiffness: 10,
42          damping: 5,
43          mass: 0.1,
44        },
45      }}
46      {...props}
47    >
48      <span className="linear-mask relative block h-full w-full font-light tracking-wide text-neutral-100">
49        {children}
50      </span>
51      <span className="linear-overlay absolute inset-0 block rounded-md p-px" />
52    </motion.button>
53  );
54};