first commit

Author: itznao

.gitignore

@@ -0,0 +1 @@
+/.vscode

README.md

@@ -0,0 +1,21 @@
+{
+  "name": "react-twinkle-text",
+  "version": "1.0.0",
+  "description": "React twinkle text effect using Tailwind-compatible styles.",
+  "main": "src/index.js",
+  "files": ["src"],
+  "keywords": ["react", "tailwind", "twinkle", "text", "component"],
+  "author": "itznao",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/itznao/react-twinkle-text"
+  },
+  "bugs": {
+    "url": "https://github.com/itznao/react-twinkle-text/issues"
+  },
+  "homepage": "https://github.com/itznao/react-twinkle-text#readme"
+}

package.json

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import { twinkleCSS } from "./twinkleStyles";
+
+let cssInjected = false;
+
+export const twinkleText = ({
+  children,
+  className = "",
+  hover = false,
+  groupHover = false,
+}) => {
+  useEffect(() => {
+    if (!cssInjected) {
+      const style = document.createElement("style");
+      style.textContent = twinkleCSS;
+      document.head.appendChild(style);
+      cssInjected = true;
+    }
+  }, []);
+
+  const twinkleClass = groupHover
+    ? "group-hover-text-twinkle"
+    : hover
+    ? "hover-text-twinkle"
+    : "text-twinkle";
+
+  return (
+    <span text-twinkle-data={children} className={`${twinkleClass} ${className}`}>
+      {children}
+    </span>
+  );
+};

src/TwinkleText.jsx

@@ -0,0 +1 @@
+export { TwinkleText } from "./TwinkleText";

src/index.js

@@ -0,0 +1,51 @@
+export const twinkleCSS = `
+@keyframes text-twinkle {
+  0% { background-position: 150% 0; }
+  100% { background-position: -250% 0; }
+}
+
+.text-twinkle,
+.hover-text-twinkle,
+.group-hover-text-twinkle {
+  position: relative;
+  display: inline-block;
+}
+
+.text-twinkle::before,
+.hover-text-twinkle::before,
+.group-hover-text-twinkle::before {
+  content: attr(text-twinkle-data);
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  color: transparent;
+  background-clip: text;
+  background-image: linear-gradient(
+    90deg,
+    transparent,
+    transparent,
+    white,
+    transparent,
+    transparent
+  );
+  background-size: 200% 100%;
+  background-position: 150% 0;
+  filter: drop-shadow(0 0 1px #ffffff)
+          drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
+}
+
+.text-twinkle::before {
+  animation: text-twinkle 5s linear infinite;
+}
+
+.hover-text-twinkle::before,
+.group-hover-text-twinkle::before {
+  opacity: 0;
+}
+
+.hover-text-twinkle:hover::before,
+.group:hover .group-hover-text-twinkle::before {
+  opacity: 1;
+  animation: text-twinkle 5s linear infinite;
+}
+`;

src/twinkleStyles.js

@@ -0,0 +1,60 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities, addComponents }) {
+  addUtilities({
+    '@keyframes text-shimmer': {
+      '0%': { 'background-position': '150% 0' },
+      '100%': { 'background-position': '-250% 0' },
+    },
+  });
+
+  const shimmerBefore = {
+    content: 'attr(text-shimmer-data)',
+    position: 'absolute',
+    inset: '0',
+    'pointer-events': 'none',
+    color: 'transparent',
+    'background-clip': 'text',
+    'background-image':
+      'linear-gradient(90deg, #0000, #0000, #0000, #fff, #0000, #0000, #0000)',
+    'background-size': '200% 100%',
+    'background-position': '150% 0',
+    filter:
+      'drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px rgba(255,255,255,0.5))',
+  };
+
+  addComponents({
+    '.text-shimmer': {
+      position: 'relative',
+      display: 'inline-block',
+    },
+    '.text-shimmer::before': {
+      ...shimmerBefore,
+      animation: 'text-shimmer 5s linear infinite',
+    },
+    '.hover-text-shimmer': {
+      position: 'relative',
+      display: 'inline-block',
+    },
+    '.hover-text-shimmer::before': {
+      ...shimmerBefore,
+      opacity: '0',
+    },
+    '.hover-text-shimmer:hover::before': {
+      animation: 'text-shimmer 5s linear infinite',
+      opacity: '1',
+    },
+    '.group-hover-text-shimmer': {
+      position: 'relative',
+      display: 'inline-block',
+    },
+    '.group-hover-text-shimmer::before': {
+      ...shimmerBefore,
+      opacity: '0',
+    },
+    '.group:hover .group-hover-text-shimmer::before': {
+      animation: 'text-shimmer 5s linear infinite',
+      opacity: '1',
+    },
+  });
+});