{"_id":"@crazygl/hero-animated-text-gradient","_rev":"2-027e6b3af0b7d96b95a44fcb0630fd80","name":"@crazygl/hero-animated-text-gradient","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-animated-text-gradient","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-animated-text-gradient@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/animated-text-gradient","bugs":{"url":"https://github.com/crazygl-com/hero-animated-text-gradient/issues"},"dist":{"shasum":"73d97ecd46f38370ad7263575bfeaa5cc0ac1e03","tarball":"https://registry.npmjs.org/@crazygl/hero-animated-text-gradient/-/hero-animated-text-gradient-0.1.0.tgz","fileCount":9,"integrity":"sha512-+SHCGEJS3M0E2J75OKEUoIypulPnZpymdG+RxESOkpPgms+S/hec/fkOhzGS1AOAZoRGmTbVmoomaXkQPf/1yg==","signatures":[{"sig":"MEYCIQCidBeA8Ft2D/1IcnQh9fQE2fB5hAjt7sfz6bc5f6NXmQIhAOj1w/sFOOGNpl/XMQuqikoLAs7dLPRPBrQkBWJqNDGZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28190},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./style.css","./metadata.json":"./metadata.json"},"gitHead":"8a41026657d7df37741d5cee9aa2c6e59436c02a","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-animated-text-gradient.git","type":"git"},"_npmVersion":"11.12.0","description":"Animated Text Gradient — heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@crazygl/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/hero-animated-text-gradient_0.1.0_1782870462595_0.953754875130217","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-animated-text-gradient","version":"0.1.1","description":"Animated Text Gradient — A heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./metadata.json":"./metadata.json","./style.css":"./style.css"},"dependencies":{"@crazygl/core":"^0.1.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/animated-text-gradient","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-animated-text-gradient.git"},"publishConfig":{"access":"public"},"keywords":["gradient","animated","typography","background-clip","animated-text-gradient","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-animated-text-gradient/issues"},"gitHead":"bd1120836821f9d2bebb87273c8b1b1a0d03c163","_id":"@crazygl/hero-animated-text-gradient@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-dTvNfafnmXyrI+cO3Ifpx74hSRxe9u20EnQ+9L0oi1xyd4nbFpZzaHoNySCw+dT7e77U+/KxlAty+cCSWdzQkw==","shasum":"8e9506bae2a5330355d601adc424d6dabd5ff282","tarball":"https://registry.npmjs.org/@crazygl/hero-animated-text-gradient/-/hero-animated-text-gradient-0.1.1.tgz","fileCount":9,"unpackedSize":28675,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBSyytZWF4AEb221SaI7EhEEJY76bULhoDckIqgArfaeAiEA1l0oNR+Y92/pjfjIBMQCEOu2rodZHuSGxUVA6i8rn0o="}]},"_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"directories":{},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hero-animated-text-gradient_0.1.1_1782922250916_0.783130499048496"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:47:42.407Z","modified":"2026-07-01T16:10:51.258Z","0.1.0":"2026-07-01T01:47:42.718Z","0.1.1":"2026-07-01T16:10:51.089Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-animated-text-gradient/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/animated-text-gradient","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-animated-text-gradient.git"},"description":"Animated Text Gradient — A heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-animated-text-gradient/banner-full.png\" alt=\"Animated Text Gradient\" width=\"640\">\n</p>\n\n# @crazygl/hero-animated-text-gradient\n\nA heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed.\n\n## Demo\n[Animated Text Gradient](https://crazygl.com/hero/animated-text-gradient)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-animated-text-gradient\n```\n\n## Usage\n\n```tsx\nimport AnimatedTextGradient from '@crazygl/hero-animated-text-gradient';\n\nexport default function Hero() {\n  return (\n    <AnimatedTextGradient\n      heading={\"Animated\\nGradient Text\"}\n      color1=\"#ff6b6b\"\n      color2=\"#4ecdc4\"\n      useColor3\n      color3=\"#45b7d1\"\n      animationSpeed={8}\n      gradientAngle={90}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading` (supports `\\n` line breaks).\n- **Gradient** — `color1`/`color2` plus optional `color3`–`color5` (each gated by a `useColorN` toggle), `gradientAngle` (0–360°) and `animationSpeed` (full loop in seconds).\n- **Typography** — `fontSize`, `letterSpacing`, `textAlign`, `headingFontFamily` (Google Font), `headingFontWeight`.\n- **Backdrop** — `transparentBackground` toggle and `bgColor`.\n\n## Best for\n\n- Brand wordmarks and design-system showcases that lean on an accent palette.\n- AI / fintech / e-commerce landing hero blocks needing a lively but tasteful headline.\n- Agency and portfolio sites where the type itself is the centerpiece.\n\n\n\nThis hero is part of [CrazyGL](https://crazygl.com), a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready `SKILL.md` file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.\n","readmeFilename":"README.md","keywords":["gradient","animated","typography","background-clip","animated-text-gradient","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"]}