{"_id":"@crazygl/hero-scrambly-text","name":"@crazygl/hero-scrambly-text","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-scrambly-text","version":"0.1.1","description":"Scrambly Text — Heading scrambled into random glyphs that resolve in a non-left-to-right order — characters lock in scattered across the word. 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/scrambly-text","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-scrambly-text.git"},"publishConfig":{"access":"public"},"keywords":["scramble","decode","typography","scrambly-text","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-scrambly-text/issues"},"gitHead":"3ab116a5865a8c7cd0872404c2d34a25bc28036d","_id":"@crazygl/hero-scrambly-text@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-4epM5Wg3p+fyI+gx5n0aNUb+7CAqlkgSkEXoaJNHYprq3KeOsjyZQ1iSPsQw5fUBINfu2qFbxC6Yrv3VgKMmnA==","shasum":"73e1245306bef415c07004b7969209acd211d3bc","tarball":"https://registry.npmjs.org/@crazygl/hero-scrambly-text/-/hero-scrambly-text-0.1.1.tgz","fileCount":9,"unpackedSize":27570,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC7hxsebu9vfxZPR8nZW09ohOhoUWYy0FSgfldG7uBE/QIgfxBZ4itc1ZfBPrARUYD6FyyZq4XuBpLKEEuCxnHBFOY="}]},"_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-scrambly-text_0.1.1_1782922510573_0.8035486106891847"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:15:10.364Z","0.1.1":"2026-07-01T16:15:10.733Z","modified":"2026-07-01T16:15:11.057Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Scrambly Text — Heading scrambled into random glyphs that resolve in a non-left-to-right order — characters lock in scattered across the word. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","homepage":"https://crazygl.com/hero/scrambly-text","keywords":["scramble","decode","typography","scrambly-text","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-scrambly-text.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-scrambly-text/issues"},"license":"Apache-2.0","readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-scrambly-text/banner-full.png\" alt=\"Scrambly Text\" width=\"640\">\n</p>\n\n# @crazygl/hero-scrambly-text\n\nHeading scrambled into random glyphs that resolve in a non-left-to-right order — characters lock in scattered across the word.\n\n## Demo\n[Scrambly Text](https://crazygl.com/hero/scrambly-text)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-scrambly-text\n```\n\n## Usage\n\n```tsx\nimport ScramblyText from '@crazygl/hero-scrambly-text';\n\nexport default function Hero() {\n  return (\n    <ScramblyText\n      phrases={`STAY WEIRD\\nMAKE IT REAL\\nSHIP IT`}\n      scrambleColor=\"#5b8def\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `phrases` (one phrase per line, cycled) and `alphabet` (the pool of glyphs used while scrambling).\n- **Timing** — `holdMs` (how long a resolved phrase holds), `scrambleMs` (resolve duration), `perCharShuffle` (glyph re-rolls per second).\n- **Typography** — `textColor` (locked letters), `scrambleColor` (mid-scramble letters), `fontSize`, `headingFontFamily`, `headingFontWeight`.\n- **Backdrop** — `transparentBackground`, `bgColor`.\n\n## Best for\n\n- Developer-tool and SaaS landing pages that want a \"decode\" reveal.\n- Brand taglines and product launches with a techy, terminal feel.\n- Portfolio intros cycling through a few punchy statements.\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","_rev":"1-f40b3df51ff099cc2c5f0e44fcb14842"}