Text Shimmer Effect

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

text
config
Description of the SVG image Loading...

Installation

Run the following command:

npx ever-ui-clx@0.2.1 add demo-text-shimmer-effect

Update tailwind.config.ts

Modify your tailwind.config.ts as follows:

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

Usage