Animated Shiny Text

A light glare effect which pans across text making it appear as if it is shimmering.

✨ Introducing Nyxb UI

Installation

npx nyxbui@latest add animated-shiny-text

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

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      animation: {
        shimmer: "shimmer 8s infinite",
      },
      keyframes: {
        shimmer: {
          "0%, 90%, 100%": {
            "background-position": "calc(-100% - var(--shimmer-width)) 0",
          },
          "30%, 60%": {
            "background-position": "calc(100% + var(--shimmer-width)) 0",
          },
        },
      },
    },
  },
};

Props

Prop	Type	Description	Default
children		The text to be shimmered.
className	string	The class name to be applied to the shimmer.
shimmerWidth	number	The width of the shimmer in pixels.	100