[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3284":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":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},3284,"typed.js","mattboldt\u002Ftyped.js","mattboldt","A JavaScript Typing Animation Library","http:\u002F\u002Fwww.mattboldt.com\u002Fdemos\u002Ftyped-js\u002F",null,"JavaScript",16273,1767,198,19,0,1,10,44.74,"Other",false,"main",true,[],"2026-06-12 02:00:48","[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Ftyped.js.svg)](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Ftyped.js.svg)\n[![GitHub license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-GPL3-blue.svg)](https:\u002F\u002Fraw.githubusercontent.com\u002Fmattboldt\u002Ftyped.js\u002Fmain\u002FLICENSE.txt)\n\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fmattboldt\u002Ftyped.js\u002Fmain\u002Flogo-cropped.png\" width=\"450px\" title=\"Typed.js\" \u002F>\n\n### [Live Demo](http:\u002F\u002Fwww.mattboldt.com\u002Fdemos\u002Ftyped-js\u002F) | [View All Demos](http:\u002F\u002Fmattboldt.github.io\u002Ftyped.js\u002F) | [View Full Docs](http:\u002F\u002Fmattboldt.github.io\u002Ftyped.js\u002Fdocs) | [mattboldt.com](http:\u002F\u002Fwww.mattboldt.com)\n\nTyped.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.\n\n---\n\n## Licensing\n\n\u003Ctable align=\"center\">\n  \u003Ctr>\n    \u003Cth>\u003Ca href=\"LICENSE.txt\">GPL-3.0 License\u003C\u002Fa>\u003C\u002Fth>\n    \u003Cth>\u003Ca href=\"https:\u002F\u002Fbuy.stripe.com\u002F9B6aEW9hvg4Zg2Hh0FgA800\">Limited Commercial License\u003C\u002Fa>\u003C\u002Fth>\n    \u003Cth>\u003Ca href=\"https:\u002F\u002Fbuy.stripe.com\u002FcNi4gy51fg4ZbMr25LgA801\">Unlimited Commercial License\u003C\u002Fa>\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n      \u003Cp>Free for use on personal and open source projects\u003C\u002Fp>\n      \u003Cp>\u003Ca href=\"LICENSE.txt\">View License\u003C\u002Fa>\u003C\u002Fp>\n    \u003C\u002Ftd>\n    \u003Ctd>\n      \u003Cp>For use on a single commercial project\u003C\u002Fp>\n      \u003Cp>\u003Ca href=\"https:\u002F\u002Fbuy.stripe.com\u002F9B6aEW9hvg4Zg2Hh0FgA800\">Purchase License\u003C\u002Fa>\u003C\u002Fp>\n      \u003Cp>\u003Ca href=\"LIMITED_COMMERCIAL_LICENSE.md\">View License\u003C\u002Fa>\u003C\u002Fp>\n    \u003C\u002Ftd>\n    \u003Ctd>\n      \u003Cp>For use on unlimited commercial projects\u003C\u002Fp>\n      \u003Cp>\u003Ca href=\"https:\u002F\u002Fbuy.stripe.com\u002FcNi4gy51fg4ZbMr25LgA801\">Purchase License\u003C\u002Fa>\u003C\u002Fp>\n      \u003Cp>\u003Ca href=\"UNLIMITED_COMMERCIAL_LICENSE.md\">View License\u003C\u002Fa>\u003C\u002Fp>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Installation\n\nFor use with a build tool like [Vite](https:\u002F\u002Fvitejs.dev\u002F), and\u002For in a React application, install with NPM or Yarn.\n\n#### NPM\n\n```\nnpm install typed.js\n```\n\n#### Yarn\n\n```\nyarn add typed.js\n```\n\n#### General ESM Usage\n\n```js\nimport Typed from 'typed.js';\n\nconst typed = new Typed('#element', {\n  strings: ['\u003Ci>First\u003C\u002Fi> sentence.', '& a second sentence.'],\n  typeSpeed: 50,\n});\n```\n\n### ReactJS Usage\n\n```js\nimport React, { useEffect, useRef } from 'react';\nimport Typed from 'typed.js';\n\nfunction MyComponent() {\n  \u002F\u002F Create reference to store the DOM element containing the animation\n  const el = useRef(null);\n\n  useEffect(() => {\n    const typed = new Typed(el.current, {\n      strings: ['\u003Ci>First\u003C\u002Fi> sentence.', '& a second sentence.'],\n      typeSpeed: 50,\n    });\n\n    return () => {\n      \u002F\u002F Destroy Typed instance during cleanup to stop animation\n      typed.destroy();\n    };\n  }, []);\n\n  return (\n    \u003Cdiv className=\"App\">\n      \u003Cspan ref={el} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### CDN\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Ftyped.js@3.0.0\u002Fdist\u002Ftyped.umd.js\">\u003C\u002Fscript>\n```\n\nFor use directly in the browser via `\u003Cscript>` tag:\n\n```html\n  \u003C!-- Element to contain animated typing -->\n  \u003Cspan id=\"element\">\u003C\u002Fspan>\n\n  \u003C!-- Load library from the CDN -->\n  \u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Ftyped.js@3.0.0\u002Fdist\u002Ftyped.umd.js\">\u003C\u002Fscript>\n\n  \u003C!-- Setup and start animation! -->\n  \u003Cscript>\n    var typed = new Typed('#element', {\n      strings: ['\u003Ci>First\u003C\u002Fi> sentence.', '& a second sentence.'],\n      typeSpeed: 50,\n    });\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n```\n\nMore complex hook-based function component: https:\u002F\u002Fjsfiddle.net\u002Fmattboldt\u002F60h9an7y\u002F\n\nClass component: https:\u002F\u002Fjsfiddle.net\u002Fmattboldt\u002Fovat9jmp\u002F\n\n### Use with Vue.js\n\nCheck out the Vue.js component: https:\u002F\u002Fgithub.com\u002FOrlandster\u002Fvue-typed-js\n\n### Use it as WebComponent\n\nCheck out the WebComponent: https:\u002F\u002Fgithub.com\u002FOrlandster\u002Fwc-typed-js\n\n## Wonderful sites that have used (or are using) Typed.js\n\nhttps:\u002F\u002Fforwardemail.net\n\nhttps:\u002F\u002Fcodesignal.com\n\nhttps:\u002F\u002Fgithub.com\u002Ffeatures\u002Fpackage-registry\n\nhttps:\u002F\u002Fslack.com\n\nhttps:\u002F\u002Fenvato.com\n\nhttps:\u002F\u002Fgorails.com\n\nhttps:\u002F\u002Fproductmap.co\n\nhttps:\u002F\u002Fwww.typed.com\n\nhttps:\u002F\u002Fapeiron.io\n\nhttps:\u002F\u002Fgit.market\n\nhttps:\u002F\u002Fcommando.io\n\nhttp:\u002F\u002Ftestdouble.com\u002Fagency.html\n\nhttps:\u002F\u002Fwww.capitalfactory.com\n\nhttp:\u002F\u002Fwww.maxcdn.com\n\nhttps:\u002F\u002Fwww.powerauth.com\n\n---\n\n### Strings from static HTML (SEO Friendly)\n\nRather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.\nThis allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.\n\n```javascript\n\u003Cscript>\n  var typed = new Typed('#typed', {\n    stringsElement: '#typed-strings'\n  });\n\u003C\u002Fscript>\n```\n\n```html\n\u003Cdiv id=\"typed-strings\">\n  \u003Cp>Typed.js is a \u003Cstrong>JavaScript\u003C\u002Fstrong> library.\u003C\u002Fp>\n  \u003Cp>It \u003Cem>types\u003C\u002Fem> out sentences.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cspan id=\"typed\">\u003C\u002Fspan>\n```\n\n### Type Pausing\n\nYou can pause in the middle of a string for a given amount of time by including an escape character.\n\n```javascript\nvar typed = new Typed('#element', {\n  \u002F\u002F Waits 1000ms after typing \"First\"\n  strings: ['First ^1000 sentence.', 'Second sentence.'],\n});\n```\n\n### Smart Backspacing\n\nIn the following example, this would only backspace the words after \"This is a\"\n\n```javascript\nvar typed = new Typed('#element', {\n  strings: ['This is a JavaScript library', 'This is an ES6 module'],\n  smartBackspace: true, \u002F\u002F Default value\n});\n```\n\n### Bulk Typing\n\nThe following example would emulate how a terminal acts when typing a command and seeing its result.\n\n```javascript\nvar typed = new Typed('#element', {\n  strings: ['git push --force ^1000\\n `pushed to origin with option force`'],\n});\n```\n\n### CSS\n\nCSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:\n\n```css\n\u002F* Cursor *\u002F\n.typed-cursor {\n}\n\n\u002F* If fade out option is set *\u002F\n.typed-fade-out {\n}\n```\n\n## Customization\n\n```javascript\nvar typed = new Typed('#element', {\n  \u002F**\n   * @property {array} strings strings to be typed\n   * @property {string} stringsElement ID of element containing string children\n   *\u002F\n  strings: [\n    'These are the default values...',\n    'You know what you should do?',\n    'Use your own!',\n    'Have a great day!',\n  ],\n  stringsElement: null,\n\n  \u002F**\n   * @property {number} typeSpeed type speed in milliseconds\n   *\u002F\n  typeSpeed: 0,\n\n  \u002F**\n   * @property {number} startDelay time before typing starts in milliseconds\n   *\u002F\n  startDelay: 0,\n\n  \u002F**\n   * @property {number} backSpeed backspacing speed in milliseconds\n   *\u002F\n  backSpeed: 0,\n\n  \u002F**\n   * @property {boolean} smartBackspace only backspace what doesn't match the previous string\n   *\u002F\n  smartBackspace: true,\n\n  \u002F**\n   * @property {boolean} shuffle shuffle the strings\n   *\u002F\n  shuffle: false,\n\n  \u002F**\n   * @property {number} backDelay time before backspacing in milliseconds\n   *\u002F\n  backDelay: 700,\n\n  \u002F**\n   * @property {boolean} fadeOut Fade out instead of backspace\n   * @property {string} fadeOutClass css class for fade animation\n   * @property {boolean} fadeOutDelay Fade out delay in milliseconds\n   *\u002F\n  fadeOut: false,\n  fadeOutClass: 'typed-fade-out',\n  fadeOutDelay: 500,\n\n  \u002F**\n   * @property {boolean} loop loop strings\n   * @property {number} loopCount amount of loops\n   *\u002F\n  loop: false,\n  loopCount: Infinity,\n\n  \u002F**\n   * @property {boolean} showCursor show cursor\n   * @property {string} cursorChar character for cursor\n   * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML \u003Chead>\n   *\u002F\n  showCursor: true,\n  cursorChar: '|',\n  autoInsertCss: true,\n\n  \u002F**\n   * @property {string} attr attribute for typing\n   * Ex: input placeholder, value, or just HTML text\n   *\u002F\n  attr: null,\n\n  \u002F**\n   * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input\n   *\u002F\n  bindInputFocusEvents: false,\n\n  \u002F**\n   * @property {string} contentType 'html' or 'null' for plaintext\n   *\u002F\n  contentType: 'html',\n\n  \u002F**\n   * Before it begins typing\n   * @param {Typed} self\n   *\u002F\n  onBegin: (self) => {},\n\n  \u002F**\n   * All typing is complete\n   * @param {Typed} self\n   *\u002F\n  onComplete: (self) => {},\n\n  \u002F**\n   * Before each string is typed\n   * @param {number} arrayPos\n   * @param {Typed} self\n   *\u002F\n  preStringTyped: (arrayPos, self) => {},\n\n  \u002F**\n   * After each string is typed\n   * @param {number} arrayPos\n   * @param {Typed} self\n   *\u002F\n  onStringTyped: (arrayPos, self) => {},\n\n  \u002F**\n   * During looping, after last string is typed\n   * @param {Typed} self\n   *\u002F\n  onLastStringBackspaced: (self) => {},\n\n  \u002F**\n   * Typing has been stopped\n   * @param {number} arrayPos\n   * @param {Typed} self\n   *\u002F\n  onTypingPaused: (arrayPos, self) => {},\n\n  \u002F**\n   * Typing has been started after being stopped\n   * @param {number} arrayPos\n   * @param {Typed} self\n   *\u002F\n  onTypingResumed: (arrayPos, self) => {},\n\n  \u002F**\n   * After reset\n   * @param {Typed} self\n   *\u002F\n  onReset: (self) => {},\n\n  \u002F**\n   * After stop\n   * @param {number} arrayPos\n   * @param {Typed} self\n   *\u002F\n  onStop: (arrayPos, self) => {},\n\n  \u002F**\n   * After start\n   * @param {number} arrayPos\n   * @param {Typed} self\n   *\u002F\n  onStart: (arrayPos, self) => {},\n\n  \u002F**\n   * After destroy\n   * @param {Typed} self\n   *\u002F\n  onDestroy: (self) => {},\n});\n```\n\n## Contributing\n\n### [View Contribution Guidelines](.\u002F.github\u002FCONTRIBUTING.md)\n\n## end\n\nThanks for checking this out. If you have any questions, I'll be on [Twitter](https:\u002F\u002Ftwitter.com\u002Fatmattb).\n\nIf you're using this, let me know! I'd love to see it.\n\nIt would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http:\u002F\u002Fwww.mattboldt.com)\n","Typed.js 是一个用于创建打字动画效果的 JavaScript 库。其核心功能包括自定义字符串、设置打字速度以及自动回删已输入的文字，支持多种格式化选项如 HTML 标签等。该库使用简单，可以通过 npm 或 yarn 安装，并且兼容现代前端框架如 React，也提供了 CDN 链接供直接在网页中引用。适用于需要增强用户体验或视觉吸引力的各种网站项目，特别是在展示动态文本内容时非常有用，比如个人主页、产品介绍页或是在线教程页面等场景。",2,"2026-06-11 02:53:20","top_language"]