Shimmer Button

A button with a shimmering light which travels around the perimeter.

Installation

npx nyxbui@latest add shimmer-button

Add the following animations to your tailwind.config.ts file:

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      animation: {
        "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
        slide: "slide var(--speed) ease-in-out infinite alternate",
      },
      keyframes: {
        "spin-around": {
          "0%": {
            transform: "translateZ(0) rotate(0)",
          },
          "15%, 35%": {
            transform: "translateZ(0) rotate(90deg)",
          },
          "65%, 85%": {
            transform: "translateZ(0) rotate(270deg)",
          },
          "100%": {
            transform: "translateZ(0) rotate(360deg)",
          },
        },
        slide: {
          to: {
            transform: "translate(calc(100cqw - 100%), 0)",
          },
        },
      },
    },
  },
};

Props

Prop Name	Type	Description	Default Value
shimmerColor	string	The color of the shimmer	#ffffff
shimmerSize	string	The size of the shimmer	0.05em
borderRadius	string	The border radius of the button	100px
sparkDuration	string	The duration of the spark animation	3s
background	string	The background of the button	rgba(0, 0, 0, 1)
className	string	The class name of the button	undefined
children	React.ReactNode	The children of the button	undefined