Fixed the missmatch of twinkle and shimmer (old)

Author: itznao

dist/tailwind-plugin.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const plugin_1 = __importDefault(require("tailwindcss/plugin"));
-const shimmerBefore = {
-    content: "attr(text-shimmer-data)",
+const twinkleBefore = {
+    content: "attr(text-twinkle-data)",
     position: "absolute",
     inset: "0",
     "pointer-events": "none",
@@ -18,33 +18,33 @@ const shimmerBefore = {
 };
 exports.default = (0, plugin_1.default)(function ({ addUtilities, addComponents }) {
     addUtilities({
-        "@keyframes text-shimmer": {
+        "@keyframes text-twinkle": {
             "0%": { "background-position": "150% 0" },
             "100%": { "background-position": "-250% 0" },
         },
     });
     addComponents({
-        ".text-shimmer": {
+        ".text-twinkle": {
             position: "relative",
             display: "inline-block",
         },
-        ".text-shimmer::before": Object.assign(Object.assign({}, shimmerBefore), { animation: "text-shimmer 5s linear infinite" }),
-        ".hover-text-shimmer": {
+        ".text-twinkle::before": Object.assign(Object.assign({}, twinkleBefore), { animation: "text-twinkle 5s linear infinite" }),
+        ".hover-text-twinkle": {
             position: "relative",
             display: "inline-block",
         },
-        ".hover-text-shimmer::before": Object.assign(Object.assign({}, shimmerBefore), { opacity: "0" }),
-        ".hover-text-shimmer:hover::before": {
-            animation: "text-shimmer 5s linear infinite",
+        ".hover-text-twinkle::before": Object.assign(Object.assign({}, twinkleBefore), { opacity: "0" }),
+        ".hover-text-twinkle:hover::before": {
+            animation: "text-twinkle 5s linear infinite",
             opacity: "1",
         },
-        ".group-hover-text-shimmer": {
+        ".group-hover-text-twinkle": {
             position: "relative",
             display: "inline-block",
         },
-        ".group-hover-text-shimmer::before": Object.assign(Object.assign({}, shimmerBefore), { opacity: "0" }),
-        ".group:hover .group-hover-text-shimmer::before": {
-            animation: "text-shimmer 5s linear infinite",
+        ".group-hover-text-twinkle::before": Object.assign(Object.assign({}, twinkleBefore), { opacity: "0" }),
+        ".group:hover .group-hover-text-twinkle::before": {
+            animation: "text-twinkle 5s linear infinite",
             opacity: "1",
         },
     });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-twinkle-text",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React twinkle text effect using Tailwind-compatible styles.",
   "main": "dist/index.js",
   "types": "types/src/index.d.ts",

tailwind-plugin.ts

@@ -1,7 +1,7 @@
 import plugin from "tailwindcss/plugin";
 
-const shimmerBefore: Record<string, string> = {
-  content: "attr(text-shimmer-data)",
+const twinkleBefore: Record<string, string> = {
+  content: "attr(text-twinkle-data)",
   position: "absolute",
   inset: "0",
   "pointer-events": "none",
@@ -17,43 +17,43 @@ const shimmerBefore: Record<string, string> = {
 
 export default plugin(function ({ addUtilities, addComponents }: any) {
   addUtilities({
-    "@keyframes text-shimmer": {
+    "@keyframes text-twinkle": {
       "0%": { "background-position": "150% 0" },
       "100%": { "background-position": "-250% 0" },
     },
   });
 
   addComponents({
-    ".text-shimmer": {
+    ".text-twinkle": {
       position: "relative",
       display: "inline-block",
     },
-    ".text-shimmer::before": {
-      ...shimmerBefore,
-      animation: "text-shimmer 5s linear infinite",
+    ".text-twinkle::before": {
+      ...twinkleBefore,
+      animation: "text-twinkle 5s linear infinite",
     },
-    ".hover-text-shimmer": {
+    ".hover-text-twinkle": {
       position: "relative",
       display: "inline-block",
     },
-    ".hover-text-shimmer::before": {
-      ...shimmerBefore,
+    ".hover-text-twinkle::before": {
+      ...twinkleBefore,
       opacity: "0",
     },
-    ".hover-text-shimmer:hover::before": {
-      animation: "text-shimmer 5s linear infinite",
+    ".hover-text-twinkle:hover::before": {
+      animation: "text-twinkle 5s linear infinite",
       opacity: "1",
     },
-    ".group-hover-text-shimmer": {
+    ".group-hover-text-twinkle": {
       position: "relative",
       display: "inline-block",
     },
-    ".group-hover-text-shimmer::before": {
-      ...shimmerBefore,
+    ".group-hover-text-twinkle::before": {
+      ...twinkleBefore,
       opacity: "0",
     },
-    ".group:hover .group-hover-text-shimmer::before": {
-      animation: "text-shimmer 5s linear infinite",
+    ".group:hover .group-hover-text-twinkle::before": {
+      animation: "text-twinkle 5s linear infinite",
       opacity: "1",
     },
   });