[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81502":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},81502,"scrambl","vikingmute\u002Fscrambl","vikingmute","Scrambl is a zero-dependency TypeScript library for creating text scramble, decode, and reveal animations in Vanilla JS, React, and Vue.","https:\u002F\u002Fscrambl.vikingz.me\u002F",null,"TypeScript",33,3,28,0,5,15,54.81,"MIT License",false,"main",true,[],"2026-06-12 04:01:34","\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fscrambl.vikingz.me\">\n    \u003Cimg src=\"https:\u002F\u002Fscrambl.vikingz.me\u002Flogo-mark.webp\" alt=\"Scrambl\" width=\"112\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">Scrambl\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\n  Zero-dependency text scramble animations for Vanilla JS, React, and Vue.\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fscrambl.vikingz.me\">Documentation\u003C\u002Fa>\n  ·\n  \u003Ca href=\"https:\u002F\u002Fscrambl.vikingz.me\u002Fexamples\u002Fdemo-lab\u002F\">Demo Lab\u003C\u002Fa>\n  ·\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvikingmute\u002Fscrambl\u002Fissues\">Issues\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@scrambl\u002Fcore\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@scrambl\u002Fcore?label=%40scrambl%2Fcore\" alt=\"@scrambl\u002Fcore npm version\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@scrambl\u002Freact\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@scrambl\u002Freact?label=%40scrambl%2Freact\" alt=\"@scrambl\u002Freact npm version\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@scrambl\u002Fvue\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@scrambl\u002Fvue?label=%40scrambl%2Fvue\" alt=\"@scrambl\u002Fvue npm version\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\".\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-green.svg\" alt=\"MIT license\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\nScrambl reveals text through configurable scramble, decode, and sweep effects. It is built around a small TypeScript engine with first-class adapters for React and Vue.\n\n## Packages\n\n| Package | Use it for |\n| --- | --- |\n| [`@scrambl\u002Fcore`](.\u002Fpackages\u002Fcore) | Vanilla DOM animations and headless custom renderers |\n| [`@scrambl\u002Freact`](.\u002Fpackages\u002Freact) | React hook and component APIs |\n| [`@scrambl\u002Fvue`](.\u002Fpackages\u002Fvue) | Vue composable and component APIs |\n\n## Install\n\n```bash\nnpm install @scrambl\u002Fcore\n```\n\n```bash\nnpm install @scrambl\u002Freact\n```\n\n```bash\nnpm install @scrambl\u002Fvue\n```\n\nReact and Vue packages include `@scrambl\u002Fcore` as a dependency, so you do not need to install the core package separately when using a framework adapter.\n\n## Quick Start\n\n### Vanilla JS \u002F TypeScript\n\n```ts\nimport { scramble } from '@scrambl\u002Fcore'\n\nconst instance = scramble(document.querySelector('#title'), {\n  text: 'Hello World',\n  chars: 'blocks',\n  from: 'left',\n  duration: 800,\n  ease: 'easeOutCubic',\n})\n\ninstance.restart()\n```\n\n### React\n\n```tsx\nimport { useScramble } from '@scrambl\u002Freact'\n\nexport function Hero() {\n  const { ref, replay } = useScramble({\n    text: 'Hello World',\n    chars: 'blocks',\n    trigger: 'hover',\n  })\n\n  return \u003Ch1 ref={ref} onClick={replay} \u002F>\n}\n```\n\n### Vue\n\n```vue\n\u003Cscript setup>\nimport { useScramble } from '@scrambl\u002Fvue'\n\nconst { ref, replay } = useScramble({\n  text: 'Hello World',\n  chars: 'blocks',\n  trigger: 'hover',\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1 ref=\"ref\" @click=\"replay\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n## Why Scrambl\n\n- Zero dependencies, pure TypeScript, and small browser-friendly output.\n- `requestAnimationFrame` driven playback with `play()`, `pause()`, `restart()`, and `destroy()`.\n- Built-in charsets for blocks, braille, katakana, binary, hex, symbols, numbers, and more.\n- Directional reveal from left, right, center, or random order with optional perturbation.\n- Stable cell rendering for visually uneven glyphs such as symbols, braille, blocks, full-width kana, and CJK mixed text.\n- Deterministic seeds for repeatable animations.\n- Headless `createScrambler()` API for canvas, custom renderers, or manual state pipelines.\n- React and Vue adapters with `manual`, `hover`, `click`, and `inView` triggers.\n- Full TypeScript declarations included.\n\nFor the most polished visual result with stable cell rendering, use a monospace or monospace-like font. If your design uses a proportional font, prefer `renderMode: 'text'` for the most natural typography.\n\n## Character Sets\n\n```ts\nscramble(el, { text: 'Decrypting...', chars: 'blocks' })\nscramble(el, { text: 'Loading', chars: 'binary', cursor: '|' })\nscramble(el, { text: 'Custom', chars: '$€£¥₿' })\n```\n\nBuilt-in presets include `blocks`, `shades`, `braille`, `katakana`, `binary`, `hex`, `numbers`, `lowercase`, `uppercase`, and `symbols`.\n\n## Documentation\n\n- [Installation](https:\u002F\u002Fscrambl.vikingz.me\u002Fguides\u002Finstallation\u002F)\n- [Quick Start](https:\u002F\u002Fscrambl.vikingz.me\u002Fguides\u002Fquick-start\u002F)\n- [`scramble()`](https:\u002F\u002Fscrambl.vikingz.me\u002Fapi\u002Fscramble\u002F)\n- [`createScrambler()`](https:\u002F\u002Fscrambl.vikingz.me\u002Fapi\u002Fcreate-scrambler\u002F)\n- [Options](https:\u002F\u002Fscrambl.vikingz.me\u002Fapi\u002Foptions\u002F)\n- [React](https:\u002F\u002Fscrambl.vikingz.me\u002Fframeworks\u002Freact\u002F)\n- [Vue](https:\u002F\u002Fscrambl.vikingz.me\u002Fframeworks\u002Fvue\u002F)\n- [Demo Lab](https:\u002F\u002Fscrambl.vikingz.me\u002Fexamples\u002Fdemo-lab\u002F)\n\n## Requirements\n\n- Node.js 18+ for development\n- Modern browsers with `requestAnimationFrame`\n- React 18+ for `@scrambl\u002Freact`\n- Vue 3.3+ for `@scrambl\u002Fvue`\n\n## License\n\nMIT\n","Scrambl 是一个无依赖的 TypeScript 库，用于在 Vanilla JS、React 和 Vue 中创建文本乱码、解码和显示动画。其核心功能包括通过配置实现文本的乱码、解码和扫动效果，并且支持多种字符集如块状字符、盲文、片假名等。Scrambl 采用 `requestAnimationFrame` 驱动播放，提供 `play()`、`pause()`、`restart()` 和 `destroy()` 方法控制动画。它适用于需要吸引用户注意力或增加视觉效果的场景，例如网站标题、按钮文字或其他重要信息的展示。由于其轻量级和高性能的特点，Scrambl 特别适合对性能有较高要求的应用。",2,"2026-06-11 04:05:17","CREATED_QUERY"]