{"_id":"@_gmdev/react-gradient-text","_rev":"2-c60575017eeeaf4408b5c78dfb92b7c1","name":"@_gmdev/react-gradient-text","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@_gmdev/react-gradient-text","version":"1.0.0","keywords":["react","gradient","text","css","component"],"author":{"name":"Gabriele Marconetta","email":"gabriele.marconetta@gmail.com"},"license":"MIT","_id":"@_gmdev/react-gradient-text@1.0.0","maintainers":[{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"}],"homepage":"https://github.com/gab87/react-gradient-text#readme","bugs":{"url":"https://github.com/gab87/react-gradient-text/issues"},"dist":{"shasum":"b4d54b4530f39551899120cb96f5388865451e0a","tarball":"https://registry.npmjs.org/@_gmdev/react-gradient-text/-/react-gradient-text-1.0.0.tgz","fileCount":11,"integrity":"sha512-AKe5YXsCcMjriVLrSPPKz8Pq6pUr1522JDp4QVhfdkxSaiekuryAmIvtvrSuqlOkfW6y9yv7bwOkP6skhF9vZw==","signatures":[{"sig":"MEUCICn26EPYRhAKHngabg90kMfuMPy6xPGe2dk8vOrLI0QAAiEAkd3DbqRQYjlL+7QZKqugfx1nCta/nHKFEPopftbanbA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15802},"main":"./dist/react-gradient-text.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/react-gradient-text.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/react-gradient-text.js","require":"./dist/react-gradient-text.cjs"}},"gitHead":"4fd9cb7513950028a55ace1d9ae75932534e486e","scripts":{"dev":"vite","test":"vitest run","build":"tsc --emitDeclarationOnly && vite build","storybook":"storybook dev -p 6006","test:watch":"vitest","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"},"repository":{"url":"git+https://github.com/gab87/react-gradient-text.git","type":"git"},"_npmVersion":"11.4.2","description":"A React component to render text with CSS gradient colors","directories":{},"_nodeVersion":"24.4.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","jsdom":"^25.0.1","react":"^18.3.1","vitest":"^2.1.0","react-dom":"^18.3.1","storybook":"^8.4.0","typescript":"^5.6.0","@types/node":"^25.9.1","@types/react":"^18.3.0","vite-plugin-dts":"^4.3.0","@storybook/react":"^8.4.0","@types/react-dom":"^18.3.0","@storybook/react-vite":"^8.4.0","@testing-library/react":"^16.1.0","@testing-library/jest-dom":"^6.6.3","@storybook/addon-essentials":"^8.4.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-gradient-text_1.0.0_1779307767048_0.15472236757049118","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@_gmdev/react-gradient-text","version":"1.0.1","description":"A React component to render text with CSS gradient colors","author":{"name":"Gabriele Marconetta","email":"gabriele.marconetta@gmail.com"},"type":"module","main":"./dist/gmdev-react-gradient-text.cjs","module":"./dist/gmdev-react-gradient-text.js","types":"./dist/index.d.ts","publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/gmdev-react-gradient-text.js","require":"./dist/gmdev-react-gradient-text.cjs"}},"scripts":{"dev":"vite","build":"tsc --emitDeclarationOnly && vite build","test":"vitest run","test:watch":"vitest","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@storybook/addon-essentials":"^8.4.0","@storybook/react":"^8.4.0","@storybook/react-vite":"^8.4.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.1.0","@types/node":"^25.9.1","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","jsdom":"^25.0.1","react":"^18.3.1","react-dom":"^18.3.1","storybook":"^8.4.0","typescript":"^5.6.0","vite":"^6.0.0","vite-plugin-dts":"^4.3.0","vitest":"^2.1.0"},"keywords":["react","gradient","text","css","component"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/gab87/react-gradient-text.git"},"_id":"@_gmdev/react-gradient-text@1.0.1","gitHead":"6682bee1e7430ca4a0e185761b38cc9637893268","bugs":{"url":"https://github.com/gab87/react-gradient-text/issues"},"homepage":"https://github.com/gab87/react-gradient-text#readme","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-Q4zWLwYkhPUCUn91RVAnfzTt9kEon1wpLexEsprK/2aNw5JSES4PanHvh9tJT68rxaNHPwmbqb0Y2PM3seHxGg==","shasum":"c0458f02fe699aa349f23d6317904d15cfe9b678","tarball":"https://registry.npmjs.org/@_gmdev/react-gradient-text/-/react-gradient-text-1.0.1.tgz","fileCount":11,"unpackedSize":15850,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAtXJKEljhWzGr9sWhSIAX0e5kO3WKXftIbCRhqKg0q5AiAbs+beNX2Zpse+XC7jezqT8FH/ZWjb6qivPdezXUMs2g=="}]},"_npmUser":{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"},"directories":{},"maintainers":[{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-gradient-text_1.0.1_1779556857336_0.10958929742194279"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-20T20:09:26.848Z","modified":"2026-05-23T17:20:57.584Z","1.0.0":"2026-05-20T20:09:27.191Z","1.0.1":"2026-05-23T17:20:57.473Z"},"bugs":{"url":"https://github.com/gab87/react-gradient-text/issues"},"author":{"name":"Gabriele Marconetta","email":"gabriele.marconetta@gmail.com"},"license":"MIT","homepage":"https://github.com/gab87/react-gradient-text#readme","keywords":["react","gradient","text","css","component"],"repository":{"type":"git","url":"git+https://github.com/gab87/react-gradient-text.git"},"description":"A React component to render text with CSS gradient colors","maintainers":[{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"}],"readme":"# @_gmdev/react-gradient-text\n\nA lightweight React component to render text with CSS gradient colors.\n\n## Installation\n\n```bash\nnpm install @_gmdev/react-gradient-text\n```\n\n## Usage\n\n```tsx\nimport { ReactGradientText } from \"@_gmdev/react-gradient-text\";\n\nfunction App() {\n return (\n \n );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|-------------|---------------|--------------|------------------------------------------------|\n| `text` | `string` | *required* | Text to render |\n| `colors` | `string[]` | *required* | Array of CSS color strings for the gradient |\n| `direction` | `string` | `\"to right\"` | CSS gradient direction (e.g. `\"45deg\"`) |\n| `as` | `ElementType` | `\"span\"` | HTML element to render |\n| `className` | `string` | `undefined` | Additional CSS class |\n| `style` | `CSSProperties` | `undefined` | Additional inline styles (merged with gradient) |\n| `animation` | `AnimationType` | `undefined` | Animation triggered on viewport entry (`fade-in-*`, `scramble`) |\n| `duration` | `number` | `500` | Animation duration in milliseconds |\n\n## Animations\n\nAnimations are triggered automatically when the element enters the viewport via `IntersectionObserver`.\n\n**Available animations:**\n- `fade-in-up`, `fade-in-down`, `fade-in-left`, `fade-in-right`\n- `fade-in-top-left`, `fade-in-top-right`, `fade-in-bottom-left`, `fade-in-bottom-right`\n- `scramble` — characters shuffle progressively until the final text is revealed\n\n### Fade-in example\n\n```tsx\n\n```\n\n### Scramble example\n\n```tsx\n\n```\n\n## Examples\n\n### Custom direction\n\n```tsx\n\n```\n\n### As heading\n\n```tsx\n\n```\n\n### Rainbow\n\n```tsx\n\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run tests\nnpm test\n\n# Run Storybook\nnpm run storybook\n\n# Build the library\nnpm run build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}