Skip to content

Commit 1cd3df8

Browse files
itznaoitznao
committed
pls work
1 parent 4a058c4 commit 1cd3df8

12 files changed

+276
-7
lines changed

‎dist/src/TwinkleText.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
exports.TwinkleText = void 0;
4+
const jsx_runtime_1 = require("react/jsx-runtime");
5+
const react_1 = require("react");
6+
const twinkleStyles_1 = require("./twinkleStyles");
7+
let cssInjected = false;
8+
const TwinkleText = ({ children, className = "", hover = false, groupHover = false, }) => {
9+
(0, react_1.useEffect)(() => {
10+
if (!cssInjected) {
11+
const style = document.createElement("style");
12+
style.textContent = twinkleStyles_1.twinkleCSS;
13+
document.head.appendChild(style);
14+
cssInjected = true;
15+
}
16+
}, []);
17+
const twinkleClass = groupHover
18+
? "group-hover-text-twinkle"
19+
: hover
20+
? "hover-text-twinkle"
21+
: "text-twinkle";
22+
return ((0, jsx_runtime_1.jsx)("span", { "data-text-twinkle": typeof children === "string" ? children : undefined, className: `${twinkleClass} ${className}`, children: children }));
23+
};
24+
exports.TwinkleText = TwinkleText;

‎dist/src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
exports.TwinkleText = void 0;
4+
var TwinkleText_1 = require("./TwinkleText");
5+
Object.defineProperty(exports, "TwinkleText", { enumerable: true, get: function () { return TwinkleText_1.TwinkleText; } });

‎dist/src/twinkleStyles.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
exports.twinkleCSS = void 0;
4+
exports.twinkleCSS = `
5+
@keyframes text-twinkle {
6+
0% { background-position: 150% 0; }
7+
100% { background-position: -250% 0; }
8+
}
9+
10+
.text-twinkle,
11+
.hover-text-twinkle,
12+
.group-hover-text-twinkle {
13+
position: relative;
14+
display: inline-block;
15+
}
16+
17+
.text-twinkle::before,
18+
.hover-text-twinkle::before,
19+
.group-hover-text-twinkle::before {
20+
content: attr(text-twinkle-data);
21+
position: absolute;
22+
inset: 0;
23+
pointer-events: none;
24+
color: transparent;
25+
background-clip: text;
26+
background-image: linear-gradient(
27+
90deg,
28+
transparent,
29+
transparent,
30+
white,
31+
transparent,
32+
transparent
33+
);
34+
background-size: 200% 100%;
35+
background-position: 150% 0;
36+
filter: drop-shadow(0 0 1px #ffffff)
37+
drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
38+
}
39+
40+
.text-twinkle::before {
41+
animation: text-twinkle 5s linear infinite;
42+
}
43+
44+
.hover-text-twinkle::before,
45+
.group-hover-text-twinkle::before {
46+
opacity: 0;
47+
}
48+
49+
.hover-text-twinkle:hover::before,
50+
.group:hover .group-hover-text-twinkle::before {
51+
opacity: 1;
52+
animation: text-twinkle 5s linear infinite;
53+
}
54+
`;

‎dist/tailwind-plugin.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
"use strict";
2+
var __importDefault = (this && this.__importDefault) || function (mod) {
3+
return (mod && mod.__esModule) ? mod : { "default": mod };
4+
};
5+
Object.defineProperty(exports, "__esModule", { value: true });
6+
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
7+
const shimmerBefore = {
8+
content: "attr(text-shimmer-data)",
9+
position: "absolute",
10+
inset: "0",
11+
"pointer-events": "none",
12+
color: "transparent",
13+
"background-clip": "text",
14+
"background-image": "linear-gradient(90deg, #0000, #0000, #0000, #fff, #0000, #0000, #0000)",
15+
"background-size": "200% 100%",
16+
"background-position": "150% 0",
17+
filter: "drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 2px rgba(255,255,255,0.5))",
18+
};
19+
exports.default = (0, plugin_1.default)(function ({ addUtilities, addComponents }) {
20+
addUtilities({
21+
"@keyframes text-shimmer": {
22+
"0%": { "background-position": "150% 0" },
23+
"100%": { "background-position": "-250% 0" },
24+
},
25+
});
26+
addComponents({
27+
".text-shimmer": {
28+
position: "relative",
29+
display: "inline-block",
30+
},
31+
".text-shimmer::before": Object.assign(Object.assign({}, shimmerBefore), { animation: "text-shimmer 5s linear infinite" }),
32+
".hover-text-shimmer": {
33+
position: "relative",
34+
display: "inline-block",
35+
},
36+
".hover-text-shimmer::before": Object.assign(Object.assign({}, shimmerBefore), { opacity: "0" }),
37+
".hover-text-shimmer:hover::before": {
38+
animation: "text-shimmer 5s linear infinite",
39+
opacity: "1",
40+
},
41+
".group-hover-text-shimmer": {
42+
position: "relative",
43+
display: "inline-block",
44+
},
45+
".group-hover-text-shimmer::before": Object.assign(Object.assign({}, shimmerBefore), { opacity: "0" }),
46+
".group:hover .group-hover-text-shimmer::before": {
47+
animation: "text-shimmer 5s linear infinite",
48+
opacity: "1",
49+
},
50+
});
51+
});

‎dist/types/src/TwinkleText.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react";
2+
interface TwinkleTextProps {
3+
children: React.ReactNode;
4+
className?: string;
5+
hover?: boolean;
6+
groupHover?: boolean;
7+
}
8+
export declare const TwinkleText: React.FC<TwinkleTextProps>;
9+
export {};

‎dist/types/src/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { TwinkleText } from "./TwinkleText";

‎dist/types/src/twinkleStyles.d.ts

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

‎dist/types/tailwind-plugin.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare const _default: any;
2+
export default _default;

‎package.json

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
{
22
"name": "react-twinkle-text",
3-
"version": "1.0.3",
3+
"version": "1.0.4",
44
"description": "React twinkle text effect using Tailwind-compatible styles.",
5-
"main": "src/index.js",
5+
"main": "dist/index.js",
6+
"types": "dist/index.d.ts",
67
"files": [
7-
"src"
8+
"dist",
9+
"tailwind-plugin.ts"
810
],
911
"keywords": [
1012
"react",
@@ -29,6 +31,12 @@
2931
"homepage": "https://github.com/itznao/react-twinkle-text#readme",
3032
"devDependencies": {
3133
"@types/node": "^22.15.30",
34+
"@types/react": "^19.1.6",
35+
"@types/react-dom": "^19.1.6",
36+
"tailwindcss": "^4.1.8",
3237
"typescript": "^5.8.3"
38+
},
39+
"scripts": {
40+
"build": "tsc"
3341
}
3442
}

‎src/TwinkleText.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ interface TwinkleTextProps {
1010
groupHover?: boolean;
1111
}
1212

13-
export const TwinkleText: React.FC<TwinkleTextProps> = ({
13+
export const TwinkleText = ({
1414
children,
1515
className = "",
1616
hover = false,
1717
groupHover = false,
18-
}) => {
18+
}: TwinkleTextProps) => {
1919
useEffect(() => {
2020
if (!cssInjected) {
2121
const style = document.createElement("style");

0 commit comments

Comments
 (0)