{"_id":"tsparticles-engine","_rev":"53-adf44ab3750fc2859190fd1d94b8cb0d","name":"tsparticles-engine","dist-tags":{"alpha":"2.0.0-alpha.7","latest":"2.12.0","beta":"2.0.0-beta.4","next":"2.0.4"},"versions":{"2.0.0-alpha.4":{"name":"tsparticles-engine","version":"2.0.0-alpha.4","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"core/main"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com","url":"https://www.matteobruni.it"},"contributors":[{"name":"Gabriel Barker","url":"https://github.com/gabrielbarker"},{"name":"Tyler Burnett","url":"https://github.com/TylerBurnett"},{"name":"Jonathan Adams","url":"https://github.com/PieceMaker"}],"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.core.min.js","unpkg":"tsparticles.core.min.js","browser":"index.js","types":"index.d.ts","funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"optionalDependencies":{"pathseg":"^1.2.0"},"dependencies":{"pathseg":"^1.2.0"},"_id":"tsparticles-engine@2.0.0-alpha.4","_nodeVersion":"14.15.1","_npmVersion":"lerna/4.0.0/node@v14.15.1+x64 (darwin)","dist":{"integrity":"sha512-72cDnQ/q3cXewgnSGPoidNaaieXpyn4sVpckQu98IT49ruc5165iPgWWK2NNHbVHdCnkHDaC36eOfJIO4lNMbw==","shasum":"1b22535c0bd84f5aa9ddbf344ac16e5caa64ac4c","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-alpha.4.tgz","fileCount":7188,"unpackedSize":4303027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSy5oCRA9TVsSAnZWagAAY+kQAIsxyDNWSOuklXQbURBT\nQy/NpbqS/8G/F5KIv5qUC1VMoc7eunGnTY3jEL1n1e0OkBoZm/4RQAtC6mTa\nbUGmLDvbKmrbp16dJ+PSMibYvRsl8njxS/K708QULexVOt4zISRTD7GnntbV\n87DabplcMtIDbdr82n3yKh1SHBrWosdbLlxb/TUHWBd8oiVGUc1lEkPUtgOf\n1njRhEPfzGu0dGMJNHMGu2DOrIwTt/E+v4v+NItz1Qe2bt9lODR+hKp/HY2r\n3ZmFRCn8w0fcGpBrFetpx65Mqe6OVfr6oOUtrH9IWVwOa/DNYcfcPl4TWTSa\nVa/lc9fsJxnHXDkUUVsNxL/A//8sBl+8hnOAwGrrQKH5+C/aEEJuHlmVTcil\nj+vMqq3BTeba7eUA+Zhv67/q02VzEvE7EkJtq0Z+WVsf6/C+WQ+fRmA1Ps+g\nXQy48djyLYDELM5hfAkH7FTZagkR8GhUijM9XmS660krTo4UGfEbBt1SB8Pa\nboWpC4TW72H+lNP9gSM+nIGtvuup49bKsbJzC9ODCCoTDQ86nboOdD6x0yqk\n8x1PKlMtwvJaOeR5nGqs7lgoDGJyWm50KwEaJEvekr7mntup7LNkVxc6ATzW\nigShqm5os+SnjvhykoIptRAdpKy6x6ydyKPlV+QCjmibBVn9JJfmJ+4bA0kR\n8XR+\r\n=RcG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpc+adoSa58+W+8wcUGMA+ocbXGD/nrgXQAhgoJ4fR1gIhAODVyF3QQyFCXpEkHD/sQdQ+CMUWqBju7+8Z9clV4wj0"}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-alpha.4_1615539815872_0.9108459101824764"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-alpha.5":{"name":"tsparticles-engine","version":"2.0.0-alpha.5","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com","url":"https://www.matteobruni.it"},"contributors":[{"name":"Gabriel Barker","url":"https://github.com/gabrielbarker"},{"name":"Tyler Burnett","url":"https://github.com/TylerBurnett"},{"name":"Jonathan Adams","url":"https://github.com/PieceMaker"}],"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","typesVersions":{">=4.0 <4.1":{"*":["dist/ts4.0"]},">=3.8 <4.0":{"*":["dist/ts3.8"]},"<3.8":{"*":["dist/ts3.4"]}},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"readme":"[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free ([\\*](#dependencies)) and browser ready!**\n\n_[Particles.js](https://github.com/VincentGarreau/particles.js) converted in TypeScript, dependency free ([\\*](#dependencies)), improved with new cool 😎 features and various bugs fixed and **it's actively maintained**!_\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles) [![Mentioned in Awesome Javascript](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/sorrycc/awesome-javascript#readme) [![Mentioned in Awesome Web Animation](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/sergey-pimenov/awesome-web-animation#readme)\n\n## Do you want to use it on your website?\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier**.\n\nYou'll find the instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all files splitted for `import` syntax.\n\n**If you are still interested** some lines below there are some instructions for migrating from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use this hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles\");\n\n// or\n\nimport { tsParticles } from \"tsparticles\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n#### `ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n#### `inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n#### `jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![Mentioned in Awesome jQuery](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/petk/awesome-jquery#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n#### `preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles) [![Mentioned in Awesome Preact](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/preactjs/awesome-preact#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n#### `react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![Mentioned in Awesome React](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/enaqx/awesome-react#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### Svelte\n\n#### `svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n#### `particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue) [![Mentioned in Awesome Vue.js](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/vuejs/awesome-vue#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n#### `particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![Mentioned in Awesome Vue.js](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/vuejs/awesome-vue#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are created for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will may vary, new ones can be created or older ones updated with latest features or changed to a better style. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be credited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/Samples>\n\n[![Particles demo](https://particles.js.org/images/demo.png?v=1.8.1)](https://particles.js.org/Samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/Samples#chars)\n\n---\n\n### Mouse hover connections\n\n[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.js.org/Samples#connect)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/Samples#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/Samples#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/Samples#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/Samples#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/Samples#background)\n\n---\n\n#### COVID-19 SARS-CoV-2 particles\n\n[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/Samples#virus)\n\n_Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!_\n\n**COVID-19 is a serious disease. Please stay at home, wear a mask and stay safe!**\n\n---\n\n**particles.json**\n\nYou can find a sample config [here](https://particles.js.org/docs/modules/_core_container_.html) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options available [here](https://particles.js.org/docs/interfaces/_options_interfaces_ioptions_.ioptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout my [profile](https://codepen.io/matteobruni)\n\nOtherwise there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\nyarn install && yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n## Dependencies\n\nYou may have notices the \\* near dependency free. Well almost all features works without any dependency, but... Well there's a little but. The **Polygon Mask** feature requires [`pathseg`](https://github.com/progers/pathseg) for some browsers to work fine, and obviously the Icon Fonts (like `FontAwesome` ) must be included in your page.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** library is fully compatible with the _particles.js_ configuration.\n\nSeriously, you just need to change the script source et-voilà, **you're ready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the switch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/_core_interfaces_iplugin_.html)...\\_\n\n---\n\n### API Docs\n\nDocumentation and Development references [here](https://particles.js.org/docs/) 📖\n\n---\n\n[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.com/invite/Qkwcb2M9) [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0-alpha.5","_nodeVersion":"14.15.1","_npmVersion":"lerna/4.0.0/node@v14.15.1+x64 (darwin)","dist":{"integrity":"sha512-RyowzNL7Pg03JWZf8vvmRuS+l42aNsU2qgskl0K70dO2M3hfDdsDSibnIv7GqIjYSeO5WGp4ZixhvGifptuX4Q==","shasum":"dd054053444426d475d19ef47c4d886bef221634","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-alpha.5.tgz","fileCount":7188,"unpackedSize":4304416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTivNCRA9TVsSAnZWagAAnV0P/1Z8AvYM3jD8eKV1lnTG\nz+jL4gHkiO0VIjWaSUd1BzedaXSyboGt/jTKl3n6M88DccqUZPRXw03iiJTn\nqEaJ4kzBQV5p0HV7upEKsCAWnIq71T87v4oXY6ETw2Ssm6DE0dBy+d8k+T6I\nx1QLev7GWFUtS4aeT2KrPG/Du1MGYSzLUr1ZyTs3onCgLapf7DSTOsDLcc1T\nEtCmpV+q1w/ZZu/helZgHD28JjRZBamJwP81UyBICYX8AMdZHsyp5Zt4VchZ\n3wiAMU08n1zMf/IP51dMOyHfTr9vtri+MDbaMR2tJI2544pr6hsL3dojrTQY\ni/my2WqnLKjbnJsiuPW92DOE5+fiDAMm6EFddUGuCOqdj7Wsip1Fn6XprKpb\nosp55LQB0MnsHkQpb0rmZMuoVIYO0bQ4d5B20xU4TyfFR2BzwBUx0/M5KO4l\nbJT6qoNzHJDulom2QMF1qeQ6vZRtxFmOBypUjnVzWsinmsSGNHDxeDrR/UxF\nOxx2urOWL+gpI3CS485axhFjS2o9jgZ0sLJ2+pZygMkuHKylHmM21ejs5mMj\nxXCPmW2/30WvsPtM5NILtOIIFddGxEt+TPEoWrn4fYmkm6IAPz00xM3UxcnC\nJjEkUDu1jNewdTc2zwj9w9zISgLaCwK7Q7x4hJSQNvT/ffes5oVGL0OUpdGR\nIhuK\r\n=OVaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQYaMxhXAP0FZj+p332dxblAV9m3U5J8fGdK5ECVCNMAiBdC0zs0aysShd9JtwJSxuEr/7vNYvhgfLuKuHK7WXl0Q=="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-alpha.5_1615735756519_0.12623704281790094"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-alpha.6":{"name":"tsparticles-engine","version":"2.0.0-alpha.6","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com","url":"https://www.matteobruni.it"},"contributors":[{"name":"Gabriel Barker","url":"https://github.com/gabrielbarker"},{"name":"Tyler Burnett","url":"https://github.com/TylerBurnett"},{"name":"Jonathan Adams","url":"https://github.com/PieceMaker"}],"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","typesVersions":{">=4.0 <4.1":{"*":["dist/ts4.0"]},">=3.8 <4.0":{"*":["dist/ts3.8"]},"<3.8":{"*":["dist/ts3.4"]}},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"readme":"[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free ([\\*](#dependencies)) and browser ready!**\n\n_[Particles.js](https://github.com/VincentGarreau/particles.js) converted in TypeScript, dependency free ([\\*](#dependencies)), improved with new cool 😎 features and various bugs fixed and **it's actively maintained**!_\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles) [![Mentioned in Awesome Javascript](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/sorrycc/awesome-javascript#readme) [![Mentioned in Awesome Web Animation](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/sergey-pimenov/awesome-web-animation#readme)\n\n## Do you want to use it on your website?\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier**.\n\nYou'll find the instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all files splitted for `import` syntax.\n\n**If you are still interested** some lines below there are some instructions for migrating from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use this hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles\");\n\n// or\n\nimport { tsParticles } from \"tsparticles\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n#### `ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n#### `inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n#### `jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![Mentioned in Awesome jQuery](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/petk/awesome-jquery#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n#### `preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles) [![Mentioned in Awesome Preact](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/preactjs/awesome-preact#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n#### `react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![Mentioned in Awesome React](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/enaqx/awesome-react#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### Svelte\n\n#### `svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n#### `particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue) [![Mentioned in Awesome Vue.js](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/vuejs/awesome-vue#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n#### `particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![Mentioned in Awesome Vue.js](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/vuejs/awesome-vue#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are created for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will may vary, new ones can be created or older ones updated with latest features or changed to a better style. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be credited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/Samples>\n\n[![Particles demo](https://particles.js.org/images/demo.png?v=1.8.1)](https://particles.js.org/Samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/Samples#chars)\n\n---\n\n### Mouse hover connections\n\n[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.js.org/Samples#connect)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/Samples#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/Samples#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/Samples#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/Samples#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/Samples#background)\n\n---\n\n#### COVID-19 SARS-CoV-2 particles\n\n[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/Samples#virus)\n\n_Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!_\n\n**COVID-19 is a serious disease. Please stay at home, wear a mask and stay safe!**\n\n---\n\n**particles.json**\n\nYou can find a sample config [here](https://particles.js.org/docs/modules/_core_container_.html) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options available [here](https://particles.js.org/docs/interfaces/_options_interfaces_ioptions_.ioptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout my [profile](https://codepen.io/matteobruni)\n\nOtherwise there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\nyarn install && yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n## Dependencies\n\nYou may have notices the \\* near dependency free. Well almost all features works without any dependency, but... Well there's a little but. The **Polygon Mask** feature requires [`pathseg`](https://github.com/progers/pathseg) for some browsers to work fine, and obviously the Icon Fonts (like `FontAwesome` ) must be included in your page.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** library is fully compatible with the _particles.js_ configuration.\n\nSeriously, you just need to change the script source et-voilà, **you're ready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the switch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/_core_interfaces_iplugin_.html)...\\_\n\n---\n\n### API Docs\n\nDocumentation and Development references [here](https://particles.js.org/docs/) 📖\n\n---\n\n[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.com/invite/Qkwcb2M9) [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0-alpha.6","_nodeVersion":"14.15.1","_npmVersion":"lerna/4.0.0/node@v14.15.1+x64 (darwin)","dist":{"integrity":"sha512-HbPtEEvBuyaJe7kPkrVJ80FavzlSjeIEQMFveExN3w9hIkw6O3qFLRTe1+BSX6+vDd5zk5iBwPEshU/A3ak6qw==","shasum":"9290a074e8fdcd9917015eb6a908d7e72b5ad501","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-alpha.6.tgz","fileCount":7188,"unpackedSize":4313760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8GbCRA9TVsSAnZWagAA2QgQAICYnSrjagIj5yODzBGH\nGtbZAt3bMm/8ZQaIg60EpkFkSA7h462GT5jlH41dC8ZKr/H1ggzTv3GHa9XM\nRySs3bxa+nkO0tpFTAGGLOeWrEGFpHKrvmSehFGGNw9bUGLYisfhbMhmGXti\nBjINtR1o9jmAjFzkblXmZ52hTW+G+GwvyGl4pGi7Mpq0B6jvNKzXXRaa4Y7Y\n/Ru68+B1yeyOjlSNTqQDL+e2ZFJFBOuI78k4rKRBrBXJaRYsWEheW/3iFX6c\nBgg9KDBcb5ET4q3oxxTVhrP3vz3IYdBghXmTLcy7BYGQJrDPlKQnPxMdWnhw\nZt+d7SfWfH2NJHJwfsV5Y38Ui/jZf1ZzN/euKA59RoDCR/F3pZMlcCGrqjVH\n7y+1Z2zPN/4P3ivmOTqa20PQYtAuQPkTgKFOCU70Wrccid8WN1nY5pOnM8y0\n5Tzh+1HrtVR3z5Gp39HCeF8EWVrgPN5USRFEymojNjMfsUUPajP6LR3l5HI1\noo37gBLWzbLDeChL5nYGArX48hLQVqGvN0X7i0yWuAbVmmOXyndwXQk+6p8Q\nw0W65It4ye2/UVWFW3YTew/mADjtV+3iiJy03NQXirGpYdL9gsCpnTFVQz+z\nDWO8A5iu2XMAsjuzd4zU9eN4ybLKZy1KBskuUOHp733M2JuUdtr/fpiY+fAR\nk13y\r\n=l+RO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKJB9Dc+zs6mboKyEY4En+GsmC80RtHTmNn+YE8Z70cwIhANmM3wPTJS0EZ70Ua48tSlKR9ixvNucL0rbF4r3tODIs"}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-alpha.6_1617150363256_0.4089912546080703"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-alpha.7":{"name":"tsparticles-engine","version":"2.0.0-alpha.7","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com","url":"https://www.matteobruni.it"},"contributors":[{"name":"Gabriel Barker","url":"https://github.com/gabrielbarker"},{"name":"Tyler Burnett","url":"https://github.com/TylerBurnett"},{"name":"Jonathan Adams","url":"https://github.com/PieceMaker"}],"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","typesVersions":{">=4.0 <4.1":{"*":["dist/ts4.0"]},">=3.8 <4.0":{"*":["dist/ts3.8"]},"<3.8":{"*":["dist/ts3.4"]}},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"readme":"[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free ([\\*](#dependencies)) and browser ready!**\n\n_[Particles.js](https://github.com/VincentGarreau/particles.js) converted in TypeScript, dependency free ([\\*](#dependencies)), improved with new cool 😎 features and various bugs fixed and **it's actively maintained**!_\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles) [![Mentioned in Awesome Javascript](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/sorrycc/awesome-javascript#readme) [![Mentioned in Awesome Web Animation](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/sergey-pimenov/awesome-web-animation#readme)\n\n## Do you want to use it on your website?\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier**.\n\nYou'll find the instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all files splitted for `import` syntax.\n\n**If you are still interested** some lines below there are some instructions for migrating from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use this hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles\");\n\n// or\n\nimport { tsParticles } from \"tsparticles\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n#### `ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n#### `inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n#### `jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![Mentioned in Awesome jQuery](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/petk/awesome-jquery#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n#### `preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles) [![Mentioned in Awesome Preact](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/preactjs/awesome-preact#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n#### `react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![Mentioned in Awesome React](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/enaqx/awesome-react#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### Svelte\n\n#### `svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n#### `particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue) [![Mentioned in Awesome Vue.js](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/vuejs/awesome-vue#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n#### `particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![Mentioned in Awesome Vue.js](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/vuejs/awesome-vue#readme)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are created for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will may vary, new ones can be created or older ones updated with latest features or changed to a better style. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be credited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/Samples>\n\n[![Particles demo](https://particles.js.org/images/demo.png?v=1.8.1)](https://particles.js.org/Samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/Samples#chars)\n\n---\n\n### Mouse hover connections\n\n[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.js.org/Samples#connect)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/Samples#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/Samples#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/Samples#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/Samples#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/Samples#background)\n\n---\n\n#### COVID-19 SARS-CoV-2 particles\n\n[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/Samples#virus)\n\n_Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!_\n\n**COVID-19 is a serious disease. Please stay at home, wear a mask and stay safe!**\n\n---\n\n**particles.json**\n\nYou can find a sample config [here](https://particles.js.org/docs/modules/_core_container_.html) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options available [here](https://particles.js.org/docs/interfaces/_options_interfaces_ioptions_.ioptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout my [profile](https://codepen.io/matteobruni)\n\nOtherwise there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\nyarn install && yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n## Dependencies\n\nYou may have notices the \\* near dependency free. Well almost all features works without any dependency, but... Well there's a little but. The **Polygon Mask** feature requires [`pathseg`](https://github.com/progers/pathseg) for some browsers to work fine, and obviously the Icon Fonts (like `FontAwesome` ) must be included in your page.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** library is fully compatible with the _particles.js_ configuration.\n\nSeriously, you just need to change the script source et-voilà, **you're ready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the switch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/_core_interfaces_iplugin_.html)...\\_\n\n---\n\n### API Docs\n\nDocumentation and Development references [here](https://particles.js.org/docs/) 📖\n\n---\n\n[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.com/invite/Qkwcb2M9) [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0-alpha.7","_nodeVersion":"14.15.1","_npmVersion":"lerna/4.0.0/node@v14.15.1+x64 (darwin)","dist":{"integrity":"sha512-UdwkI8pIfoKdk3EplR+Tt/crNRUUq/mPGrJ5erZAUshfoTa2BosQAtEsl2qE+ay6K81wjgAhnxxfRYySb8DkYw==","shasum":"6fa665a6596456db2acaab05684253ed4e101897","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-alpha.7.tgz","fileCount":7188,"unpackedSize":4315752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcw1WCRA9TVsSAnZWagAAhscP/AiwyqfplVXnf5DKzMqP\naC6VG5n0uDUkgQClHlo3WRH7wqoBCmf+Fi9i/d+u3+UisPbJsqgzt5L186KV\n/nt/23Mn/e4TpQC1Hb2VWrvY4xGefTmiTbw7x6CDZRMdKVblXbxM5wvqY2fY\nszb377JtqiSla9mNXr5rI1gF1Ob5jJ6X83BTyJVmwP6THCzd1i4pMW4tYhZG\n2sfYyqv1TkVLm8WbBPOG+wbTyWZNPiClV5xQBssAzCfTLskw9B3djSYFlFon\nkqMa0gb6sspH+RyBq4+Hw+YRtdpKmYrkHXZTKU0UAn7ZF442faX8z5KjfR5S\nYH2TEHimki+5SsGSG1CI5JotnYvukohAZn42Hg0Ti3GTyT+AJGgH3uGTwjwA\nARGU2+2F+8SRHcRU1A8JJMO0fNkrddiycMUUxgeDiJaBR/nrWZFl+ud+4JBP\nkMSruMRLCk2DLwuUpM9Sow9tXQGh0VllaYf0XwpI8oLO2iTOjq9MseUqp+zC\nFcr3PN6/ur7Qmf8M7MipJ9cdIbdv/pzfstTKV+HJKN2YQg2n6fqlTuhTHoi3\nTAApjsTaC9AqIMFB9vmj/cFnrtZ7UDHEbb/ZsE7gfI0PdMWVZNL27qAkyYTS\nVYiokPsSLCCmRln82qUV0yH9dsx6joGNbQnvRJXr4cznt7UfrIgMTgAPsR+U\njrew\r\n=s9OA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsNo+3u4dIyYDtPkVOmaCvO8r31n0ag3w/LnKJGp70eQIgAnf/W7wyN+PRaLD0gVbfHig0u2pRRnXj6eT1bKSxrTk="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-alpha.7_1618152789893_0.3982832795917388"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-beta.0":{"name":"tsparticles-engine","version":"2.0.0-beta.0","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"core/main"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"contributors":[{"name":"Gabriel Barker","url":"https://github.com/gabrielbarker"},{"name":"Tyler Burnett","url":"https://github.com/TylerBurnett"},{"name":"Jonathan Adams","url":"https://github.com/PieceMaker"}],"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","_id":"tsparticles-engine@2.0.0-beta.0","_nodeVersion":"14.15.1","_npmVersion":"lerna/4.0.0/node@v14.15.1+x64 (darwin)","dist":{"integrity":"sha512-2EyqeA5RhsIlp214RxzRtsvoo+E4RiKnwkEaogc8VOnNRIAutunH9I+Ql7pucjJxQRTBC3/lU/QZrbNnCUQrvA==","shasum":"2080cb76b0c1c4d144fbbd3b9be21d384e3b38a2","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-beta.0.tgz","fileCount":1752,"unpackedSize":1831011,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIATsdbMkYLq6WCK2NSvFR1tIKn/NA5xc8hIEu5GAo0VqAiAZyjrkyprHVfaRBacnqRc6N0TUugaOEXiCkLfdvTv1dw=="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-beta.0_1633479894048_0.40923970761885786"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-beta.1":{"name":"tsparticles-engine","version":"2.0.0-beta.1","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"core/main"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"contributors":[{"name":"Gabriel Barker","url":"https://github.com/gabrielbarker"},{"name":"Tyler Burnett","url":"https://github.com/TylerBurnett"},{"name":"Jonathan Adams","url":"https://github.com/PieceMaker"}],"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade)\n\n[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are still interested** some lines below there are some instructions for migrating from the old particles.js\nlibrary.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use this hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n#### `ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n#### `inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n#### `jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n#### `preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n#### `react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### Svelte\n\n#### `svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n#### `particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n#### `particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/>\n\n[![Particles demo](https://particles.js.org/images/demo.png?v=1.8.1)](https://particles.js.org/)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/#chars)\n\n---\n\n### Mouse hover connections\n\n[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.js.org/#connect)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/#background)\n\n---\n\n#### COVID-19 SARS-CoV-2 particles\n\n[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/#virus)\n\n_Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!_\n\n**COVID-19 is a serious disease. Please stay at home, wear a mask and stay safe!**\n\n---\n\n**particles.json**\n\nYou can find a sample config [here](https://particles.js.org/docs/modules/_core_container_.html) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/_options_interfaces_ioptions_.ioptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\nyarn install && yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** library is fully compatible with the _particles.js_ configuration.\n\nSeriously, you just need to change the script source et-voilà, **you're ready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/_core_interfaces_iplugin_.html)...\\_\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0-beta.1","_nodeVersion":"14.15.1","_npmVersion":"lerna/4.0.0/node@v14.15.1+x64 (darwin)","dist":{"integrity":"sha512-Bq/KyKBdxUZ7zcMrZPgoHgJReHqiGn/QTFLu4JXApKNI58me5oKyArZ9iNm0vv5jedENd9k4dFJMsHP1kQPk8w==","shasum":"4e60294b162a3ddda0ba55319239a9eabb5a8ca9","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-beta.1.tgz","fileCount":1752,"unpackedSize":1831011,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8G1rLDsRNdoqEbvG3d2tgJJDWbJ3CF1FhN7RMmGoWIAiBY33pf3Ck8RWFKkmBlzG+nG1HYoqgIu01PN1EYuz0bPA=="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-beta.1_1633556004078_0.24093409565866275"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-beta.2":{"name":"tsparticles-engine","version":"2.0.0-beta.2","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n<a href = \"https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI\"> <img src = \"https://particles.js.org/images/slack.png\"> </a> <a href = \"https://discord.gg/hACwv45Hme\"> <img src = \"https://particles.js.org/images/discord.png\" height = \"38px\"> </a> <a href = \"https://t.me/tsparticles\"> <img src = \"https://particles.js.org/images/telegram.png\" width = \"41px\" height = \"41px\"> </a>\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [WordPress](#WordPress)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo.png?v=1.8.1)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0-beta.2","_nodeVersion":"16.13.0","_npmVersion":"lerna/4.0.0/node@v16.13.0+arm64 (darwin)","dist":{"integrity":"sha512-PlY0Tsl3L3A+97OthWVsXZ9mawU6atu3tvBwEoQqNLay9iirTtz9Sxg8DrrJ1pq4Sj5kYGiLIsULZbKPLWqSAg==","shasum":"39046bf98eeb084dba7b4246422aef4f06133488","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-beta.2.tgz","fileCount":1782,"unpackedSize":1964035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq1//CRA9TVsSAnZWagAA9ksP/2pYzeboKIIZUawhJHBN\nh1/vG4mConIsAgB2konrLlkKkozj1pe8i4pYxg8h3mYzvkhhHqPRXvk+hE3R\nmiXdf7aN7l2DuYqhwQTfmYZysT8/8mIQxmIfwk2Hu/xEomsOQQ2ZXL8vIxQY\nurZi2CePBFcuGK6828Weutdn/oZ5u0ZsHE/FZ1+snhJKQlTH4iXHMpUpzXZj\n87CKnDLknCosmq8Ch7TDPcGPUOHQ1eDpUvrovbYjEbw4hfWTpZnwFH5i/PEF\npY9wcHkLAdKP5jYChZsMzVBS3dS0DKnIPhIheijSRyOZYCJRHh1UR04U2O/Q\nm2qxYf+x9TU5ijdtc17lQmT+KRxSP2CCH5LJjzle3e5nxWxsV5OROy7MTpGj\nsCTppeTYbs1fegVGR3JGSgtUTHDKPTn22kzcnwg+8U93htJYIHzVcw0D7gqq\nu6vWNYmuzcAmOeJFS5LBinKyoNpuoO9DZEb56CWPJp43JTw9EfO8/Vs2vozL\nooLhRgTLeWNe5gH98eyGKUucGk36rRfCtI7ctsYhso2pgykPNYWA7my8qBgn\ndy0A3TxtyHtIhjlHL703ux1bMgBbLIRBaDz25bMQPaQjhQ8TOP9TUH+Xs1vp\ndniGfrGMzGHQsvPw0De5znr9YaA0BsF2e8YrkyW9UHpAtOaOu19p9gg9oiUj\nuiM7\r\n=mY6J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp6MUv1GpSW3cP447zBhryYNljptzJG5/hEQ5Iotm7FgIhANZknhUB4TSq77cQjk9fth5m7bIj+807gQMjmLAHQJ4w"}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-beta.2_1638621183214_0.5520722358187209"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-beta.3":{"name":"tsparticles-engine","version":"2.0.0-beta.3","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n<a href = \"https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI\"> <img src = \"https://particles.js.org/images/slack.png\"> </a> <a href = \"https://discord.gg/hACwv45Hme\"> <img src = \"https://particles.js.org/images/discord.png\" height = \"38px\"> </a> <a href = \"https://t.me/tsparticles\"> <img src = \"https://particles.js.org/images/telegram.png\" width = \"41px\" height = \"41px\"> </a>\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [WordPress](#WordPress)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo.png?v=1.8.1)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0-beta.3","_nodeVersion":"16.13.0","_npmVersion":"lerna/4.0.0/node@v16.13.0+arm64 (darwin)","dist":{"integrity":"sha512-vePzn/pI8dYOukHND34ttGyMicKdGsmabvqJpFA2Q91PcMhu9z1C8v9EH80MGkcf4DdjxyaHnZFdo7P3NiBOrA==","shasum":"02a117b8ecce5f4a07a1409434acf7503e317f36","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-beta.3.tgz","fileCount":1782,"unpackedSize":1964035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr3WrCRA9TVsSAnZWagAARd0P/jsMGTp0C8Dk1DBl0wE6\nAz1t7WKQfNf6bdy1ccvQCNc7MTBz9V3UvsNSXUiz4K2sZbuUQyAS5XJaOeGh\natqxMlfQsnFoX+3EuXP62yezEfatCFrXbmGF5bZra2BENPppSgosI4bMPyXh\njBKfvU/zNL5Qxxbo/ydq1zSsIJ0iHAkhVyCMBXLyrgOUhuxAjwSmTDXF4qcl\na4VGZQgbNis9++Aqee6fVJOtMqCRV0armAOLmxCdV4BNL9s1S9PhvVe0hWcP\nmB/ANhPj9ieci6MaAm3XWyopVwrvmlcvz00QQtjrehixqaCvrJiG5hO/zdHZ\nHygXrWvn82KNfaTQG+HoPzojs/vzGbddQi8lB2mv5gKZzPht25K+AmuxAFOV\n3YwXfXTGiDeJQLNXUD8lxaf/6JrOfhJwCf6wwerP2qLTmAY/nz23srvveUSu\nCER0ADLqrM/8HvnIMUyMYHuTG19ktiH9LTsQCCNCRAhPiqKakTHKN9BL5Lpn\nCiWbhtucUbe3iohUUhvcEo3sqPoKBreMAuGI4jcF2/BubuJKdDlN3iHU7K6y\nTxYuEvLVueUgKKH/Aq+FuUkjU/qiuYEHxr7vRBVba0nha4XeKoYiGMchMIhf\nJ9d68icLP1VhymqwiaIMiCFYBMa80JOGgwhAb/b7HuTz2gA6NLubJRdUfhvG\nwJYU\r\n=q82f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6oPTpA/M+ABjoLTizl9XYwDAo1KEX9rTa9LazWEfDsgIgB/i7fC/CohdPObZtGvLJWKlP8FYgJVgdzyTyTzxMozg="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-beta.3_1638888875343_0.7387203092594614"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0-beta.4":{"name":"tsparticles-engine","version":"2.0.0-beta.4","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":{"type":"github","url":"https://github.com/sponsors/matteobruni"},"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","browser":"index.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n<a href = \"https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI\"> <img src = \"https://particles.js.org/images/slack.png\"> </a> <a href = \"https://discord.gg/hACwv45Hme\"> <img src = \"https://particles.js.org/images/discord.png\" height = \"38px\"> </a> <a href = \"https://t.me/tsparticles\"> <img src = \"https://particles.js.org/images/telegram.png\" width = \"41px\" height = \"41px\"> </a>\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [RiotJS](#RiotJS)\n  - [SolidJS](#SolidJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [Web Components](#Web-Components)\n  - [WordPress](#WordPress)\n- [Presets](#Presets)\n  - [Big Circles](#Big-Circles)\n  - [Bubbles](#Bubbles)\n  - [Confetti](#Confetti)\n  - [Fire](#Fire)\n  - [Firefly](#Firefly)\n  - [Fireworks](#Fireworks)\n  - [Fountain](#fountain)\n  - [Links](#links)\n  - [Sea Anemone](#Sea-Anemone)\n  - [Snow](#Snow)\n  - [Stars](#Stars)\n  - [Triangles](#Triangles)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### RiotJS\n\n#### `riot-particles`\n\n[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)\n\n### SolidJS\n\n#### `solid-particles`\n\n[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n### Web Components\n\n#### `web-particles`\n\n[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in this repository, and they have also a bundle file that contains everything\nneeded to run.\n\n### Big Circles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bigCircles/README.md)\n\n### Bubbles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bubbles/README.md)\n\n### Confetti\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/confetti/README.md)\n\n### Fire\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)\n\nThis preset loads a faded red to black background with particles colored like fire and ash sparks.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fire/README.md)\n\n### Firefly\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/firefly/README.md)\n\n### Fireworks\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fireworks/README.md)\n\n### Fountain\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fountain/README.md)\n\n### Links\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/links/README.md)\n\n### Sea Anemone\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/seaAnemone/README.md)\n\n### Snow\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/snow/README.md)\n\n### Stars\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/stars/README.md)\n\n### Triangles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/triangles/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.2)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0-beta.4","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-ENyhxd9GqE5mjksQqCWVBnQz0F48Yuj0+xFKGU4Ax25q8OkpN4iXhwZaDSUCaPJ6Vlh6BWb8Hlr+LB9mYEJzYg==","shasum":"1c4141c2dca770d71877631a8ad75a1c446117ce","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0-beta.4.tgz","fileCount":2052,"unpackedSize":1930760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9fwCCRA9TVsSAnZWagAAwRAP/0xnJyBpJeth0ey/OSjH\n9tPuvZbheHsXYixRW2LbiZQvzSeCrT1tncLzomwN/4O1KlD7f7gdfln5ZNZw\ncJeNWhpU8Va6mjg9qYYLqdnLFJjXs/b6gY2RaMPuha7lz9SnjAqwAuSBIU/1\nnnWi3p83qz1rRDZs+Zp3TnT31XKXqn+syJzKtyogz4/Eno/JA8JiFtocdt3m\nLCQsVK035j8RLZKJ72d4iWjKn1W6fFWPyGw0H14oejt3R74KotIL+SQ4V48W\nc/P8rC/Wnc+B3zCCHSvYlDuLtSaNe+cGJify7lOBE8kMI9oKV/8mwpwfgm4d\nB9K+q0CIlqxl3pAwWHT12J7wkLhSHJbM8Lcll5gp3+uTXNOPk7icr8Aan4tD\nYCHChLmZGu58mfCnkhW0vbcRoack9hBVNAzw6Zi2vEt9rw4fQacPs+7FhbPk\ndy9OPLM81sDxN9pzsbAa0L1iqAf06iCYnovEnwDC3+coiop8p/HrR+gcNBn3\nT1waMLk455+RbR6aCJrMXkOQKhJcz8p0vtelN9yj/84aGVDiTjzuSgCfsUjP\n2Azs4ZmVv32Nc1FHh0V59ogBwXjeUJ+klQ4Vqs6KGuol/0LHZYm2HRnptl6Y\nJGl8Noizi+aSVcXee6DipKwp2jSBAyDPBCEWYy6na9RAIcsbpJkL6UpK+714\nQOpH\r\n=sHrV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBiRlu5o7TJdprPwJ6dkCIMchKdz+elzguCDV5r+ytQkAiAReZ5JjEQCvo7MXwTgS5tk4K3eA9sB5W/Vky4qCrxA7g=="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0-beta.4_1643510785901_0.06567589807839358"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.0":{"name":"tsparticles-engine","version":"2.0.0","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n<a href = \"https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI\"> <img src = \"https://particles.js.org/images/slack.png\"> </a> <a href = \"https://discord.gg/hACwv45Hme\"> <img src = \"https://particles.js.org/images/discord.png\" height = \"38px\"> </a> <a href = \"https://t.me/tsparticles\"> <img src = \"https://particles.js.org/images/telegram.png\" width = \"41px\" height = \"41px\"> </a>\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\") <a href=\"https://www.buymeacoffee.com/matteobruni\"><img src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00\"></a>\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [RiotJS](#RiotJS)\n  - [SolidJS](#SolidJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [Web Components](#Web-Components)\n  - [WordPress](#WordPress)\n- [Presets](#Presets)\n  - [Big Circles](#Big-Circles)\n  - [Bubbles](#Bubbles)\n  - [Confetti](#Confetti)\n  - [Fire](#Fire)\n  - [Firefly](#Firefly)\n  - [Fireworks](#Fireworks)\n  - [Fountain](#fountain)\n  - [Links](#links)\n  - [Sea Anemone](#Sea-Anemone)\n  - [Snow](#Snow)\n  - [Stars](#Stars)\n  - [Triangles](#Triangles)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### RiotJS\n\n#### `riot-particles`\n\n[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)\n\n### SolidJS\n\n#### `solid-particles`\n\n[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n### Web Components\n\n#### `web-particles`\n\n[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in this repository, and they have also a bundle file that contains everything\nneeded to run.\n\n### Big Circles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bigCircles/README.md)\n\n### Bubbles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bubbles/README.md)\n\n### Confetti\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/confetti/README.md)\n\n### Fire\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)\n\nThis preset loads a faded red to black background with particles colored like fire and ash sparks.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fire/README.md)\n\n### Firefly\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/firefly/README.md)\n\n### Fireworks\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fireworks/README.md)\n\n### Fountain\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fountain/README.md)\n\n### Links\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/links/README.md)\n\n### Sea Anemone\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/seaAnemone/README.md)\n\n### Snow\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/snow/README.md)\n\n### Stars\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/stars/README.md)\n\n### Triangles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/triangles/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.2)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-Y+CXKuHIE2MuR9gn0dfT+1Ussw88HF+TrU642EYhi/2u2DxNFn58oTQyPaAeFKMLLtbB+0cjYRY5eu0QWtBEBA==","shasum":"ffefac9d7e20a70455f5f1c635e2c91e449861b9","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.0.tgz","fileCount":2734,"unpackedSize":2528419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCvZnCRA9TVsSAnZWagAAMJUP/0KYexXX687Y6K4t1rV1\nVk5X+9c8iMxSUI13KFv7m8Vlwikyz45rqEDDoNURgDQm+kBVMVmrc8v9pXL+\n25TpQ60XQBLiKN/2u7c/Zl4XD/6ExBDKMNYOFV+DUZXi4LVR9m1wvanwlqKm\nW4+7jYNydALY6+M/sNTgwh9xGnqzWHuD0hlbHia9Kq1rVqg1h6+mcoP9yHfk\n6xBCdfr0ooFyuZnd4VY3rvaMUAYNC+qkhK352JXFKFKGXXJt/AzQ9ynuadel\n2ur39tnRJOayjTN5PXQ6MhLxFIQn5nbmCYbM+nzsKSLOYfIgKGytAv6MlhIm\nfsivGrsRsztWij2oaG1wz4CashPLaAzznQD38LTUhxJb3lLntGF1DhXWOa2t\n49kUuiwpxZybqX0cNDMkhgBWwJBg/vzQ2AJpd2vD/CqrreA+3GoECHEkFl6A\nA9mHtUXaoCCL4ymoiSGHsLfUYe76x57+LtNKfQqDEgCCxY+Glp4sjVxGvsbf\nkQqFOFNl6R4n8/QYe7A+TFQTUn75YvXhzOSUHAQoPGdAq7nb5+nk5+SSUoc0\nt9njhtO3H7W8LLfVbe4fENwoEfkRWFr0NmLezHvN8tlRsskVyOoc+YK9yTO3\nN0quopEUV25DtZMLJtLwDFVm2hXcPdCUXyi/egQUopNreduoed5mT8YzmTFr\nWepP\r\n=p05D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvzrylzZwU1pRV48WJ5fqQyLZDbC4qL/m7ukfqDrJCNwIgJs2tWStPgHSNCdJsQokxjZi83eaXAU5FTXZVx568YY4="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.0_1644885607673_0.055568408793082336"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.1":{"name":"tsparticles-engine","version":"2.0.1","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n<a href = \"https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI\"> <img src = \"https://particles.js.org/images/slack.png\"> </a> <a href = \"https://discord.gg/hACwv45Hme\"> <img src = \"https://particles.js.org/images/discord.png\" height = \"38px\"> </a> <a href = \"https://t.me/tsparticles\"> <img src = \"https://particles.js.org/images/telegram.png\" width = \"41px\" height = \"41px\"> </a>\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\") <a href=\"https://www.buymeacoffee.com/matteobruni\"><img src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00\"></a>\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [RiotJS](#RiotJS)\n  - [SolidJS](#SolidJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [Web Components](#Web-Components)\n  - [WordPress](#WordPress)\n- [Presets](#Presets)\n  - [Big Circles](#Big-Circles)\n  - [Bubbles](#Bubbles)\n  - [Confetti](#Confetti)\n  - [Fire](#Fire)\n  - [Firefly](#Firefly)\n  - [Fireworks](#Fireworks)\n  - [Fountain](#fountain)\n  - [Links](#links)\n  - [Sea Anemone](#Sea-Anemone)\n  - [Snow](#Snow)\n  - [Stars](#Stars)\n  - [Triangles](#Triangles)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### RiotJS\n\n#### `riot-particles`\n\n[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)\n\n### SolidJS\n\n#### `solid-particles`\n\n[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n### Web Components\n\n#### `web-particles`\n\n[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in this repository, and they have also a bundle file that contains everything\nneeded to run.\n\n### Big Circles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bigCircles/README.md)\n\n### Bubbles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bubbles/README.md)\n\n### Confetti\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/confetti/README.md)\n\n### Fire\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)\n\nThis preset loads a faded red to black background with particles colored like fire and ash sparks.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fire/README.md)\n\n### Firefly\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/firefly/README.md)\n\n### Fireworks\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fireworks/README.md)\n\n### Fountain\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fountain/README.md)\n\n### Links\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/links/README.md)\n\n### Sea Anemone\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/seaAnemone/README.md)\n\n### Snow\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/snow/README.md)\n\n### Stars\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/stars/README.md)\n\n### Triangles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/triangles/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.2)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.1","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-9AMWUKVOzG7cjeEg2idMoCVOpk/myIqZR9h14p9Qse9y1ZhYsrhDtIWky1xFT6mpLJAGK9yKPTD0oYws4S8n0Q==","shasum":"b1415c9c4ea69fd48d3c24dd2b742d256a1a4907","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.1.tgz","fileCount":2838,"unpackedSize":2621508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC8+LCRA9TVsSAnZWagAAasoP/itrUGNF4/aHjc8cdB89\nOyBtJ3zoK3BkDYtFxb8SdsCD/VEacSeUkZ3Gxtw7dCpDT3BBtASJlgcwkvDo\nwQrCF5E6ZziUmlV5ZSlFAsXJX/qjVa2pYnkP64r7Rwix0iZr2BoXQo6wO9Th\n7OMFB2QMfx9dlSx7dqyXRxIQWvunavGCpFnNuciINeyuBODmYCNFk/28GOBg\n9zyKoQjxIG7RzQCY1xwmq57ed3rV8cVAhqZ7yvUSsbNloJkHMNf691LOBeXY\n6xd5H0z2gBUQ5grXqCfY5n5OxD4DMhkAYJBT11hyFcpcO5OCOxuk4vYhV4DF\nInGhwhxnbQe3K0E7sALLoBzW2jv143hTCfDJuiVc1vifH2vxoLwGFrWBv/N0\nmyj9T1mQEJV2Rn/Eg1/CKbSW2rlNqNTzdCvf6iMibZdMHVaGV7JyDZYBYM7O\nInLXBpdoamIcN7TlxD6FwZUNBVP6k/0Fb/ptleYctjfiiCQR4n9E6KmZ0b2l\nTEV5JOAku+6/dCWGNBHCKRK8tZroNASA6xDPaxDgJ4Ooum9Q0Eat47Faxght\nYAfyXFENthBLzBekhFa2xwjPggfRazsnFv7SlsIsj1hjfuFex+t72kyGosqi\nKrIMEh5YXYMBBOl/qMvU0PuUDo1jVOc9za5D0vXVasrvxF8tYlbRtn6br3AO\nUEB8\r\n=5wxk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRrwilHw4vqb10tdG3o8uBE0fY43DpdJCmfCnOPgU0lAiEAlKoyWzO4lwWsWeLoTULSvnH+Sg0pkYhXLtGNu4OwfCE="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.1_1644941195500_0.6419702675257122"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.2":{"name":"tsparticles-engine","version":"2.0.2","description":"Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n<a href = \"https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI\"> <img src = \"https://particles.js.org/images/slack.png\"> </a> <a href = \"https://discord.gg/hACwv45Hme\"> <img src = \"https://particles.js.org/images/discord.png\" height = \"38px\"> </a> <a href = \"https://t.me/tsparticles\"> <img src = \"https://particles.js.org/images/telegram.png\" width = \"41px\" height = \"41px\"> </a>\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\") <a href=\"https://www.buymeacoffee.com/matteobruni\"><img src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00\"></a>\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [RiotJS](#RiotJS)\n  - [SolidJS](#SolidJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [Web Components](#Web-Components)\n  - [WordPress](#WordPress)\n- [Presets](#Presets)\n  - [Big Circles](#Big-Circles)\n  - [Bubbles](#Bubbles)\n  - [Confetti](#Confetti)\n  - [Fire](#Fire)\n  - [Firefly](#Firefly)\n  - [Fireworks](#Fireworks)\n  - [Fountain](#fountain)\n  - [Links](#links)\n  - [Sea Anemone](#Sea-Anemone)\n  - [Snow](#Snow)\n  - [Stars](#Stars)\n  - [Triangles](#Triangles)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### RiotJS\n\n#### `riot-particles`\n\n[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)\n\n### SolidJS\n\n#### `solid-particles`\n\n[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n### Web Components\n\n#### `web-particles`\n\n[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in this repository, and they have also a bundle file that contains everything\nneeded to run.\n\n### Big Circles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bigCircles/README.md)\n\n### Bubbles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bubbles/README.md)\n\n### Confetti\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/confetti/README.md)\n\n### Fire\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)\n\nThis preset loads a faded red to black background with particles colored like fire and ash sparks.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fire/README.md)\n\n### Firefly\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/firefly/README.md)\n\n### Fireworks\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fireworks/README.md)\n\n### Fountain\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fountain/README.md)\n\n### Links\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/links/README.md)\n\n### Sea Anemone\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/seaAnemone/README.md)\n\n### Snow\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/snow/README.md)\n\n### Stars\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/stars/README.md)\n\n### Triangles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/triangles/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.2)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.2","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-rFT13K8LpN8LKYDaY/JzhCuSVOqeI/AMN+zbnMhoaoepZ29EBOQFzcF65h0bd+K08RN0aFrmh8Bc2Y96tRsHVw==","shasum":"fcd8f34c195eefa0a142823692bfcdf07676de51","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.2.tgz","fileCount":2838,"unpackedSize":2622077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE05rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrz+A/7BqkvAAIUabdFPAJTs+dw2hDEhn1R03EQ3DgO484vDMBgLRS3\r\nA7/c9Kknkumgtu3HY01QOHm//xjwpe71yjJK2Dnu7rTwhGE16BBnRxKgyhFg\r\nNoqChX46Z/vWCS0eJXt8pMoeg71iC738eGb/vrKSWbI5njQfsT7xcMrcNaxS\r\nN81ZAzCgGsqhAEHErvI3ATeProyu0a3Lbve/wYobRkwwBrxrhjhFrFUd/ezt\r\nTQ1kwpaARw1UR3OV1stZaEX3vuXnHkQXX7+Fglv1VW3aW9iC6Yhys0qOQw73\r\nrPsjAMDKfUjKYGBH/rNgmayh962Sw2vGB4m3HTJRwISaEIZPnzT8E3U1HC6p\r\nlsj2JWPQHe7gLKKqraU5kVrypg+BbWaSCeDg0TekreJbNPxntt2ikrPLHfGN\r\nemru8BbDRxwm0k0dDDzKwplW+XsHUwEpHDYidFI2wsDeCpme2CJjHsbOve9i\r\n7wg9RsVuqIksiVHcF3MNeX8v9jLo7D5vvvwSOUI9q1C06diNHLgUyzsZYHax\r\nnteRIotfl6E1RTnUg9xiRvAMOXcIMYwDsCKlxbzHhmBoUQVIMLWmuWqmpsaq\r\nOS9aNCS601fagQmp3k4Gabp1XIbg28zv/ETAoyYOByzc45LqULqty2F67NL5\r\nYcr856Z8OUm+mEpvwB1+Yv9oCcKPo19tq8k=\r\n=+4A1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChVEY/la3ltdRHANo3IfUBctjMZ0Qcf3PGk80K7UsSlwIgP5+b+XOh3ctX3Iy6RYwLSgDgIdMmPTUBOXwI5e/IFA0="}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.2_1645432427487_0.45817318078616087"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.3":{"name":"tsparticles-engine","version":"2.0.3","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"index.d.ts","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n<a href = \"https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI\"> <img src = \"https://particles.js.org/images/slack.png\"> </a> <a href = \"https://discord.gg/hACwv45Hme\"> <img src = \"https://particles.js.org/images/discord.png\" height = \"38px\"> </a> <a href = \"https://t.me/tsparticles\"> <img src = \"https://particles.js.org/images/telegram.png\" width = \"41px\" height = \"41px\"> </a>\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\") <a href=\"https://www.buymeacoffee.com/matteobruni\"><img src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00\"></a>\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [RiotJS](#RiotJS)\n  - [SolidJS](#SolidJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [Web Components](#Web-Components)\n  - [WordPress](#WordPress)\n- [Presets](#Presets)\n  - [Big Circles](#Big-Circles)\n  - [Bubbles](#Bubbles)\n  - [Confetti](#Confetti)\n  - [Fire](#Fire)\n  - [Firefly](#Firefly)\n  - [Fireworks](#Fireworks)\n  - [Fountain](#fountain)\n  - [Links](#links)\n  - [Sea Anemone](#Sea-Anemone)\n  - [Snow](#Snow)\n  - [Stars](#Stars)\n  - [Triangles](#Triangles)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### RiotJS\n\n#### `riot-particles`\n\n[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)\n\n### SolidJS\n\n#### `solid-particles`\n\n[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n### Web Components\n\n#### `web-particles`\n\n[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in this repository, and they have also a bundle file that contains everything\nneeded to run.\n\n### Big Circles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bigCircles/README.md)\n\n### Bubbles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bubbles/README.md)\n\n### Confetti\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/confetti/README.md)\n\n### Fire\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)\n\nThis preset loads a faded red to black background with particles colored like fire and ash sparks.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fire/README.md)\n\n### Firefly\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/firefly/README.md)\n\n### Fireworks\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fireworks/README.md)\n\n### Fountain\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fountain/README.md)\n\n### Links\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/links/README.md)\n\n### Sea Anemone\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/seaAnemone/README.md)\n\n### Snow\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/snow/README.md)\n\n### Stars\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/stars/README.md)\n\n### Triangles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/triangles/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.2)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.3","_nodeVersion":"16.14.0","_npmVersion":"lerna/4.0.0/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-n54t3Qcdnz/wc6op38Q/nVwfi7d/m/HdiDdJsJy4DWAJnnu4YZLGoor9h76nuvfIeY7niTQWMLMxWBViAKOOEA==","shasum":"d14bba5434a758a70a58fe1a2fda757aa3cbf0b8","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.3.tgz","fileCount":2846,"unpackedSize":2636571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK3AtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNRRAAkBojpcOWrWhARBW+TBk82maThSOmqmA2cYxjavRBMryYlk/R\r\ngmcsmo6jCp5oM4JMgWfLenujADX4l5JOv0KfLHN9VeKXBzPqssCmJUiFY13z\r\nYRvXgupe/LKOchi525sEi7nc+jGB9MtbYKSNnT18KLAP1OQ6vVKWo7+ReYvs\r\nJXlXqiQqXxmKC3bBg9fkI/4iKi9f6fiyZ44BsQDHM4uAJSV4NCzgNwZTlqDI\r\nzZTxKkqXrBDWxzpVr3jQO92NQ4sk7tfTdbUB7QpBazxYsNWH5ApZ+F9v8K7a\r\nMjlN+lx9mNqIAdnWLCr8m0xYkXVHMBRKDzErRwmR6Ns40IkryQ0IsJfuTPDn\r\ng/17LGtQ6QcCVLni24OPoSg4RJ6ikh3Uvv0rTKzjWEfcr/ru09SF1dGlRokA\r\nAS26Nw/iCsX+2mx1zFhIMDYrrnD6gtZYva/P5MjSa282S0n1d649qe6u5Z2t\r\ntiYl7U4qXYTSeg0pCDvRXsLhWHGfp7xPHrvUc0DHs21T8yvrtVJ9XltOH6e4\r\nbgCCCZA28Brp3Yl9mcnvrHdVDhBHVIV2Jafb840VNjSH7qtGejwDUbcZWMRb\r\nAxYS4Q0Cm0+bx50qth27RRWD4baCTlWeV9AAjZwvu+YP0fjK065YIb2bv8O5\r\ngjbLnsGvaUVfE5vHj9A0/GQk9vsF7+7HSDs=\r\n=Dbi+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxi2nVHqE4hNMvyMt0igmMsR+gNi9/bZW5KI8axp2VDAIhAKR5IKCvCSEl159Ko3EEREKqymvQdw9vNI6cZ/AJAKeW"}]},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.3_1647013933436_0.6844594766868755"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.4":{"name":"tsparticles-engine","version":"2.0.4","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n[![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\") <a href=\"https://www.buymeacoffee.com/matteobruni\"><img src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00\"></a>\n\n---\n\n## Table of Contents\n\n- [Use for your website](#Do-you-want-to-use-it-on-your-website)\n  - [Library installation](#Library-installation)\n- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)\n  - [Angular](#Angular)\n  - [Inferno](#Inferno)\n  - [jQuery](#jQuery)\n  - [Preact](#Preact)\n  - [ReactJS](#ReactJS)\n  - [RiotJS](#RiotJS)\n  - [SolidJS](#SolidJS)\n  - [Svelte](#Svelte)\n  - [VueJS 2.x](#VueJS-2x)\n  - [VueJS 3.x](#VueJS-3x)\n  - [Web Components](#Web-Components)\n  - [WordPress](#WordPress)\n- [Presets](#Presets)\n  - [Big Circles](#Big-Circles)\n  - [Bubbles](#Bubbles)\n  - [Confetti](#Confetti)\n  - [Fire](#Fire)\n  - [Firefly](#Firefly)\n  - [Fireworks](#Fireworks)\n  - [Fountain](#fountain)\n  - [Links](#links)\n  - [Sea Anemone](#Sea-Anemone)\n  - [Snow](#Snow)\n  - [Stars](#Stars)\n  - [Triangles](#Triangles)\n- [Templates and Resources](#Templates-and-Resources)\n- [Demo / Generator](#Demo--Generator)\n  - [Characters as particles](#Characters-as-particles)\n  - [Mouse hover connections](#Mouse-hover-connections)\n  - [Polygon mask](#Polygon-mask)\n  - [Animated stars](#Animated-stars)\n  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)\n  - [Background Mask particles](#Background-Mask-particles)\n- [Migrating from Particles.js](#Migrating-from-Particlesjs)\n- [Plugins/Customizations](#PluginsCustomizations)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>\n\n---\n\n### **_npm_**\n\n[![npmjs](https://badge.fury.io/js/tsparticles-engine.svg)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine)](https://www.npmjs.com/package/tsparticles-engine)\n[![npmjs](https://badge.fury.io/js/tsparticles-slim.svg)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim)](https://www.npmjs.com/package/tsparticles-slim)\n[![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles)](https://www.npmjs.com/package/tsparticles)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n#### Import and require\n\nStarting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .\n\nNow you can write something like this\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script.\n\n---\n\n### **_NuGet_**\n\n[![Nuget](https://img.shields.io/nuget/v/tsParticles)](https://www.nuget.org/packages/tsParticles/)\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected\n/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */\n\ntsParticles\n  .loadJSON(\"tsparticles\", \"presets/default.json\")\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\n/* tsParticles.load(@dom-id, @options); */\n\ntsParticles.load(\"tsparticles\", {\n  /* options here */\n});\n\n//or\n\n/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */\n\ntsParticles.loadFromArray(\"tsparticles\", [\n  {\n    /* options here */\n  },\n  {\n    /* other options here */\n  },\n]);\n//random object\n\ntsParticles.loadFromArray(\n  \"tsparticles\",\n  [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  1\n); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n`ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)\n\n### Inferno\n\n`inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)\n\n### jQuery\n\n`jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)\n\n### Preact\n\n`preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)\n\n### ReactJS\n\n`react-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles) [![npm](https://img.shields.io/npm/dm/react-tsparticles)](https://www.npmjs.com/package/react-tsparticles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)\n\n### RiotJS\n\n#### `riot-particles`\n\n[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)\n\n### SolidJS\n\n#### `solid-particles`\n\n[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)\n\n### Svelte\n\n`svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)\n\n### VueJS 2.x\n\n`particles.vue`\n\n[![npm](https://img.shields.io/npm/v/particles.vue)](https://www.npmjs.com/package/particles.vue) [![npm](https://img.shields.io/npm/dm/particles.vue)](https://www.npmjs.com/package/particles.vue)\n\nInstructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)\n\n### VueJS 3.x\n\n`particles.vue3`\n\n[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)\n\nInstruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n### Web Components\n\n#### `web-particles`\n\n[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)\n\n### WordPress\n\nActually an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in this repository, and they have also a bundle file that contains everything\nneeded to run.\n\n### Big Circles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bigCircles/README.md)\n\n### Bubbles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bubbles/README.md)\n\n### Confetti\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/confetti/README.md)\n\n### Fire\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)\n\nThis preset loads a faded red to black background with particles colored like fire and ash sparks.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fire/README.md)\n\n### Firefly\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/firefly/README.md)\n\n### Fireworks\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fireworks/README.md)\n\n### Fountain\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fountain/README.md)\n\n### Links\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/links/README.md)\n\n### Sea Anemone\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/seaAnemone/README.md)\n\n### Snow\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/snow/README.md)\n\n### Stars\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/stars/README.md)\n\n### Triangles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)\n\n[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)\n\nYou can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/triangles/README.md)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.2)](https://particles.js.org/samples)\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)\n\nWant to see ever more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ yarn\n$ npx lerna bootstrap\n$ npx lerna run build\n$ cd demo/vanilla\n$ yarn start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can checkout other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2021 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md","_id":"tsparticles-engine@2.0.4","_nodeVersion":"16.14.0","_npmVersion":"lerna/4.0.0/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-58ExYre1CwKz/Vls0ITrIfwvByJR4REzrLDy2n1K2ovdyrAxyoTxP9FOmDAMR/sbvg+M45m01XtJb+//Vzb5/A==","shasum":"b89652c3bfd31066954de5cd5179121dd6bfd6e6","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.4.tgz","fileCount":1436,"unpackedSize":2147095,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCso/jgEdwaDcu/03YM7G5ekjV1vX7jc/HHhw5WekuhqQIhAP13GRcU2SrHk9W0oCcx4bMCkQJtsxDxAG3o6wZ4CNp/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZCUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Iw//Z9z7AT7pGZ/ilhGa4Bzm9eUEJl58T+d5tMgzFsopykoCwJqf\r\ne1YiQLyf3EzOZf1RcDwCqtXTWqbq11IZnNerLsGK/9DTjT+bQXW9gFefb6HH\r\n5l+oYhjxU0NAOcV5dzV8gDlueai8pSa7VS1yPoWG2tIgBqUban25G8FOeLR1\r\nG5W4zbG7UOrN9/LsozGl6CsSeRR46zwnOwz7f6+SNQ0OB0T3hafopVNIVvKd\r\nzj6sDWksv+XJy7QYiHYNeVtj3yE2QunSAfEW8eF+GzhcJyCjjbIkyihQmTau\r\nmsf3keUyl51BXCa/A1cCz/VmYtjctq8luC1NicdwPLtAYYEzq5oS+T0oN9k0\r\n/T+7Bayw432hg//Xn7ZJyAx7j4nlNINs+QKBW+o72625XhtJMrlfQB+xoZfF\r\n3rorh4oVDXd4j8IkvEvYaJ6IuaT4zY+RufrIopY8HqRIur6Y3NzROAqKAsYM\r\nQZfGmLR5iRfDjX8ozw7MmMPvtDjnR8ZfxU/XpryKRnQJelXSiktcTecMdReJ\r\nl0iGQ2V01iD40T5gWsiKtzcyFQ4bbvlFopGkxh0QZQhlSp03BmFF/4L9TqHL\r\nL9Dztoo/ooBa5mi2TeuIunE4qZfZJH7PBGXvLl4tQYuSfBvM99CuppjnBPY+\r\nIRG9jOMNqFWnDqNxDRjLiRnG3yDGrsk1kAE=\r\n=lRs1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.4_1649250452281_0.6162704170964928"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.5":{"name":"tsparticles-engine","version":"2.0.5","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","_id":"tsparticles-engine@2.0.5","_nodeVersion":"16.14.0","_npmVersion":"lerna/4.0.0/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-qvZjbud3r98w13uYXKAJDJNzu4GNZKz+C2TM3eBeFEf5Y6FON3mbFDRWt4ENXcl/6h+VshLuo3uUv/ROnLX1Ng==","shasum":"08886c0fc897195a565125fe727b81f49b9b525d","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.5.tgz","fileCount":1436,"unpackedSize":2147165,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbtojsGS+K7kckJh90tUHQ/s4LlbSHMUZN+MJKOWUwHwIhAJ31c1BIN+n74aZSIYOKI/+ggoMDhyMEjfbvAV6JxolG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV+uRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofnBAAhX5I7XMQAkYHTtevOLRlWNY8fHwdBq8izzmiEESTJRRc+dEi\r\nmuyzEGrnsfcv/WmELAeAI+pyq4cWK/T1qUO0hEVBkJpUdI7q6REiL/pCW5cH\r\npSgfGiQfkBKm9HW1wtaqgAIEOgR3bapRrjDPD0sG96Yu7V39Um/t+PCTkAF4\r\n9knWlIiZCPaFLtRTUE/qTi7W9u8tvpizqUM9ZKKSlvmWkJnAvHJyg72/PLIr\r\nbexvErbB98O53vuGf+/e9sh8TF0uMelwgAx72qbEYe3dzubRvXPetUVowyRP\r\nfp4r10bLyUeRBOXgbBsYG0PM6cBRlzZHG4MzDtTkS2VfhmuJXo0NRgH8daBZ\r\nJttDMpx0ggqDgCRjhGVMgSvZ7C1JgKJL+J+8owGhjaJB3At4ujSslR0dSApA\r\ndlDBX3+iu5NMT9B08pSDjtMsTG5WQuu+ZqcgosoVqVX4KjQ1t+6/r22PGl8A\r\nfeg6ochY7/14xgalEX1Nlb9hSCHorokbivAj+QzEfXEOnow2reCjvRlYCfWc\r\nSogvWd/060oQUuCZGEjPLZvUBKNn2lpem+whBCiRckDMXYoX5fQcl2XUIh18\r\nhtTu+OFNvAxW3ZrWDgynp3AKjU8Z/jdvJyzK6B/Z8CXyEyDZy6JWdGEIFNc6\r\ntoPtH1s/DnxannEQ6gkJZqqfZEpzj9vPUDs=\r\n=G5XG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.5_1649929105559_0.443387759875292"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.0.6":{"name":"tsparticles-engine","version":"2.0.6","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","_id":"tsparticles-engine@2.0.6","_nodeVersion":"16.14.0","_npmVersion":"lerna/4.0.0/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-qsAMp68No1ncbFQbyjILrVtS9LeNTtBmxPa91COvHq4iLELReUjVxXTWfLWi0+xczTbdpNPRPx92r0V3xlqeHw==","shasum":"27e85d8d014a2d9435ffc9a2c7efd570baf6dc64","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.6.tgz","fileCount":1436,"unpackedSize":2147165,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFB+BcbROCjlfmuef+zYZZ3vKvkTZi2NrMxOE8ArhOeQAiEAoDAGq/poiXC3blpCwA4tATZrj6bHYsQkRIBKvd7uDKs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiW0JEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSxA/+MnxF1RTLYmVTuFsu1dkb7ACNc5Ekg3PgwdT8vhRHPxXqmmYv\r\nQF6HSWwsctPM8xADtn5Fw0ro/+IMeZYI5wks9HNK2rIfM23i265Rg1E06n3Y\r\nU7OyKHkakKOC1zHpuzZyA8Zec//A1MEu4Hmh5t+wgjDIGnGSz2st3Xs4SDvl\r\nBAotYaV6hW047VkpG+XOQNsQvSmzH+x5L+UIZF6SzwoUx9Y7NSrq9tskKK7n\r\nv1K0VFix6yYGpWQT8+K4BYfcTaFrQki34cHDA9J1C/u6vviGIoDCotlpDreq\r\nsDvlTrssdwj1aylnJfPKJfkXSD8TTsQYoQZ+Y4g6fJUkXNHVsXs9TxeJlH8Z\r\n8dsWjviokQcyvr8GPA3fIoNkQWMrXb0Vb+PyA7rdh0722AOaew1jJH2Babf1\r\nVUyQJtBGgvPSThu0y0MZ4bwp3sVgInu1h3k0hq5Blwwaw0J6S+Wpfe1dhOxn\r\nqjz58eYxGuD82vK3JomkJRUwYMHwCPbhPOLNQTcTis/DbP5W3IcBDyfItj3b\r\nzfABu4ACCdTvuPrfmXzLG1xeMeU7dTDfvoZFukT9a31sCovL6vI0BFnYpDGb\r\npMfygXEDX5+eG6beudg93sqaCJ40juuGMoR8Dgm98AszOfafCc+1/IzdsNsT\r\neCB0yVqtecbCympSUEUtQIegGp7bgA78qrg=\r\n=oDs+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.0.6_1650147907998_0.5011166542173593"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.1.0":{"name":"tsparticles-engine","version":"2.1.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","_id":"tsparticles-engine@2.1.0","_nodeVersion":"16.14.0","_npmVersion":"lerna/5.1.4/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-hzqdFa1YXbmVxb5XXZd17OXLSjuH871Q9M//iOtPmyGe7nMgOxdAVCgF3/69KYCtQrMQFlulZdstIzya0lu5Yg==","shasum":"72559b9ed57e01497c5bd7b08bc34ce50fdd694c","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.1.0.tgz","fileCount":1341,"unpackedSize":2140535,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgQmD1YgRKQwK/U2pDjXJwo5FqEaqpJiiLg1P/f8iFmAiEAj4lkQiySKoKilbzhI/J1VpTY6jwx0OpIxQ2KYx6GAEc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirl+1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaXQ/+LpEwm5F9yJi7/oOGk6P0DJfwVhz3aQ9qwx9ZQatmis86yNVz\r\nJngssJ+DXazzeYRT0vDotqa3V+VNzdvTEyxLFvoFPRmdAFWOKjMI+e8uFR4h\r\n4y75RTliDlV3pkaDhJlzXk8yFghYfKqpoq38teMICt0dU+St4ucO0afJfu90\r\nHjtGCvo7xBgHBhmdTBviBCo0d5mO0xapY3WByhkPytbuItmHElf7Ea65U0JC\r\nt/Xi7FxP2k7FBdU4iYtztt6Nvj3qxb+rZJRSvACJ6hhO4au0oeKouXAJA/Ss\r\nc7YfQ+I5nXg7Qyk2szGSuP9zqgfKDUyfysAwh0VMAa9S/VnT7Ltuwqc4t8s1\r\nlTLfENSrOD9aJ2w4yq9bIHFpnmNaZXOIt6Tyc4/XjA9ulrxONenOv7yofKxA\r\nzQbLkcsMJy/C/yxOI2wxWPE4v8ti2KeUDoYZ4oqqeY5dGQA+Bh0+1agAT1kp\r\n9uEzPlbuiAxtcMG1eSn6MYC9xAwQjOUue0q2rOYPRUIpRvrbalfyQrpEL3dC\r\nKaCxMfUvEjwWXwJ2MKF8bFzti85dgFrHWdDnrK69fv4oIUQoWColMeOei8h3\r\n3XfqNpJLh6J0QxZ1pzhnIM4rjr1ecdJCNC53n+RIHIFxHky33Usi5Z9nwkLR\r\nm17TRv9F6XpbY+P0iUNhwtdIQq4dzth09WI=\r\n=YrUk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.1.0_1655594933617_0.881063137961122"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.1.1":{"name":"tsparticles-engine","version":"2.1.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","_id":"tsparticles-engine@2.1.1","_nodeVersion":"16.14.0","_npmVersion":"lerna/5.1.6/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-GcGlH0yZafvXJ7r/hezqAW0YH4ZElg0zjk7IxIF59MPbWRfRnCIAEqMonDxrqTCfoWILJ0fO8BhkS+KbAJ6mYw==","shasum":"eab6b7754f2092b08540c9e793364ad2f33c2f74","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.1.1.tgz","fileCount":1341,"unpackedSize":2143306,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDG+rYbvG2pu3CANdnllqMldVd78EcvudbCOMmxQqWVQIhALJ57Dt/XbCnuSWxunM8yQmrqjouWunsUzhCy0sZEj4n"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivqpLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUOhAAow23yD4+KoAOMouf/G7jRrDo1YpgNH2UZ/zr2UmQAuBsEc/J\r\n00yU5nYsul/WLb+sMa6eq1127D5eZa+f98N4wJW2IH8q+eCIIf3e4bXtaxiP\r\nmiWft63mj23Jz/q74ZAmS2u7ljXJO/P+rD6DSNjOYWcMoXbnGjCZmpmXQQ+p\r\n+WnUKYRybAc+Q0X63Y7/bA8DIWhFpbQbpB20ZFWeWm49RzcrL2aDq1BLHtMY\r\ns50JDnW/TWWrXn1AkZlALDV9Zenu2B8GY5VRLxjNsYEpFBjLxSM7rQutnc4F\r\nagfyGG6YDRYvfPJ9EodUv0087GYESTkjHzCVy9A1deNVgHRvnd9efC9GGME1\r\nMYc6gPBnfEnwO3XbekynTTkHMDoq0B6VAhWKWpOJYAmTgzSojqbEpjzgfEuE\r\nBTlqxF3yjSAa70/9eTFroCRoDNOiUD6rJhXuAr//AW3kPcr2p4mwXBK8wp+7\r\ncAN9eDZzWq4juh2pF0KgulVwb2FqDoRIrE/yV1jNM7dMncNRx/KzyAox2qOl\r\n83hVh5fErDC06js56AuNpI7jhVhiRlj2ogEvhMbvzQURlZfnnMr8TFig62/m\r\nBjVXb4BRvDQA1cm40lfbtPHJOzZP9Zn3IbQ+QPd07XweCVoZ8SMHUCxZB5dw\r\ngK3BIxjnh856b5qdXJX50D+4y5ayiXDT0s4=\r\n=Scl5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.1.1_1656662603322_0.19624508240569516"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.1.2":{"name":"tsparticles-engine","version":"2.1.2","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","_id":"tsparticles-engine@2.1.2","_nodeVersion":"16.14.0","_npmVersion":"lerna/5.1.6/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-FVOJ4PrdZJmAaMl/MARVpMrt8ZE8gIkA49EX4MNtrXQPEc+/uqO1pk05V9uGLzL1IRnN8mCCEHD7MeEkQgzqbw==","shasum":"c814bb2b85645d1f928129aa940b67110b76c4a2","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.1.2.tgz","fileCount":1341,"unpackedSize":2143306,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuwoES9HlRgs3bHag7Rilr1bNCeKUZ2/xt0FBbAApn4AiBAAeXqiVYn+rIxUTv3941LiLA7SOuTqsQfWwN/Eps+HA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivsojACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWexAAlbbCoVj/aV6pN3O03bjDbkikBO/3+5G3pZ9ta0Qww7CI7DvH\r\nZt2plHKURlzUrQrJRU+FHSsxcdH4c0l0XKGOuybJITtO9TBYnGOgDhWnQD9/\r\ni4Op/Q/Ivfu2GYXwIt76tgbOafL0WlUuoEKpmh7nJCTE8pNeWVSvJ9q4y0gJ\r\nBAFqvnqKh4ki8kW6lHrG7NtUCZvY81gLsGk1WxEykZDIs8DbP5SOFarFLOm2\r\nKnUJVw4Jy2RZAwfr66OCRdQ2ta9LQ4mmT9whQ0JO53TfjxY+O+Sb2PsXCZuL\r\ncysYHaBKMif0eesr3hPtsAKrv1JoBsM6wrCOX4uzLzfG6HdPPd1kkMLN3JMQ\r\nTCrLToqESAYSc49TMjgTI5aHIk5S4Asutp0HhuXp5B20vG1fTGqcmEzBdX63\r\nUj7vzSRkYHY7sZMY5jZcPkXuTxSo9g3TCJLarsh5ukJG60uJ2O/WKdWCZvDa\r\ntPYBOv+BOS0ZB2m35oNGcy9V5/iEpFsE5lAf+3C5XePknHOY4HvYXmLfBQlo\r\nOw2C9GRSHH8Z5EAt9F3qTCptP2+emYqJ5SdmqKo9DQKrQ9SrsmT7aSsXF/2I\r\nPhv9WmJSGFk+Ka/ueSev+Z/IkCwQutOjv2H4Z4UqVvAj+EKc02OoBC5CjFyS\r\nIJxlz3qO5Cen8TbKkMCO0rJLv3IyOaBxKeU=\r\n=cDE3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.1.2_1656670755497_0.6052253800570426"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.1.3":{"name":"tsparticles-engine","version":"2.1.3","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","_id":"tsparticles-engine@2.1.3","_nodeVersion":"16.14.0","_npmVersion":"lerna/5.1.6/node@v16.14.0+arm64 (darwin)","dist":{"integrity":"sha512-BmCo534tF5yRQofUczGSfCFrdeMYO6e7FXHv6AdRxL+j9NNPH3zF4HX6k24tbO4kmTH8tGX/+F9mugEQVo9AEg==","shasum":"d8922cf7811c40e5e9b87b18f9cc86043af8e900","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.1.3.tgz","fileCount":1341,"unpackedSize":2143420,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2Y++b4CHWSA6+13qkhJT9bRDcHnbJ+TbLcozqR9MX6wIhAI0LqHWDaRfGbm5FtF9XAJkQGsYAW0G4Criq1KUeOFmH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivtrWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOJQ/+PxjyS3WcZEtouzU2xo8i9UOzsJxW4a4X6abZujVms29LoHMG\r\nkHDOmI8kGOdJfrvtwB85it9aRqDHQ++Ieb8v55GKQED84ztDBx3vKqcRHIcu\r\nMYgnei4kh4NxEyUEf8u5n7hiuCPLhI47SJlQUfDPz2G8OVLHUwIxNlcPX+1w\r\n9DvWxWYHlPXFvJcPmQVzDZUa8aHBBYmWTtJhElcbkhuq2gSbkr7g7lQQOhmP\r\n9ZBGcOhZHXkSBz/YF/ZRopk0G3llu+OD9Zp+FNwb5cz4eOUE9LbzsatGsD15\r\nbAQF1qCeUD6jZNvi3C6SLr6W2Hh0BPXPf5fAVscdFNN+q2S4SBqC5+3atbEv\r\n7xvK2+oUybHshP7mLRoYqy8lE9pg/XYF6ZAqfqJlugAEd4b4afbQPjOv4jI/\r\nEq9T+cduu7q5Rd3XYqAan/EKrVJLTsCQFy2skIc4MIGM1c0rDQHqx8KLysP8\r\n+4pgB9qI5Tz6Tmw/t8KEkPuvLD4hzQtIAkDydvUGO5qz1f0deAD3JSGYJbrf\r\n7Be1d65e4/srnv08hoMLPH7WXxIvewA3tQirzPoSjQBOKJT/lJ+NqnbZQEdT\r\nqMGnAMk1/jiuI8Tk5F6asyGjdGKOyPRX0SXnGnc0GwRDHqdzK0wwsUPp3Xcf\r\n4ddD9w04DurCJKRM21OFF3+8lIpNlHt3fbc=\r\n=axwd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.1.3_1656675030529_0.5112992248858841"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.1.4":{"name":"tsparticles-engine","version":"2.1.4","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org/","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"34b13c4db46f8bd6260e52fef50663220bb8f5d8","_id":"tsparticles-engine@2.1.4","_nodeVersion":"16.15.1","_npmVersion":"lerna/5.3.0/node@v16.15.1+arm64 (darwin)","dist":{"integrity":"sha512-V+2INRD9whshxM2DQQ/QWzboEIyPy95fwCf5I+zVNCYDdCWh5/w/AK/UY3k0/slcrxDyZOErNj1NygGSdxqy7w==","shasum":"9dd6c0bc8547249ddba6dc0f9f453113999464c4","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.1.4.tgz","fileCount":1341,"unpackedSize":2153731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMMEERFxB+X4Z2WyhjMK3/A8l2sW0WfUH0y1mnJN9S/AiBpXBDy9GoGoy3IOgJQ7b1CmFDOr0j32I9KWg11WYrVew=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4lYbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMxg/+IlOvyQ0OUIpBtdxKH16Yk8gJ/FeIJQA9TGpwdwDUjIgxVt6P\r\n5Jy6PdxKLoe7tTY/jSx0z5akUb/pM66k5wCUDc9+QI6ZSeF81//AUisWJ6tD\r\ncJanaHJDWLuAB8pMyZtokR8EEZsjl2QbeAqKhHAM8QiJMCKqVpXJlz4XSWo8\r\nR19Kp2kOfqUXVHjrYwqxL1s4+dmA9fdmb4s0Be19kBp5/C5C+3khvYDPdr2F\r\n/6LLom56OOwbUvds722NvWQfkz/Qnc5co7VTAerr51KY26CFSgxTTRwNx883\r\n7mxImG3nb4lp0/NjekWEjAAJ36tiRVOwAiC1KAseHOzDu/g7RER/h4mI+fuV\r\nwUqk1F3nZ3aUSOV4e8PLU2uoYF5nyElllHHo2WuMrXXQtRekD8NOHK7Nxu0n\r\nt0e+zYF3g9DzUKchsvXauAVX16oUT7jfiy/K/WywcutqpLCYVZqFTj7AYYrN\r\nqEIaWmUQ3esIw60smIT7OyJcYG4kLQjPkeUwalKZ6qt7sVNGONiKB98AJthO\r\n+yH9U0NCm6ria7NTzfuFiFkWkuGCZ9JP1spTBS5pgVy+oF7pkTIrGpxaC7Z6\r\nELnqe62Nu+nTaQMOD3evZyIfx3X3EQWI1pbEOpHz0ul86zCxTrQ5IBVqO55D\r\nWpuOIj+q/88PPIqstnq5IHWAeF7TDmiDXaI=\r\n=kuZY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.1.4_1659000347389_0.7761263680125638"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.2.0":{"name":"tsparticles-engine","version":"2.2.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"667707dca2d62c426d8f35739b8a0b7139235cc0","_id":"tsparticles-engine@2.2.0","_nodeVersion":"16.15.1","_npmVersion":"lerna/5.4.0/node@v16.15.1+arm64 (darwin)","dist":{"integrity":"sha512-1kPvIMwcfsFTsEJKoNO/XhZq9l07DZRTwO3fetxD8U69orgRveJe32lqIrQQRDXXqoGD5jTM0j7MOrZueS/0AA==","shasum":"e16035679c7b7e5bf377cb0e6f50c92ec312720b","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.2.0.tgz","fileCount":1083,"unpackedSize":1978641,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7etQ1wX9OBEPM1dWSc6YIOu0n98xQh8imBlVy7bIMzwIgY7AmGI74Xqpw0gpbUR+niAUEG3Yp/FktBxsmujHVh6s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9MRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfKQ//YfmWDRfHB+nhOvom3xdbB6JkpNv5lzM6NMM7VZtkoPtzXfQ1\r\nbqCnG/uUsfGqzjLQ5MfK6sGcT4nC28u42K5SDBpAWF1VJcpk3PyQAaLTd2y6\r\nMv4Q1XDAjovN+zLlGH6i6IjAzInjxZ4ckLNEO/Q4K6GHeHCy4KfFpkdoCzP9\r\nZP0HGOW38LarX4VIrNVQgV4F/hF4/DRtuXAD4s4Gk8YCCFLh33CPUlqsWxYz\r\nKf9+Z0dD9+x4IZQkIWWZzRgUEnFW2CVPMbMVq/xn/CbMvsjM83DeUPb3ys8l\r\n/NkaG8bi34MvHM0Nb5a7ehnG3nD2taj+bGedNjMcvCVEFCu04RUIcUbYapib\r\nIBdwCqxq+ig4QV+aLl5o3peLb/akk1pOPUapVbws3M/MOkvuJFNRkn/CaSTe\r\nANofxVq03ikHb9QV1oovSDdh/NR5DhyJh2NsnXRETqmEho/9E2dXFkAAVqxK\r\nEbTFnPpP1dLGGzx8z7otpS7R8pYs8uVAIWbOMijXI/Fjv8btx7doEwFZk9Ky\r\nCclH9V/uCuiEBaQ0CpmFmMcOydaC9oQ94RRe9B/gBP5Tk5Nw5UpuvvZ79YAf\r\nGdVTocj2D0PDBsXcm3Jl3s+7T2vyi3wxH5ffk40GhZ/Qf79WdsuEwBaL46C4\r\nfHjdT5EqCmB78xrVxdH3UnUyt7dF20kMATg=\r\n=YHUD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.2.0_1660208212968_0.5845218524220559"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.2.1":{"name":"tsparticles-engine","version":"2.2.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"9fa06a9d402f461a832a645298425d48e89ebf54","_id":"tsparticles-engine@2.2.1","_nodeVersion":"16.15.1","_npmVersion":"lerna/5.4.0/node@v16.15.1+arm64 (darwin)","dist":{"integrity":"sha512-S1Rqxca4lxnMuVboxJbyIW/b8b+wRJJq7mmMS3wusM/01NzW/3OOyXFOcelFz9Ka6JJc7X+RUcv0u614BYWFgg==","shasum":"0d1c501479161ba65a16212140dfd996c3c746aa","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.2.1.tgz","fileCount":1083,"unpackedSize":1978641,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLR4iSHcYTvHEnsijyA/LwI+mK3t7XGMHh0zsW9HckYAiB9+3QadORrnghoq1itfmATTDACQBA+ouQto6JT5UWtJA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9lQ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpBBAAoBwU3Ar6bmiRfrbqX+H6oq4r5zFXy1k94SwSODKBkZStgrqL\r\ncTr3xvO8iX4ED6iBLpttsdcI477OZ4bnR3Vi+NVRFLvrOtSBaCqhhZS4qG7h\r\nOR8r+ptSmoHSoH+CJGR0RzLoATMXYWYjUHQkzKUOQ6Wr+JfqaKE3DzLU63fo\r\naLorVlrjdmSheC8AgJN/ihEdr1ZKSKRvu2eGwPFZn23SX/JQ9HNSh/I6QHUw\r\n043pFHgRrSwPLyI/0LASnfC9aFt1RZ0MbJolxduFTwB/IJhF8w8mtljJgQwa\r\nXeNcZSSDB0JY19QIbPYVUs/0qSz2Mg3wGTee+i5yVj2q3HILtuP+qYlmahp0\r\nQhb1IASbFa9bOsHUM15KnZqJwlW4sHOA8/h4DUjI85IUyLYsn3W/L1BhaN+o\r\nrD5frCC36MfaMamkC65pjJutIOSasViu74T5u2Te2DVnKDzfToDe8rCVS9va\r\nshMMyZs+ilZ5cuOQujfDHGHQKx8pI3CK7VPjGN8InIwUI8cYiUghuQENjgs+\r\nhL4H1dtRTqwIrxcJ8z2nIrTgEQJuPXYyptiAcxQ14CadP88B2uShiuRY98fR\r\n6Pmacrubh4YZzOHmHtUBR1bReuw7zPiP0UO2s1pYSYLGm9zIuW5zSnarGp6g\r\nE7lTwRXZDod9PH09rAfWhtx9Rt6BwAtIU5Y=\r\n=X55O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.2.1_1660310590704_0.4034139220868469"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.2.2":{"name":"tsparticles-engine","version":"2.2.2","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"333c11fb91a4e441183e66a8e4d678a3987f93fe","_id":"tsparticles-engine@2.2.2","_nodeVersion":"16.15.1","_npmVersion":"lerna/5.4.2/node@v16.15.1+arm64 (darwin)","dist":{"integrity":"sha512-MY9DAUVH0vZFEi43Wa4tAPTTgfbeV/Yu6aHFJEQ6lZsI0upXdI+o10+IRB03ydoRlwWZ9xcW+4xlYhu3TBfNBw==","shasum":"f2aae1b2d8b5e29a4c1b88db8fd98f8fb4399c2d","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.2.2.tgz","fileCount":1083,"unpackedSize":1978756,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD53ziqr7y2KttXEQHDIkiDjem1AtdDe9q9hqf5F9xmIgIhAJpGwArYmhj4LmbrVgRf3EXDYW5tNeEbuen1xlLmAG57"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+4nzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKqRAAjyK5k/PmNgdRiqqLRoT4F/jRoNLlYValFr2qKKGPb0ZXERRM\r\n349504bEvZAnyC9DG3BF7UvmFhHDh13J2BrQ8u7Lfby360iGYsR9n9kzSdwX\r\nRAr1ndW7lXLZbaeDgj19OZgDISb6QawL7vaZ0Zp/M5qipwYNhhSsHjPdA+cZ\r\nW0/rIEC9HB2c3QYGo+x9XucsYYwx9g29UR4LwcaqP8u4a4kaaG8vBvTFskNv\r\nxo4VfPdBWb6ggBSm3MI1Bu0UWmhCs8TV/a19Y13Iy87zosA7Ce6ppcx4QnTx\r\nMoFv2LrSlqmxG3BGRlutreJa2EHj31PtWVnuThsPBvfYouzlr/iMx/PKLQB2\r\nDiV2u8vzMVDYyO1ew37yBU6kajdc3zzkvJoAb/pTpARHnKszoNg6jTylCKRX\r\nB0rgtWiiWHzXusRJie5IsXMH5ecVGERnXY/ftgLSk2q6asZyTdq1JfnRdxev\r\nBgCWoSD2qKegSZKHLm401MNOT501UtHmIOd7ygu9M2MUWPFno3IzzeJak2h5\r\n2Vp+J4t7PsJ9jJt17SQDGlErtYsk1eMVG7dvLjqEw0qaxUaBSI3Qw3uhG0L3\r\nz8rOXbTEIm7RX1USYpcHMB+A+xavZJE+Kr4PueanjzAzqeEzmYjCGRRj9bjO\r\nRNoZ3xq6GvsxEVS2wxKDnRGLNvP/HNawiz8=\r\n=RGfm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ar3s","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.2.2_1660652018835_0.3101038936125802"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.2.3":{"name":"tsparticles-engine","version":"2.2.3","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"4653cd176c015e92d1e7558f156b0fcdfc08e5a4","_id":"tsparticles-engine@2.2.3","_nodeVersion":"16.15.1","_npmVersion":"lerna/5.4.2/node@v16.15.1+arm64 (darwin)","dist":{"integrity":"sha512-NsylSaQzjF1DvIzZ2hZAm8mtlA4t7fKEPHgL6sM9wU/D7dhm7+w3rFTditRIcEkm67MXZwTGSuP9h/OaNIsSNQ==","shasum":"6b850085b8b762a281839b749be820d966c07bfd","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.2.3.tgz","fileCount":1083,"unpackedSize":1979051,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXRBxTLPmCp3QdZRrIdyvnAAu6UiNGtF4vuSW79j8gCQIgOsyqWdKb0wzf9g7LOLEnA3D/Iuc0EQ/AIjXALzxGScY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAq8fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDDA/+JuECS8a5SL/aysoklkagYRmbTw15U70ue1XB6q33sbFtNf4A\r\n6Wu5KcF9JKLej/TCdcmCZg7zqVbEOBNqdIktl0thK9TQ/0Dzzo4vH8bwtbSi\r\nb/VNJJWp6TsUdOh4LjxVJH4fqfZPyeI6XnICsCSbfkXEa0XbONutyv0ozxkh\r\nug0R2dzPKFWrTd02TBD0W7y0YO/qrP3M8g3vbOt8LmJTMfowkKUDhu4H07nJ\r\n87XkNCQht6XxzWV58yBtKkRlXo6Rh0v8qGPd2XyT2SyvIdQXRmxfVs4H66g+\r\nH92poD99PIo/mqpb9W9m3klK+4a+TZG9uDxCk0XvLW266nvKSk2YWuIFaMBy\r\nQyKIY6pM4/DQMdvDsIpY0+ujD+cwJdf7nThVSp+Zr15Y1fWzKajCQ4+yWlGY\r\nXGD3SiA22hC44Uu2zytT4XK+SZxh0z21od/fNBcBtQxzU+gVVQ/ZsRZE2UOF\r\nMay83jL0xIQc+YfHM16VWBmwdnfHCa1CxawmSUPrt2PLFMxQCbrnBZDOPPn1\r\noi67++eVbnj5bqpbN/oJYcyPVMqLBWHvqREkS7pg2UijWw8Yn+BTIz9CagsG\r\nWjXcwV9R8ncGVoC8XC8QdSAqc2uRbd0MAamFaj6cr3D44ZvyCzqMLRW7DzDY\r\n7qpNzQzyFr2HQLw1re6cXiUdvhmBR4MZTEo=\r\n=4NUB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.2.3_1661120287530_0.11785216395242926"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.2.4":{"name":"tsparticles-engine","version":"2.2.4","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"5ce26b55245f7acd6b7b53d3389baba6c7309c26","_id":"tsparticles-engine@2.2.4","_nodeVersion":"16.17.0","_npmVersion":"lerna/5.4.3/node@v16.17.0+arm64 (darwin)","dist":{"integrity":"sha512-glpUmRJKdbtItcHqJhE05V224DsGSV283oXR9dR6aiqA92BX/2dxU/03YrvcbPTppuMo7rFsBMf4NrPV3tXEfw==","shasum":"b45f56ad3f3f7c5cc0ace466815305e19cb554fc","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.2.4.tgz","fileCount":1083,"unpackedSize":1979199,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADAGp9OeL+28tr++xc/Ymhd50xBzPLplx/MbkwPh1w1AiBseYBZBCDd02nrLuTT5X5jRHfrl9vVz6vruD+wwtv1MA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCL8PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGBBAAj/Dk0XUKCpOdUgZ3UwArWoUgOVxlEK8CxXRQH71H0uFvF7p8\r\nfgIJOa25HOMvSV1fc/F6JlVGf2BTOU2Ta3R3Uv2/VX1xqAYS+Cq/2yhfXa4v\r\nz+AquJPia7SkM1XboLC8xpetWrCjqmcWTc4YDR0nvvtox29EN7gszJdaSxwW\r\nYPHwNHdKXxS5vMeSkZMIyAjvmm+ryoLteKzLnBFbPHT6A6PKjfFcgDUyPBCz\r\n2y5CBC8M5f3+6eWqdRhKFYvusSeG6SmqZRHCiZagis1XcTV4fcHRYIa/g1Zx\r\nbl9zrqkATwTQmfrhr4fjubjs6Ab/rp54JTJyy3I3eWmnJ4VIFo3750lEG4Id\r\nIf797WL3oU19weXrlCVeZG1GlGsS80hItC8d1pYvkM+kLMuci9CrMhGpxBxY\r\ntJLHUfs7Dg097RUG0Uyktw5PQOx5SZ7D5otlzY5inuHIClihePXwUbAd5xi4\r\n+NoAjmvEUr05uBFs0Bj+mLVRVTy/mXCs0KHD89eCcvlmQxwMF97SrGyS1qbM\r\nTtuGjq8fFy68RNJoKK8hlu200tlxcKQ8311kxwsMdR4wCJri39XhR6Ww5xib\r\nqmQhKPUTHRICFV1LbtiDJqBSX3t7cwj6Ak9SPFKV/+n0H3CHHzrhm5T1oxf2\r\nHPBCHhR8RMH5zMim1ig51xr5HIJkI9/s+Tw=\r\n=yHOr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.2.4_1661517583425_0.9570475869869068"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.3.0":{"name":"tsparticles-engine","version":"2.3.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"53396151431d552449794f440e5d81e11d97f896","_id":"tsparticles-engine@2.3.0","_nodeVersion":"16.17.0","_npmVersion":"lerna/5.5.1/node@v16.17.0+arm64 (darwin)","dist":{"integrity":"sha512-oNK493SsLDSgiLmyccVU7SFRpH7PQXafXKgrnOUvCKplw9pemSqMHNKWcQwT8XuGmN2CoFnQrSBbwmsyvxzUrA==","shasum":"c9e3eb75eafd3fe281808bfb4f2737187060c468","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.3.0.tgz","fileCount":1038,"unpackedSize":1777873,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqgbMksVr1MCv8+lvFvflhqKp2BfVHZnRPJGXQvqJQ/QIhANnjjXjj8/HtvqJcfJGec9lsUJsyhdrMobfT2aGYutLR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHkXHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovjw/+KW+k+77tadyOhq5FA2Z71aWtmaQgFvn6bhlCU5fx6l/kYWcc\r\nIZ6M2P+kKNYUcySy4WJrqKBPfUIW0SEKoLVrMYeyax9D0R7jhlIwKrdE9GpD\r\nH2eLdRAHXBHZB6m294HxvsGoVtb/D5Dfo9eSIkoENxeHSr221Udz3P/YAN+a\r\nM0FSaPc1dUUupgmgL2TyXmTowlj5af5iF8iWbJFG8Np371srlPl3bi1t7GgR\r\nsXH1FXDOW14nNsjH7EOTRbIy7+KBKE/X8D6lw3UyBBB16FqM+TBMVDMkwrtM\r\n29DQ+IqqaOpwMWQ32/gW2KO76Z5VDdBuTY3IvRihavyq1RA90rbYDqgYyXCw\r\nXP289AoJkG2Mp+HH0aBGqjSG0zcXSDPdd4Kz0H/kEfCOyhUpvpRZMhU7GZfZ\r\nU5zkAWaX+I4e975CuZ3J3KOmGW0MlgIyM5i4DBZx5D7QGFg+nfAYdV4+5w1z\r\nQ8NuCrcc0RQbI+KfCv77+8ouect+DMjbc2fci1uW7hM6MOELreHt+7E29ONB\r\nKhwxcWdkf2Hjq56gbItOyAwMs+Hj62DZNbrAHfbk5EMM3FR3dw0zUMBrP5y2\r\nkjQLqtIhZj+HjzpkNtRYywwOdvG49IPpsbTfrENxKHIPdU7AkAuwtHcJbaqr\r\nyN1aThrl9JqrqyJIgB6l5WF7qmhr2ym4hwA=\r\n=D4lP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.3.0_1662928327056_0.8004348803704073"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.3.1":{"name":"tsparticles-engine","version":"2.3.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"4066373ed63d6c47c101543bc9be3932bd1f88fe","_id":"tsparticles-engine@2.3.1","_nodeVersion":"16.17.0","_npmVersion":"lerna/5.5.1/node@v16.17.0+arm64 (darwin)","dist":{"integrity":"sha512-aVfkRcHMFCdiDE4KZ1MnUKnvsCNUx+xt+Zo8yGQQ53UdXC6VxV55NW3vTZ3QoaZSrogQp8VRhLVIQpAbuOmORw==","shasum":"9ceac2971e87580153208d5436d48c17357a3e56","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.3.1.tgz","fileCount":1038,"unpackedSize":1777873,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJocDk5Kb9195yQiZAoojfdTpQ1ydCFcFqc1N9rvkZQAiBeuS6+eJkK4Hc3NQ7ShqMCrT2whqoRtgUlJxNZXtMiaQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIBpnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZIRAAnTlzNN2R7wtiKUZFki86Wt/iyMe1TGNI2+99qx8botRyLFxH\r\nQYt5DtjsxyxUc1nT409MQaT5rdDRpaMh9BWsCiWJs2BNxIuV/onJOj/xgmG9\r\nSWQmtevhxTj0Pv7JVUKflB4/TFqIX/WNJI0pf3Y+xY0HA3mRzRjom/yyG7BG\r\nHWUFVDvNDRVouaXOMGqHAT1UECXz7LTGJGtLQE+EThZrTwcbORf0C9Q4vTW4\r\nXAJc9gHWfyNBiPA1NfY8qSqE9Zp/ITuhuKwnQ/ouHZVPVHxUi11igW2vZeM3\r\nEyP4lVbyS7Xq6tU+AyX317tMPoz7hlJzz6Z9kwKrOPG+hb1GU6pu1Mc2GQ+w\r\nSqTU90BOZvxcxedVyzdHZsBzuQjcYyg3OZUAjOAqcJ4HrV57BeVigYl2tMnJ\r\nlb3OrfIBL5tHC5dY/FcfEWJnGFi59r9YVSzaTedskGHkGmo4yIBW9ZLy8Bh9\r\nGRY4PlVmcitaW0eAEDm0/gtAjXOU1okC2byoqQsf7J6DCbQcWZskWG+P4A3t\r\n60xrJKmtZo6kL2nItA6AVnjlth2aB8kGhVs2iR3RPnWsi1OooLxb6vyEbMy4\r\nhEUrzcPgAUMcPrcz+NPfzdipuk7LFooByhQACZOAR3U/t6kPtEzFxoecApu3\r\n/0ng4IBbHx+RURiKLBFvCh7DeFKB+6uxmjs=\r\n=XPxF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.3.1_1663048295331_0.16173968785576776"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.3.2":{"name":"tsparticles-engine","version":"2.3.2","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"88e6e0cd374dbc5c03fc88effd5eae86bad65d55","_id":"tsparticles-engine@2.3.2","_nodeVersion":"16.17.0","_npmVersion":"lerna/5.5.2/node@v16.17.0+arm64 (darwin)","dist":{"integrity":"sha512-NI0erka/fn65dt/PcLTqvjUJwRwvWiedoKFYfzvZXmWL8sgMnmdHT9cypW7p+U8hwFHa/lUkxO4U4jcYgnxH6Q==","shasum":"ccf7ac78cd16415a973653af680b93edd00ad626","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.3.2.tgz","fileCount":1038,"unpackedSize":1779043,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEc8wwQcBdnQIehFVtPkG5p/xr67+P5fgP0j0wC8BYdtAiBIYGuZVMSYLkmeyJC5JKzqzVExM95vr3uYRVowzjtD+g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK5MOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrePw//R7ltXmsSYuA9pogPqp8UXAZT5ONYoqlJmuxJWYECCLCRF3B5\r\nNhRZ6vq/Y+wrOV+AqkoPQvwhTtd6gX6q47p42NKBDxvcTwTQ4cVLrOnwPuQI\r\nuP1cWmzPsP9VCuXrmSUcm3R6AUfWeFeS3LYAwtfzvNrPan9fc+KzqApATJUo\r\n2rvYLuFUtlIU0HGH0mtS4JS7gsgVhhKAYkUtZz0h/YKJk5v8pH0iSPSNKN9u\r\nCi/NE6lqj0H4TMI5OjqCnI2kqiggl15hGKup8kjV6IIFhq/KexTjynFgF3WQ\r\nvTDjcAUbweNq1aPnTGZ5jes+Hpik5bOtc0QvpsAU5T0ChEP4osKcdLKRySOa\r\n76yVU5m/k3JkxOrMkZUWAnk6nugg0Sz15ldqlZtBdH2wCQTldrijDUNEoOYV\r\n34O55qb95ItSQhqckFPCHdbL5Ac9CxjZzzmOnCM2gW7U5zHtTeK+K4FCTiFY\r\nLQd4rqjZF6bQL1W2zivprL6RULIvJPbFWYf110o/U/BbxctcwIj10feTK1ak\r\nEiDrBWMqFYPyLIdxBSchmnw7hEoRA3BL8SFoWoUhBpWICOiQvfwwtFdZwGHF\r\nhpkNbWlak1m8D/xzbWjs0/AFdneoJ0MfmdaeZGSupBgkrybCa/prre1sc7Qn\r\n3mAUXyumIf+8PDiMKWTZUrc3fgYuuPVJF2g=\r\n=hSMJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.3.2_1663800077963_0.2803172599524246"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.3.3":{"name":"tsparticles-engine","version":"2.3.3","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"1b9b8757676bca67d8f9fcfaabf1b7b58f241db8","_id":"tsparticles-engine@2.3.3","_nodeVersion":"16.17.0","_npmVersion":"lerna/5.5.4/node@v16.17.0+arm64 (darwin)","dist":{"integrity":"sha512-OryoHLPwMRRj+P8eC17fCi1a+KAMZM8iayystk+Xbe/QGzJ45rptvcbzKwRGkxyuLorVqfbhqLhS5Aeglx/vzQ==","shasum":"cabdc72ac5458b5926e96dae4f6d1c1d4e6d9a89","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.3.3.tgz","fileCount":1013,"unpackedSize":1757394,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcVRoOosGttnR8b7v4HK6Wu2XLa/zo0gpS+cNQjaQt3AiEA3ed/eniSfrE6hMjFrguvqITxui2zSQjd535gd22LHrA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNxcdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqScw//QIMq5C34j4dtfr35QV7qpC2KYa1RvwRwS2+nGSlzJTnElffx\r\ntWz7tUy4mEZ/ggcHjiiPrjNfunrRT/J+3ZPaUl3dFDmwwwL2jKQK9iZ6IRYW\r\nwhvlCR/VktiMS8XOB8Q8T8NIylpqYaXkuqXsE0B38YZ4ctOibuzC5fCTGJZy\r\nnxjJr7SS9Hyw0/GEBbYyUcY8yGTvlAkkybIFnZMrjyccOlv0xsiI5Odxg+K0\r\nKsYOi0304ZLvKGWA08Q4g2G5NQisxCXGT8OMvk9SIo51sBhs9xS8tYldDTxY\r\nVPzc5fBVfGs4ujOPKq+msUtZ9jfBacj2dBnYS9zVR3AT9YK/IdBACETRb4o8\r\nSTSRfFYemAIFbDRt+mXsPgcZf4kjV+jYITTpAgnHrAR3wkrrzW85zXFVWHxf\r\nK8fsJ5DM26hNh/pcuF235dgC+8P5QISdS9WbhFeMCz9LFYizfmh2v8Odx/mV\r\nirqFBM/ZtNIcNqN9Nf6YTuQziK4KD5FZwKExpMGbvIj1hupn+hyiS2dfZIWm\r\nV0fKxbVHeDJ9PzhonrX0aeTFFshu0Zz12qfGTcxil+Rd969PWJpn+xX5djpr\r\nVlrQmyIvbMYlUa62Zjj5s8+yzz72YCtSmMxbZB1csaOzTGH9lcInv920mkTV\r\nkWwbTgeuBKBGksEyEihH++e1xwOn67BPj7o=\r\n=jPHn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.3.3_1664554781562_0.44566908689963425"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.4.0":{"name":"tsparticles-engine","version":"2.4.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"2ebc4792dd6c64b779662638851223dd27109c72","_id":"tsparticles-engine@2.4.0","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.0.1/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-hwg52ya7PpNfKJzXezY3Pq4gzGOmDW5AQrhdLhbot1ongUhuhTQzB2oG82OpMhorPUDUY851iDOjpl16+Gnd0g==","shasum":"a910e5b5a5924eaef45e0c5df96cb5894019ef01","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.4.0.tgz","fileCount":1008,"unpackedSize":1631648,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq5VVr/xvLgD1d0oVIWQdVWi7wdfXL03VHkw7CsYdMpwIhAPffSDz7fAea7ylO0GHT8FrIprv0BPwz4DYqYUY4BKjT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjX5jCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9wQ/+OoDIFb3ODlk24/x2fMRMO2/iMNDDKiD9OJOqfZY31oj45i/P\r\nsTKZwVY9A2+CfJKtPM795859c/wv98sjauxItdgTFOG4UofStq0C0uyYKTrB\r\numzxL0j+cBnenQDyyXN6Dr+y4U6ydKEVIGvoUC1tCk4+bHwFIGv6b2DhxbJb\r\nnE/KbcYaye5BV+r8qtxWRnIs3k0HcFlz3Rp9JCPl6vqeqVdhYLfnIiY6DwjS\r\nP2bbNjopbYn8XRqnZ5/nxkTyGUCP9vvsvyYPsPtJHQXz0ky5qwoCJjbLpfKN\r\nH2UuqkpWeLsGTX9kVBR1z5Ea6h3TDvLMx++bSnFe5kNuoT9L7o6u0G0i2ZOH\r\n6hw7WnzXkQgfnqE91cpJNeSUJ4TgtGVFpjHTM7zSK2cG/1+FSJQ13gIncDnz\r\nJ8LHCzNs+gIac25lACRSrHpjmNl4a2OSB0xj6Yt9LiZJ930PQ0cOY/fvMJ/w\r\nk0MebtPfl0ukDwZa3mk0ttWcPPi7DKlaERUSGi6pdAVFf51b15FuBOlhOR9r\r\nxDtv9+/YrJalfmZFbt/IvXUMCd6zwtxYQeP12eUIEHW+RFjZcW0WRs0erCzu\r\ntcxbUmV/Ab5F/EVmG7maqboZQCj2npbeErn5Z+r00M4fCBGOe0gf6N1PyxLa\r\nLasWpM05gsjvJcx6dR8Islt/gYBMVYv21D4=\r\n=4JcI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.4.0_1667209410144_0.06657194542841705"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.5.0":{"name":"tsparticles-engine","version":"2.5.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"dc57c4ec9b08f66092ca97b3898d07c93db8bae8","_id":"tsparticles-engine@2.5.0","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.0.1/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-eeV1bZmSoPQB8nbEmiOzAsFUSaFzlZoxxeLKgi5gHbhuLTSUEbQA12zStMm49Njg4aOzVo+fg9JyRVnWOLTqBQ==","shasum":"e2d95254d9ce23d3e90e89c411289220850f55b7","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.5.0.tgz","fileCount":1008,"unpackedSize":1634742,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqrNw+YT7AM2FRfz8T8l1wRPfc5QQUf1hJgifHxAfUeAiBzv0kfazNUbMcDXuh7/Bqxf7RC75eXYp9cJy1nbY34Qg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYwSYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkwg/+MB5eU8h7PTd3cBMJqGUdTAVMtJIJxnGlydeTqUX1MUG+maRW\r\nXvUA0D8DpM2AlyKlwe23mjKCzhP2C6rjIg8neUPDPm2gLKSLM4za/j8Zxm7M\r\nWhDpllenhiztDJOt5UwEtBu9h3X/k85q0mk3jCsQjp2hUF8o5YeJwHVoFiTP\r\nezHUK9J/pf3Oy7dYp4O3Rk19M4Wal27dNrVNc/Cncv0nXwRaf/zBioq5b0J3\r\nehoyGVDr0Avd1QzleVzlD2fhKOYFg+EGiyesc0HGQUvaAUowbkQDpcZckREz\r\nA9sa2iJOWcq48ed3w6q4Fa2ddBudoMFcPblOzMhTIymmf54gXikZ6KnmxDlv\r\n2eqhBPq7Z8J7A3gj0m0WWrWwqozQiieLTgLuH/WYT/fs8FcIGsLg8i1gQU1J\r\npjjV6dqJkNVFSAIhjGI7AeQcD4gHYnVZ7KSZPIBaKC9x4jEu25jsQT0BCEPb\r\nOs/+88WZdjkAf/DOvzl4eIqxDdsN7mDghHC9yfCngx1Utl0HkgKk6y4/CjeT\r\nDDFisL4hdNiFFHxFeb72kRcxx3F2lKe2AYX3dvDf4lm0HEbjO97VIpbFkXzj\r\n9B0sTbflorvt0Myck2i64eV/Kzk89mQiy6goYoCe2gVABoynIh7WOzGAQ5E+\r\nZtKctU5O0VMF2VLnBwZovEstvzLo22A18QA=\r\n=b00P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.5.0_1667433623800_0.6628919032695191"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.5.1":{"name":"tsparticles-engine","version":"2.5.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"e616d4fa58a83e45d5645d8c6eedbc745664b737","_id":"tsparticles-engine@2.5.1","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.0.2/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-nPY3FumCMVQMLju5hSxOhCyf4TrWKHliE8wjz9WtR4YEOIYEgakpZgrrcujDvxhAB5tWUUHVkLN6XPPs1ozfsA==","shasum":"88906ca630e725e878a77cd19348fe1f4ca404c5","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.5.1.tgz","fileCount":1008,"unpackedSize":1635397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw6aZCpiKWGZN61iOYHUh/fLVyyoHGuc+q+mJIsQE+sAIhAMTVyytn/WDfXwSwr9uUc7SD6Cr6+C37BsUezj1lnesx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaQ/vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Fg/+KkENvCAFuqdJDd4NY6Iqzd6T0ZJ8HaPIch+N2w30oP6M5748\r\nhTt8z0peQE7YZjti6aHta59yufLY44MNcnTAk+AgkwyRq9Scm0v3xaqE3Nr7\r\nBDp4wSx7aSer4SpEq5VHvb8nc7Y7al7bKI2aGR+u+vo4s1J6uXfVm854odYM\r\nNa4db83YCvolWKRkZEjA6GPL9GfZVI/V1YWE3oiF0DZzFtw/QRMRksierI2B\r\nM/0wIrMk6APlQAIVaYEPbDtO+RGFkFDkYFdzglWHOeGwZH2Zx7zVN/4kKDtk\r\njzkJ6Y54agqVn1Hu+r9K2OmuDLR9qfso89rhbveD1aBpjYqoymMy/irqOCVY\r\ny3PaJAy9j8MzYwyD7YjS+ocreiGzIuYl/D6o9BarUaAbG395aFOv5vGlDF6k\r\nnhFhS1J5+9HBNHi/Y23qU9CWp99UOtw74SGYA92UAtsFYYKR7x3BfxTPdxMz\r\nxAkbzwBRW5lJnkUG4BhE4t575gjNUJfjVEkGFkT3/8QCLOJ0LRdjtVAV5d2g\r\nctGnSMIu0DqvDfTdIHl/vVCYARRv/LPKISguRfFoq1lFhkiv840FZmWM1k3R\r\nlx1U629R3ghLfAj30x85DctvwyVxEtrw6JrK7uthTxrAfFNy01aU36K3EDk3\r\nVrVsSNGcbyJMFFaXi3iyr3dZlQf7+nr0nlA=\r\n=qoPN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.5.1_1667829742784_0.49121161487976783"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.5.2":{"name":"tsparticles-engine","version":"2.5.2","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"9749e1caaa995749d7826a09b71d8317247e7ea0","_id":"tsparticles-engine@2.5.2","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.0.2/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-P2m1E/EIlvEnH9l7OEIpeKXxSn1ThNhWSp6zeRYvH/DntJpI5Oqa/AMrjum15rUzBkMDgRo7XFO4LqRWs8iB/Q==","shasum":"1772e857c452af806602ab0f33c90338d109f8b8","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.5.2.tgz","fileCount":1008,"unpackedSize":1634862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSO9KCK/sWfEEpiAGbt08Yd0o0Zh2WkxDbZv8+k+jErAiEAomWkNXf37y03EuYL5FBTyW5H0bbujQ9ANPv/aPGHaR8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaRVLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogGw//V3+CldR0qBg52ryzAFFPs+0smcHC03LNnf8fy7DSxb4TX+Xx\r\n4KEFeZrib+9gmzX6rkCxKHPhgR/oam5+CugcblvGh0PvMlyc0xXn7q5Ot1ff\r\nzvjhtAcMzcrG29VW0x1sLdckidLGwHmpsfBcSU6GpQEgUro20Dr3UWP/Fho3\r\nmXOxYbTTyFmEGrUMB02VzZFRy9DlUcAlUsvPuhpJax7hzeYCtwx377XgS/cp\r\namucEiQpuEnEJsR2BPZQwa74KHDy+r7Q7nO/FWC9ZR3uB/8icTI6NA7MMc48\r\nD3d7U3oymEy7wBHOPUo6mzkIyg3pYu89vDueuAqR4Mi+XoZsXwR1iantI3lw\r\neI0WURQtZvl1Yg9p2uaIe0h5YzELlzeatGlDJ5k7TjOyZOLrzsFJDF54p0DL\r\nBDEeNDzxwQJVcziYavpCoe9k6SZYRxjyLeNl9e3WnC5txVuCh119nqfTkCDz\r\nQYatE5dc1w8DrcUmLOOtqySQYVOyTU1s5KSNgm/FCqSNwCpTjgjH43YewvwI\r\nMte6QLTyg2SEod3yrah5mYE+Ecivc35o1T4GlmiBEsyWedmV/IHHEiUr+r+9\r\nd+kZnn7Lj63b/Q/a7UeQO9JyPPXEBROgxyEizeNdEq9ju4j78Aidfy9s6Rz6\r\nj1HuEza3ftNjXRTFLlE0ID2J3MtSxmaw6u0=\r\n=yvMc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.5.2_1667831114984_0.9505792754940767"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.6.0":{"name":"tsparticles-engine","version":"2.6.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"312c6459f9d1441e3ffb8ea99b346b7a1e23735b","_id":"tsparticles-engine@2.6.0","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.1.0/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-Kai80jf9mjQVP9WVKqCpxegi7HquVMtiniC2PKrY9aO9E546Lsll+ueUdKeWsSoXBVseN1yqHJcpOKkJy61hIw==","shasum":"78ae1a9b0270c6d7607529016a96d52a8ada3711","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.6.0.tgz","fileCount":1023,"unpackedSize":1643706,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvxJK2jlWGxeEu50g3jojkMreVqsNcBMvt2LeM2c6PbgIgQcph+5NFAaYx7DMFIdcI3OhvlVQ9464P1A9xiExKJi8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjjos9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWZw//RWFEQ4IuVztMxLZV0LMDUfyT4NgwBXFDm/kjkthqCkbot6da\r\n38gR5sRrFEU0AhbELF55CcqgOI3M+1KeENllLe4JmnC2/YvGPi/LgezyFq8F\r\new/Ur2ScxPkzxySTzECdrRYWxo9W8bmWehO3BB+w8m0O/YIbRZktgLOQ4wi5\r\niNrJS+6x39OdXiyZZt0y63iA5l56owXGcKPXwHxRcsmseZKgRJsyPRRr8mRs\r\n/GKQQOAXH89FnMn888Sxih7uijxGqFQmBUpor5a+3JP+mlvfJyjf/uZafNa8\r\n1q7Mv16TUwRk84rfoqcN/I/wmeMmzgPc3iaZdQxdXP6s5msBAYS3gOy8yGFb\r\nyx4tmaBGJ9ANZgWx6+g4w8H99BhXGXWToN9KSWvLIfH9nspGLRz7M/66jpJ2\r\nvgEv9FpmGZI3wIzZPp1sfsHlrkpvd5a+7Cfj64sohKtz6lyhewNfyr7D4SGy\r\nT03+2/NvrJEs6JvpXkyi59/mIMGPSECNfeMWQU5YOMCBksnL8fjIegLu78GU\r\naWbmyZ4gQY46gm6WhJVQz/Kz9WROeC6vuJYUB+a7bIAMaulQyOXKbvU7z3Yq\r\nD94FjxJ/Ik5/STtVaLgOGQAFm0r39s6w9ioxerl2yiVn7kvllf84wAvjZO79\r\n//TqgVsKtr+uYuKbNMhHaVxGU0HbNmcJz6w=\r\n=RJ2h\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.6.0_1670286141398_0.3255862441389501"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.7.0":{"name":"tsparticles-engine","version":"2.7.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"9d7eec0410d8cc849c3913dc0ef53b0230564f0c","_id":"tsparticles-engine@2.7.0","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.2.0/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-zsDsTfKJ9aAl7jrk73Z63Zjdr/xp6GORvoPWnz8KksXAZ0bnvZwu8u1E5IjJOxCCvbiAtt5W4CQ1SrIUybmveg==","shasum":"a29486eca5d355b253151666112e1401dd4d9f6b","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.7.0.tgz","fileCount":1023,"unpackedSize":1648760,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFGqmy0dpAdEPmiv3ys5EAGDdTU70HF5ISm3RmgKnz9AiEA1o4FHYaVR8ZdhtWgLqqGnQblYoEiWmBaPsd1QF10iIA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpYkyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Bw/7BQa9PP0gEWD8rH93bAWFTII2W/HrDyUVa8FEM5HchmLNxy3H\r\n9o5F87/fGUX1BWSbrNNo544FW8aeLRuVOduvukdR7pft5DsVJMUSBhQYxvnk\r\nndwzi/ifnjW/dur9iqtWpU0R69QBDoQxax+c3KTuZjjjWmx7dxeIU4ukoBsI\r\nyXGgg+Wh1kbLEshOPhTeIWHAzCwB/makp2NtothB43blji9f8E/pQUEA5fVH\r\nUNvF6a5OJ6qikpY2+I1dbeKetTCWBay6dsRDDTFNEzbRmU9OvkIFDYrCoiNn\r\nny8SnE/bf39khFxPQ8du1LipnZHGgBPe14SvcXa8mp3Bz9QSg8tYD40UJdmQ\r\ncuXYH0zixhtIOJv+xCAGHiG4skKQ1tW3hQz3C4y/zzdVG9xS5myKjBF0n3Cu\r\nVl0hMQNDBCfOMupPy5skijA0f9oNU71lDr+1IAWl/44o5shDT0IRGZp99KpH\r\nGsGXXymzea9zahOYm3jyTP1B9i6NoC6zKcrSdd78KixqhO6mYUvSQt5BsxHO\r\nJ9AhJqwTAhe2bokByIS3NsrukwDZIZkH50xYNZwHovXHuCLp31epFyt+JJdM\r\nsi5dHD279v29pDXWu9Sy+UprE08IscGLWBYZQf/sL0InlzZLXQGiT6L9yM3r\r\niiJq42bXip5RRDWOBATFiPt3qwB10DOFGuI=\r\n=Lll8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.7.0_1671792945752_0.7245525829263657"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.7.1":{"name":"tsparticles-engine","version":"2.7.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"2f00feb79f52a91002ab7997895bd5e188d71ee3","_id":"tsparticles-engine@2.7.1","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.2.0/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-iUjaagXDyYuJi107yADrLegIQ1jHe658JJQUv6+Fd/DRLrmuBU4XrzaxlERv72LHUrZtk1E/WmnOpeIw1AJzFQ==","shasum":"8800ed8569db65dbccaed6c42e5bf86bdf2dff1a","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.7.1.tgz","fileCount":1018,"unpackedSize":1647597,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWxuBRLoKEORhmBb1udBmsaz+qnTutb3Kz6wr946hmOgIgGuV03N8HqV19tJrdVwKWQxBaneBHi0JPR0ABtYnn2Ps="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqNKkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKZhAAjADF1jInFoO+vK7lOSxUMGP2VH0Hv1cHhKggPZyVVbUX091w\r\ngWl9fy8MVV/+pqXjZALUTAtkC1bUd4nr//KhbwB9acpKvaYpNEcAsIwBLJNs\r\nFMuznnnKMkKR1+9vFcsIFgwObAitOJAG+8H2AqhV1/qrs8e/0uW50pAiA2Ql\r\n1fFQfai1D4OQMbwVb7NeN9OebNyCvc56Zs1y8R/b4lOuqGhf3aCLp7gNQTfD\r\npFVy9qxoZGHRbGJI/fOyKZ0f70pFxKtRt+Xk2WglxZJTS5FUIKkgAu7Is5j2\r\nuhrs0jYtLCCzf34rbpA566QtL8PrMqoTY6GYlhjTKpw3HMgo3+g/atlu1t0N\r\nMYN20NmCeSMctp4YE0XVAwolw9eJ0oB/IXuFzUFL6T+xo+rxwOGegVGXXla8\r\nuzu0n2zb3oli84Cq2ew0iFvTkSsuKUG45c/8k+kFrD9obtCZNUrcY0SQJ5FD\r\njykWE8RMSCEbNZkQyq60lHJvIfz8vokEikPbrSxCa6Z4oNguMeZd+ZZZA7ma\r\nwJ6QEJ1xH5yKv/9zQusyerZnNTvTRNu6J8hg1CU2/lMoLV83UjTKdN9wSci6\r\n6afjWejn80oe07HsJECPFn0r0MgTjMzZrtxUThs/uGZNAnrlCmhjryvIA7VQ\r\nfqoZ7OB4UDssWVF5iSSVsxvQwC/NEkmqjVQ=\r\n=BCQG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.7.1_1672008356012_0.13569305084556227"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.8.0":{"name":"tsparticles-engine","version":"2.8.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"5eece6e7d00e9fceb4710168a51db27696c19c48","_id":"tsparticles-engine@2.8.0","_nodeVersion":"16.17.1","_npmVersion":"lerna/6.4.1/node@v16.17.1+arm64 (darwin)","dist":{"integrity":"sha512-r0cWKxefQkQCzU+RRG/82VQnl/fAkws27EuYIOKcnHiYsWnZYcX8iPiQs/qgDajP0haBSn4Vui8UbTCAwSFniw==","shasum":"8297addc8f97f8789d982899388db367b89e7ea6","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.8.0.tgz","fileCount":1033,"unpackedSize":1661993,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICYB1HQ3RbcbxnqsMrSNo30c0iK3w8rU/XJFn0V7wifGAiEAzsJyVUCD9lBb8jgAu+47Zvmu02v+l7E2S7JlMp+dhn0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjx76BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMFA/8CzxxS3X9lbgZ+inwhRRZ09bvvbIAKCT490QV3mh35eLx4u3j\r\nhWCeot2NFh2jz4Smo480trQEbv2tZAfg/Nr/wqGnX0tXMPmT7oJUOwcSkcQ5\r\n8jtEb/C4O86fXVFeMjEj5yRutQck3dkHwzs9/CznxRqcMAQZf0mH6MKwliQi\r\nCVBdoRx5OhkJZNQUwoMPzqB+pRX7/ena0JQQo6UUgkLMjoCRc4ps3RQ5rPBr\r\nSalSTVWysHRhrXHfHJAeEh2XC6hBHLYsGjar7LweJ2GoLeoNLJuqbO9BPYUe\r\n2mvZYsSBwyp7CGFwpxvVUARypMZ1iu1eY8dNXCma51o5DR6GH/azBz7tODA6\r\n89sE5VQ0n1AAXC2RdTmLS/8e46ggf2No9fhD2S52roiytZSrQytIecnAiIyZ\r\nZZZ6PZiODokGGhU65j+ns0Mg9tpEQtQFoM28nCUUkzT/PYo4Cy9alpH2nnp8\r\nHJA5Bdhq/37P7noZ4PJpFibQnTnIC99aqeobMT5w5NK5/mIUtOStxWyNlaOW\r\ncdygaIEWdJOvtnip3gdfbfe098wwOh7pcImd7rLCn36Qg8DH7tAMYfaqs5xG\r\ndRYT7DmCeHy7+kxZ7Uzh3VBXf9vT/A0PY/EpVdeKB8VmHWjDY5jgUEDHheI2\r\ncTvjFjYVlI0oDS3dHgKXOTXEt5NtW0t9TJw=\r\n=kH97\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.8.0_1674034817737_0.2277779321559481"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.9.0":{"name":"tsparticles-engine","version":"2.9.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"d4f1d552e174c0fdcf27f8d723ef1e33e48b3139","_id":"tsparticles-engine@2.9.0","_nodeVersion":"18.13.0","_npmVersion":"lerna/6.4.1/node@v18.13.0+arm64 (darwin)","dist":{"integrity":"sha512-KpoglV8LF/yoN2FRdT6AgkFRlylR+Trj7JHZkb8Vfsf669DwLhVt6jCZ62edPrA7eW+gJmCyU93c6m5Y7k0AHA==","shasum":"0efd222b53f3a692475b53525028cbf7d4c61bf9","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.9.0.tgz","fileCount":1033,"unpackedSize":1662222,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCBfnZkee+0nSJsAPkaLsnAFdu2bpi0QT0uR4MacxaPwIgMdxku9MA8EZ4QF2NvNKsSGlfNvUSGMr/+ULTJX4Fj3c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5jHJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWMQ//fKk24Hf2YgTKSTbIYBKGgb+CtCfzgJqGYY1bzXjm7PY300e9\r\nORr1hyWZ5I9LiVD5tQyL4bRg5VK/xMDIGiYRV8LQoGioPwXl07y+z706XSzU\r\n3vJvAQ3J1t/N2lsKx0Id6ql5dn+onnUklwyNSbDqwxX1Y30xpDf+Sc+Rtjlr\r\nYKHFi3AJXI4GsQJqeQPdTX6msO56w5ueI3dky32TjXRRffiRFgA1bNDtptZJ\r\n+UFDj7sBhg/B9Q31VIbXt2Lhyv0wLqVPi8g/8s8EjSUp/+a+xrsdh2eHf5qR\r\nEscxvLvhihmXJzb16/+IgOoZYMg3Jj6h2kKMJwfOirBpv/a7hfHkkxzM1ZpG\r\nl1uKJZ6FSb/fDY7ov+q3nqb1ESumbQMhsX+FVphx6mvHLeD/7BhWfMwvx0YK\r\n1CiNtUNfBMqP4zyo6vor7E93DUcCjadBUQcGJGFs58lgRCX5JeZ2E6HkkUFG\r\nX3shPAIESDqRH32oLYKJdjZ0EZWGKXjD5ortrvTz0DAkOn/d9Sndr5VNJuuy\r\n5nXDbLLxkTAgsqlvprD50qgB0/PVxiQdUgkNUF1sBDH4XcRfpsSjRCJ5+yzr\r\nNe/WrMuvx/bN+akbX5vr02DXHkjj6XG75zjEoMka9MILo7ommp+yhAqMQ9Ll\r\n687cFZjfMEx4Gt0Tt8YppEFsRvzZqT/9IcM=\r\n=y2OC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.9.0_1676030408925_0.9437713149837894"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.9.1":{"name":"tsparticles-engine","version":"2.9.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"aa059da25e1aaead923b79d72329abb64f5a2c13","_id":"tsparticles-engine@2.9.1","_nodeVersion":"18.13.0","_npmVersion":"lerna/6.4.1/node@v18.13.0+arm64 (darwin)","dist":{"integrity":"sha512-X1UtRXUvlU02CEbj/TLFAlq4ytWIVhx72+VsE1zbuBOfezozl4hwUxdZAW+jQrMm2wEa7FEkCluGry9SMVSYlQ==","shasum":"c38c87e9f417a00204b4dcde36fb0e882f65bad1","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.9.1.tgz","fileCount":1033,"unpackedSize":1663609,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEVaFiN/0pPRzxe1TDM58X+eXz6DNbEuLYqEEMvMKOhAiAP6u9UUGJGUxxjj9r6xBdG7EPGARJAQrQysZ9FAlrtig=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6BupACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr20xAAlbDvYOqaoo0nIjWsfikkdf0IAcAVHKg2FKkDpcQj78xe0MPm\r\nePjWptQKSEa1Jm9dvteVt33Ghe0gVIttybwzrSf6jtgcXAeHXegzNQwqtDI/\r\naFW2NUfuCMdlCAzWUFuxZL7Hy1Ew6SPXQ00DGq0wBgfU6f/H3veOzlbB6fBx\r\n5sMWc40rbT4IkPm+vejXCRZsh0zOk3qpr/nkDuzbX2ATG0c2RSZIA86Cbv0v\r\nZGcugXEvraudHhIrIogWOSNOW3r2IjVfxzCHng9pBoT2Oa2lr7u1h5qN4v6Q\r\nrtaqt8602elncEC/BupSxjwjQFdDPwUKzj+lNOWC0+UB6X8M0yLp9ju/NQH3\r\ntk6DhZ/UiGWhdbs8QqBDswpEQ2JQ7uw9wed43tCvpm28+yl9VDEV1D4zpdxx\r\nRUN2/QD3lPyCCJBGosqqem/YeeD+BNAHJmAL/WlqqWikLWD5ZXFADq4W0l95\r\njogs008iiMO4ZILtM5tN0M7HhqYVaqZr0bISc+msLUyXeB/OX0xABP+j0fol\r\n+/mmDACDpmKtvI0uk45FDq0efDyJ3n11eMhmD7h2ewboIW56cGHFF1yc8ncT\r\ndbgNRDwqoVXSWdL0uB93m5SnmUSCHX9cFoYCIK/xhiAEHH9oPZLdhxEYwvkl\r\niEzOA+J7Q9jmQM82Mt7aG8eXvy8Bsqwmvt0=\r\n=vpRk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.9.1_1676155817386_0.8042959105099952"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.9.2":{"name":"tsparticles-engine","version":"2.9.2","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"e68f290dc5009fb603ebd949f9db5a6fc4303e13","_id":"tsparticles-engine@2.9.2","_nodeVersion":"18.13.0","_npmVersion":"lerna/6.4.1/node@v18.13.0+arm64 (darwin)","dist":{"integrity":"sha512-ypYtQ9HGyGBn3mL3qRWPncF4dc+iYGss2MGXecQfe1C0MCN+dn0ZSS+XE3lMQE2dAyF72kEVE8iRIQVmbqVUuA==","shasum":"7c84a19ef86c950b226cbe76f01ead5a773defdd","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.9.2.tgz","fileCount":1033,"unpackedSize":1663725,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMLoITMgR6SSiU8nzys9EaJjQR/n9nif5Ur8kbg8NYSAiB+V+mSzOfOjJae1NCg1uQs5heTqJy2z79w9zap5YvhVQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6OG/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsbQ/5AEOZWUsBpDwj0R1KhD7DRkeVMUc3vCowmV5JBzz+cNT+XprZ\r\nwRQE/HLBzt6EX2FYj5XTSua7CU+r3wKSkkNQkj6T2Nh0B+CRN3PGTcDXETJk\r\nQoxyL9L5ZO6iYeLUh8KuKfRlXHp7t6ZKb5E1IpYAfC7u+E0UF56D8FGAGZn3\r\nIJ8c8ynKPScRNoZNNdqdZC1f1cHdqsucao+VTmajQSSfXAWGdqEjyK566FRE\r\n1y/pjZgJ20C0IeQnRIL3s20xIe1QVPtswBzw/vpsRMlCH9KS1/U7KCal27mI\r\nUFZBqcY7foBIKtwHpOFJwTEkZQD2AgIXnzs1L2BWOc3Es+ViVnnMGo2qP817\r\nLHy68b92kahaQEweN2zPjG+31G/c5aFADhIpK+2aaKqR1rsSLzE9eIr35Jgq\r\nyfpmpyNfrNF7GkaTgrk7CfEJi2EPGpHkpsf6lU9OLu6dE4XqiFM4Qk2ed70B\r\ndV13KVV20cQeIm0TpMRIcyB61GPOlR+xdrz+a0ikwMYvmdIOrrnDYl2kiAnE\r\n4pscTQZsASVV5DVRI26VFwMuTa5HYHLhTC18mpGgFIa5SOef4U28mjG9cdlo\r\nwIidICB7SHs8XHhwljturuqIXavigxY1O4fJQ/GyuqI8BKmDSOIGT0cA9ZEa\r\npvi6MKJOG4NDdhF6PFK/5z9XBs87uNN1rhs=\r\n=AgbJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.9.2_1676206526990_0.1933798141273133"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.9.3":{"name":"tsparticles-engine","version":"2.9.3","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","gitHead":"550fb7db0b1886a316daf84713628d1791b5a7a7","_id":"tsparticles-engine@2.9.3","_nodeVersion":"18.13.0","_npmVersion":"lerna/6.4.1/node@v18.13.0+arm64 (darwin)","dist":{"integrity":"sha512-iAD8LyRH//kx10fDMm6AfQV6dRHs1ZacUUHqVwfutcqM4x1IV2ygpjk0X87LKCnBxYeIMG78+tlxXpnpwUccOg==","shasum":"c521edd951df2520bd0a8aa76dbbe1b0b183094a","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.9.3.tgz","fileCount":1033,"unpackedSize":1663460,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0nriLDwu32gXU+yfgFf7cKdjnJzF91Xo9NyAy0Z2lIwIgToEkahCazpEPD8C/p85TM6O/NfDPENtm9+lRj8Ry6Mk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6TPwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgKg//esxAdfQ1aiGFgND8ebsashAHNzbTXk/v04B/+nMb5u6IQZeg\r\n0TQ4UJK6AzR/BSor0uQpotVAvOhkU3A+Oe5XnyWrs1jTzyu3eAiRdSvYMYsr\r\nYdgYnDudwrxTy/tLEY36YziENeAu9KQzXf4ROZZaZgjDIf41hl+Ck4iQ3QXU\r\n4YGuIDYTDp8PKnsTiiNj7bYn/sj10cH3vND61jzmQvRP7/0wWKC/umY7H08q\r\nSyT9rqHPq6sKjCi7u+ju8VEFbuIFM7D+N7qJyRNd3buy6vRna8U8BaKgKDth\r\ntnpK0CmojkYSt3iYSGrES6C61MTopjUzjnAaFOSZfyHKjLoO+z3SvFrJhDyC\r\nE4I62o6U4ip07W1UQ9YGCLenZGXdgisCQQUX2mr14uhESS1vPXDKWhqxHxd6\r\nEGKcgTM0bEr6o/KWvgpnoEwU/fJ6FeZyFBZtmE2HRQNGYdL+0Ty5j4RWpkQa\r\n8nMZXn3G9Dtz0xhXpie9/gVfizkcKcvrt5fh8UCvhe9wNNOSfwQsJ7rTKa6M\r\nLhLUAfnKIazR4lnvew6l9PGNzyr081kCJXyljNyGbrCPT2IoeazLekV9xYsb\r\nClsNKTkbheLwpczh1baIOBZL6IuLi8meFZWYYNdJaezkZoGkVjmo0DObu7iX\r\n7YcRWVsSJp/sjGJd3hunjh3VDLW7GLjo2pI=\r\n=cYeC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.9.3_1676227568205_0.42488010018669886"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.10.0":{"name":"tsparticles-engine","version":"2.10.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"github","url":"https://github.com/sponsors/tsparticles"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","exports":{".":{"import":"./esm/index.js","require":"./cjs/index.js","default":"./cjs/index.js","types":"./types/index.d.ts","umd":"./umd/index.js"},"./package.json":"./package.json"},"gitHead":"a687fab834574c52bb82063c8ebc33906f874d0a","_id":"tsparticles-engine@2.10.0","_nodeVersion":"18.16.0","_npmVersion":"lerna/6.6.1/node@v18.16.0+arm64 (darwin)","dist":{"integrity":"sha512-9y2w8zeBheeMyM65UeRKpw/fk5WSC00GspPfG2MmtiGUCXReBkirT6ixXDiO3IWL3BF18vVzdYpmKpphjy6dJg==","shasum":"16654980e5c36e5d7ca2512cfb783d6ffae37ffb","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.10.0.tgz","fileCount":1053,"unpackedSize":1643383,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUqublo/EKp/2G4DrZpOfggxNNXDQdDzjUOUxEyVq1cAiBuDlIucb+VZO1VbEX7rDUDIcCSzuBRLGVURRgOPrSBJw=="}]},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.10.0_1685755401526_0.5833508279595216"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.10.1":{"name":"tsparticles-engine","version":"2.10.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"github","url":"https://github.com/sponsors/tsparticles"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","exports":{".":{"import":"./esm/index.js","require":"./cjs/index.js","default":"./cjs/index.js","types":"./types/index.d.ts","umd":"./umd/index.js"},"./package.json":"./package.json"},"gitHead":"1dca8ed4b83bae1152fd724256f8e11bd37c1bc3","_id":"tsparticles-engine@2.10.1","_nodeVersion":"18.16.0","_npmVersion":"lerna/6.6.1/node@v18.16.0+arm64 (darwin)","dist":{"integrity":"sha512-DV2gYsbChyiXYIZYgnXtKHSAZdvnNMJpVf9Cw0gO7vjQ6pcgLAeyboRtvsaTfwKZNzzA7BeSf1lVhgGxorL4CQ==","shasum":"43097da18ea6b4123f12115fcbd5243d45e85fd7","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.10.1.tgz","fileCount":1053,"unpackedSize":1643716,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPy6vNtENhEYZqTUCkaA785iGTMAIAOAZAeev/Rxfm5AiEA+I6NhckJcSvas8B0LkOoXE/DKn+JYmWzZWq1gGtNooQ="}]},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.10.1_1685880935549_0.7740495010309547"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.11.0":{"name":"tsparticles-engine","version":"2.11.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"github","url":"https://github.com/sponsors/tsparticles"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","sideEffects":false,"exports":{".":{"types":"./types/index.d.ts","import":"./esm/index.js","require":"./cjs/index.js","umd":"./umd/index.js","default":"./cjs/index.js"},"./package.json":"./package.json"},"gitHead":"f157d9f6b071748b5eae7b972a7085f4f43febc5","_id":"tsparticles-engine@2.11.0","_nodeVersion":"18.16.0","_npmVersion":"lerna/7.1.3/node@v18.16.0+arm64 (darwin)","dist":{"integrity":"sha512-kL6aV/6TPNF3jU6ni8jBGSVdnXAvxaeGsFalR4h+L3uMPlmbRKVs/QSnG3shwWGdWJuFmPSmXC8nI1OIWCUYpA==","shasum":"c687299f497c7b724966feebfc241fb4b22cc97a","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.11.0.tgz","fileCount":1053,"unpackedSize":1654509,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1ZYdzBqhSeApqwSZnRUi2WzCkI9Dr7F0wZtjZavajAwIgYO/5ZUPNWf4KQWGbyt5tUsT5xEGL9Q/aLw8WfYlCYqI="}]},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.11.0_1689204787565_0.5972407472155556"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.11.1":{"name":"tsparticles-engine","version":"2.11.1","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"github","url":"https://github.com/sponsors/tsparticles"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","sideEffects":false,"exports":{".":{"types":"./types/index.d.ts","import":"./esm/index.js","require":"./cjs/index.js","umd":"./umd/index.js","default":"./cjs/index.js"},"./package.json":"./package.json"},"gitHead":"70bf9498e7310d8ece4fc3e618e9c83e65236c2b","_id":"tsparticles-engine@2.11.1","_nodeVersion":"18.16.0","_npmVersion":"lerna/7.1.4/node@v18.16.0+arm64 (darwin)","dist":{"integrity":"sha512-tkoCi2SWIVcOkxni6I+ECRz3xfSX2dP/Wn+Kt8Qga/BGWlSrdvLVUn3DbXNJq6h/6efs6n4Db6uFtkceSyRWGg==","shasum":"538e03c6ea3bef99b114134566b2027c3919bb7a","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.11.1.tgz","fileCount":1053,"unpackedSize":1654509,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoHvoCkUKcF9bCuX2PZk8pG0SHKTE20xeRYV3OmHxHAwIgKOb3Qx/hMJeB9xZOIJIci4GDYqBUNsTIWfPuVVB2lqY="}]},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.11.1_1690241428396_0.5143022784430473"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"},"2.12.0":{"name":"tsparticles-engine","version":"2.12.0","description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","scripts":{"install":"node ./scripts/install.js"},"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"license":"MIT","bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/matteobruni"},{"type":"github","url":"https://github.com/sponsors/tsparticles"},{"type":"buymeacoffee","url":"https://www.buymeacoffee.com/matteobruni"}],"main":"cjs/index.js","module":"esm/index.js","jsdelivr":"tsparticles.engine.min.js","unpkg":"tsparticles.engine.min.js","types":"types/index.d.ts","sideEffects":false,"exports":{".":{"types":"./types/index.d.ts","import":"./esm/index.js","require":"./cjs/index.js","umd":"./umd/index.js","default":"./cjs/index.js"},"./package.json":"./package.json"},"gitHead":"0a2199b218ef917a62d22b76b37e6b0586d30915","_id":"tsparticles-engine@2.12.0","_nodeVersion":"18.16.0","_npmVersion":"lerna/7.1.4/node@v18.16.0+arm64 (darwin)","dist":{"integrity":"sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==","shasum":"4a52a8de4ab6085180abf27f4720f47caa1455fc","tarball":"https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz","fileCount":1053,"unpackedSize":1657121,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYUMx8HwiOFFH8PBZFXxOrHnb8CnhOmsFL4CyxRnKQiAiA2VREM3bWKm8VXQxmSKkuWR1dlTR3sNbTrqb5LP82fCg=="}]},"_npmUser":{"name":"matteobruni","email":"ar3s@icloud.com"},"directories":{},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsparticles-engine_2.12.0_1691107219905_0.6880247655803822"},"_hasShrinkwrap":false,"deprecated":"starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name"}},"time":{"created":"2021-03-12T09:03:35.872Z","2.0.0-alpha.4":"2021-03-12T09:03:36.217Z","modified":"2023-12-07T18:56:56.367Z","2.0.0-alpha.5":"2021-03-14T15:29:16.848Z","2.0.0-alpha.6":"2021-03-31T00:26:03.500Z","2.0.0-alpha.7":"2021-04-11T14:53:10.121Z","2.0.0-beta.0":"2021-10-06T00:24:54.395Z","2.0.0-beta.1":"2021-10-06T21:33:24.412Z","2.0.0-beta.2":"2021-12-04T12:33:03.444Z","2.0.0-beta.3":"2021-12-07T14:54:35.561Z","2.0.0-beta.4":"2022-01-30T02:46:26.386Z","2.0.0":"2022-02-15T00:40:07.888Z","2.0.1":"2022-02-15T16:06:35.754Z","2.0.2":"2022-02-21T08:33:47.955Z","2.0.3":"2022-03-11T15:52:13.658Z","2.0.4":"2022-04-06T13:07:32.487Z","2.0.5":"2022-04-14T09:38:25.790Z","2.0.6":"2022-04-16T22:25:08.266Z","2.1.0":"2022-06-18T23:28:53.814Z","2.1.1":"2022-07-01T08:03:23.606Z","2.1.2":"2022-07-01T10:19:15.904Z","2.1.3":"2022-07-01T11:30:30.771Z","2.1.4":"2022-07-28T09:25:47.651Z","2.2.0":"2022-08-11T08:56:53.277Z","2.2.1":"2022-08-12T13:23:11.027Z","2.2.2":"2022-08-16T12:13:39.078Z","2.2.3":"2022-08-21T22:18:07.875Z","2.2.4":"2022-08-26T12:39:43.696Z","2.3.0":"2022-09-11T20:32:07.320Z","2.3.1":"2022-09-13T05:51:35.632Z","2.3.2":"2022-09-21T22:41:18.210Z","2.3.3":"2022-09-30T16:19:41.835Z","2.4.0":"2022-10-31T09:43:30.389Z","2.5.0":"2022-11-03T00:00:24.097Z","2.5.1":"2022-11-07T14:02:23.088Z","2.5.2":"2022-11-07T14:25:15.227Z","2.6.0":"2022-12-06T00:22:21.746Z","2.7.0":"2022-12-23T10:55:46.017Z","2.7.1":"2022-12-25T22:45:56.227Z","2.8.0":"2023-01-18T09:40:17.914Z","2.9.0":"2023-02-10T12:00:09.226Z","2.9.1":"2023-02-11T22:50:17.644Z","2.9.2":"2023-02-12T12:55:27.206Z","2.9.3":"2023-02-12T18:46:08.432Z","2.10.0":"2023-06-03T01:23:21.790Z","2.10.1":"2023-06-04T12:15:35.829Z","2.11.0":"2023-07-12T23:33:07.925Z","2.11.1":"2023-07-24T23:30:28.694Z","2.12.0":"2023-08-04T00:00:20.084Z"},"maintainers":[{"name":"ar3s","email":"mbruni88@icloud.com"},{"name":"matteobruni","email":"ar3s@icloud.com"}],"description":"Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.","homepage":"https://particles.js.org","keywords":["front-end","frontend","tsparticles","particles.js","particlesjs","particles","particle","canvas","jsparticles","xparticles","particles-js","particles-bg","particles-bg-vue","particles-ts","particles.ts","react-particles-js","react-particles.js","react-particles","react","reactjs","vue-particles","ngx-particles","angular-particles","particleground","vue","vuejs","preact","preactjs","jquery","angularjs","angular","typescript","javascript","animation","web","html5","web-design","webdesign","css","html","css3","animated","background","confetti","canvas","fireworks","fireworks-js","confetti-js","confettijs","fireworksjs","canvas-confetti"],"repository":{"type":"git","url":"git+https://github.com/matteobruni/tsparticles.git","directory":"engine"},"author":{"name":"Matteo Bruni","email":"matteo.bruni@me.com"},"bugs":{"url":"https://github.com/matteobruni/tsparticles/issues"},"license":"MIT","readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# tsParticles - TypeScript Particles\n\n**A lightweight TypeScript library for creating particles. Dependency free (\\*), browser ready and compatible with\nReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**\n\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni?style=for-the-badge)](https://github.com/sponsors/matteobruni)\n[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/tsparticles?style=for-the-badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles-engine?style=for-the-badge)](https://cdnjs.com/libraries/tsparticles)\n[![npm](https://img.shields.io/npm/v/tsparticles-engine?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)\n[![npm](https://img.shields.io/npm/dm/tsparticles?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff?style=for-the-badge)](https://lerna.js.org/)\n[![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade)\n[![Rate this package](https://badges.openbase.com/js/rating/tsparticles.svg?style=openbase&token=A9jHQ1nkb6fnCndKM7O2w4hx3OD8PVCuqHtSpw8mMOg=)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/tsparticles)\n[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles)\n[![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)\n\n[![Discord](https://img.shields.io/discord/872061157379301416?label=discord&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/hACwv45Hme)\n[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)\n[![WhatsApp](https://particles.js.org/images/WhatsApp.png)](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c)\n[![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)\n[![Reddit](https://img.shields.io/reddit/subreddit-subscribers/tsParticles?style=for-the-badge)](https://www.reddit.com/r/tsParticles/)\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n[![Buy Me A Coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00\")](https://www.buymeacoffee.com/matteobruni)\n\n---\n\n## Table of Contents\n\n- [tsParticles - TypeScript Particles](#tsparticles---typescript-particles)\n  - [Table of Contents](#table-of-contents)\n  - [Do you want to use it on your website?](#do-you-want-to-use-it-on-your-website)\n  - [**_Library installation_**](#library-installation)\n    - [**_Hosting / CDN_**](#hosting--cdn)\n      - [jsDelivr](#jsdelivr)\n      - [cdnjs](#cdnjs)\n      - [unpkg](#unpkg)\n    - [**_npm_**](#npm)\n    - [**_yarn_**](#yarn)\n    - [**_pnpm_**](#pnpm)\n      - [Import and require](#import-and-require)\n    - [**_Usage_**](#usage)\n  - [Official components for some of the most used frameworks](#official-components-for-some-of-the-most-used-frameworks)\n    - [Angular](#angular)\n      - [`ng-particles`](#ng-particles)\n    - [Astro](#astro)\n      - [`astro-particles`](#astro-particles)\n    - [Ember.js](#emberjs)\n      - [`ember-tsparticles`](#ember-tsparticles)\n    - [Inferno](#inferno)\n      - [`inferno-particles`](#inferno-particles)\n    - [jQuery](#jquery)\n      - [`jquery-particles`](#jquery-particles)\n    - [Preact](#preact)\n      - [`preact-particles`](#preact-particles)\n    - [ReactJS](#reactjs)\n      - [`react-particles`](#react-particles)\n    - [RiotJS](#riotjs)\n      - [`riot-particles`](#riot-particles)\n    - [SolidJS](#solidjs)\n      - [`solid-particles`](#solid-particles)\n    - [Svelte](#svelte)\n      - [`svelte-particles`](#svelte-particles)\n    - [VueJS 2.x](#vuejs-2x)\n      - [`vue2-particles`](#vue2-particles)\n    - [VueJS 3.x](#vuejs-3x)\n      - [`vue3-particles`](#vue3-particles)\n    - [Web Components](#web-components)\n      - [`web-particles`](#web-particles)\n    - [WordPress](#wordpress)\n      - [`wordpress-particles`](#wordpress-particles)\n    - [Elementor](#elementor)\n  - [Presets](#presets)\n    - [Big Circles](#big-circles)\n    - [Bubbles](#bubbles)\n    - [Confetti](#confetti)\n    - [Fire](#fire)\n    - [Firefly](#firefly)\n    - [Fireworks](#fireworks)\n    - [Fountain](#fountain)\n    - [Links](#links)\n    - [Sea Anemone](#sea-anemone)\n    - [Snow](#snow)\n    - [Stars](#stars)\n    - [Triangles](#triangles)\n  - [Templates and Resources](#templates-and-resources)\n  - [**_Demo / Generator_**](#demo--generator)\n  - [**_Video Tutorials_**](#video-tutorials)\n    - [Characters as particles](#characters-as-particles)\n    - [Polygon mask](#polygon-mask)\n    - [Animated stars](#animated-stars)\n    - [Nyan cat flying on scrolling stars](#nyan-cat-flying-on-scrolling-stars)\n    - [Snow particles](#snow-particles)\n    - [Background Mask particles](#background-mask-particles)\n  - [**_Options_**](#options)\n  - [Want to see it in action and try it?](#want-to-see-it-in-action-and-try-it)\n  - [Migrating from Particles.js](#migrating-from-particlesjs)\n  - [Plugins/Customizations](#pluginscustomizations)\n  - [Dependency Graph](#dependency-graph)\n  - [Sponsors](#sponsors)\n    - [Huge thanks to JetBrains for the 2020-2022 Open Source Licenses!](#huge-thanks-to-jetbrains-for-the-2020-2022-open-source-licenses)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https://particles.js.org/docs/) 📖_\n\n**This library is available on two of the most popular CDNs and it's easy and ready to use, if you were using\nparticles.js\nit's even easier**.\n\nYou'll find the\ninstructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the\nlinks you need, and _don't be scared by **TypeScript**, it's just the source language_.\n\n**The output files are just JavaScript**. 🤩\n\nCDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.engine.min.js), and\nall\nfiles splitted for `import` syntax.\n\n**If you are interested** there are some _simple instructions_\njust [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## **_Library installation_**\n\n### **_Hosting / CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-confetti)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-fireworks)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-basic/badge)](https://www.jsdelivr.com/package/npm/tsparticles-basic)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-all/badge)](https://www.jsdelivr.com/package/npm/tsparticles-all)\n\n#### cdnjs\n\n[![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)\n\n#### unpkg\n\n<https://unpkg.com/tsparticles-confetti/> <https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-fireworks/> <https://unpkg.com/tsparticles-basic/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/> <https://unpkg.com/tsparticles-all/>\n\n---\n\n### **_npm_**\n\n_tsParticles Confetti_\n\n[![npm](https://img.shields.io/npm/v/tsparticles-confetti?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-confetti?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-confetti)\n\n_tsParticles Engine_\n\n[![npm](https://img.shields.io/npm/v/tsparticles-engine?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-engine) [![npmjs](https://img.shields.io/npm/dt/tsparticles-engine?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-engine)\n\n_tsParticles Fireworks_\n\n[![npm](https://img.shields.io/npm/v/tsparticles-fireworks?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-fireworks?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-fireworks)\n\n_tsParticles Basic_\n\n[![npm](https://img.shields.io/npm/v/tsparticles-basic?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-basic) [![npmjs](https://img.shields.io/npm/dt/tsparticles-basic?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-basic)\n\n_tsParticles Slim_\n\n[![npm](https://img.shields.io/npm/v/tsparticles-slim?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-slim) [![npmjs](https://img.shields.io/npm/dt/tsparticles-slim?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-slim)\n\n_tsParticles_\n\n[![npm](https://img.shields.io/npm/v/tsparticles?style=for-the-badge)](https://www.npmjs.com/package/tsparticles) [![npmjs](https://img.shields.io/npm/dt/tsparticles?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)\n\n_tsParticles All_\n\n[![npm](https://img.shields.io/npm/v/tsparticles-all?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-all) [![npmjs](https://img.shields.io/npm/dt/tsparticles-all?style=for-the-badge)](https://www.npmjs.com/package/tsparticles-all)\n\n```shell\nnpm install tsparticles-engine\n```\n\n### **_yarn_**\n\n```shell\nyarn add tsparticles-engine\n```\n\n### **_pnpm_**\n\n```shell\npnpm install tsparticles-engine\n```\n\n#### Import and require\n\n```javascript\nconst tsParticles = require(\"tsparticles-engine\");\n\n// or\n\nimport { tsParticles } from \"tsparticles-engine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script in the page using the `<script>` tag.\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)\n[![tsParticles Confetti demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://confetti.js.org)\n\n**index.html**\n\n```html\n<div id=\"tsparticles\"></div>\n\n<script src=\"tsparticles.engine.min.js\"></script>\n```\n\n**app.js**\n\n```javascript\n// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected\n/* tsParticles.load(@params); */\n\ntsParticles\n  .load({\n    id: \"tsparticles\",\n    url: \"presets/default.json\",\n  })\n  .then((container) => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch((error) => {\n    console.error(error);\n  });\n\n//or\n\ntsParticles.load({\n  id: \"tsparticles\",\n  options: {\n    /* options here */\n  },\n});\n\n//or\n\ntsParticles.load({\n  id: \"tsparticles\",\n  options: [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n});\n//random object\n\ntsParticles.load({\n  id: \"tsparticles\",\n  options: [\n    {\n      /* options here */\n    },\n    {\n      /* other options here */\n    },\n  ],\n  index: 1,\n}); //the second one\n// Important! If the index is not in range 0...<array.length, the index will be ignored.\n\n// after initialization this can be used.\n\n/* tsParticles.setOnClickHandler(@callback); */\n\n/* this will be fired from all particles loaded */\n\ntsParticles.setOnClickHandler((event, particles) => {\n  /* custom on click handler */\n});\n\n// now you can control the animations too, it's possible to pause and resume the animations\n// these methods don't change the config so you're safe with all your configurations\n// domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.domItem(0);\n\n// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame\nparticles.play();\n\n// pause will stop the animations\nparticles.pause();\n```\n\n---\n\n## Official components for some of the most used frameworks\n\n### Angular\n\n#### `ng-particles`\n\n[![npm](https://img.shields.io/npm/v/ng-particles?style=for-the-badge)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles?style=for-the-badge)](https://www.npmjs.com/package/ng-particles)\n\nInstructions available [here](https://github.com/tsparticles/angular/#readme)\n\n### Astro\n\n#### `astro-particles`\n\n[![npm](https://img.shields.io/npm/v/astro-particles?style=for-the-badge)](https://www.npmjs.com/package/astro-particles) [![npm](https://img.shields.io/npm/dm/astro-particles?style=for-the-badge)](https://www.npmjs.com/package/astro-particles)\n\nInstructions available [here](https://github.com/tsparticles/astro/#readme)\n\n### Ember.js\n\n#### `ember-tsparticles`\n\n[![npm](https://img.shields.io/npm/v/ember-tsparticles?style=for-the-badge)](https://www.npmjs.com/package/ember-tsparticles) [![npm](https://img.shields.io/npm/dm/ember-tsparticles?style=for-the-badge)](https://www.npmjs.com/package/ember-tsparticles)\n\nInstructions available [here](https://github.com/tsparticles/ember/#readme)\n\n### Inferno\n\n#### `inferno-particles`\n\n[![npm](https://img.shields.io/npm/v/inferno-particles?style=for-the-badge)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles?style=for-the-badge)](https://www.npmjs.com/package/inferno-particles)\n\nInstructions available [here](https://github.com/tsparticles/inferno/#readme)\n\n### jQuery\n\n#### `jquery-particles`\n\n[![npm](https://img.shields.io/npm/v/jquery-particles?style=for-the-badge)](https://www.npmjs.com/package/jquery-particles) [![npm](https://img.shields.io/npm/dm/jquery-particles?style=for-the-badge)](https://www.npmjs.com/package/jquery-particles)\n\nInstructions available [here](https://github.com/tsparticles/jquery/#readme)\n\n### Preact\n\n#### `preact-particles`\n\n[![npm](https://img.shields.io/npm/v/preact-particles?style=for-the-badge)](https://www.npmjs.com/package/preact-particles) [![npm](https://img.shields.io/npm/dm/preact-particles?style=for-the-badge)](https://www.npmjs.com/package/preact-particles)\n\nInstructions available [here](https://github.com/tsparticles/preact/#readme)\n\n### ReactJS\n\n#### `react-particles`\n\n[![npm](https://img.shields.io/npm/v/react-particles?style=for-the-badge)](https://www.npmjs.com/package/react-particles) [![npm](https://img.shields.io/npm/dm/react-particles?style=for-the-badge)](https://www.npmjs.com/package/react-particles)\n\nInstructions available [here](https://github.com/tsparticles/react/#readme)\n\n### RiotJS\n\n#### `riot-particles`\n\n[![npm](https://img.shields.io/npm/v/riot-particles?style=for-the-badge)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles?style=for-the-badge)](https://www.npmjs.com/package/riot-particles)\n\nYou can find the instructions [here](https://github.com/tsparticles/riot/#readme)\n\n### SolidJS\n\n#### `solid-particles`\n\n[![npm](https://img.shields.io/npm/v/solid-particles?style=for-the-badge)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles?style=for-the-badge)](https://www.npmjs.com/package/solid-particles)\n\nYou can find the instructions [here](https://github.com/tsparticles/solid/#readme)\n\n### Svelte\n\n#### `svelte-particles`\n\n[![npm](https://img.shields.io/npm/v/svelte-particles?style=for-the-badge)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles?style=for-the-badge)](https://www.npmjs.com/package/svelte-particles)\n\nInstructions available [here](https://github.com/tsparticles/svelte/#readme)\n\n### VueJS 2.x\n\n#### `vue2-particles`\n\n[![npm](https://img.shields.io/npm/v/vue2-particles?style=for-the-badge)](https://www.npmjs.com/package/vue2-particles) [![npm](https://img.shields.io/npm/dm/vue2-particles?style=for-the-badge)](https://www.npmjs.com/package/vue2-particles)\n\nInstructions available [here](https://github.com/tsparticles/vue2/#readme)\n\n### VueJS 3.x\n\n#### `vue3-particles`\n\n[![npm](https://img.shields.io/npm/v/vue3-particles?style=for-the-badge)](https://www.npmjs.com/package/vue3-particles) [![npm](https://img.shields.io/npm/dm/vue3-particles?style=for-the-badge)](https://www.npmjs.com/package/vue3-particles)\n\nInstruction available [here](https://github.com/tsparticles/vue3/#readme)\n\n### Web Components\n\n#### `web-particles`\n\n[![npm](https://img.shields.io/npm/v/web-particles?style=for-the-badge)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles?style=for-the-badge)](https://www.npmjs.com/package/web-particles)\n\nYou can find the instructions [here](https://github.com/tsparticles/webcomponents/#readme)\n\n### WordPress\n\n#### `wordpress-particles`\n\n[![npm](https://img.shields.io/npm/v/wordpress-particles?style=for-the-badge)](https://www.npmjs.com/package/wordpress-particles) [![npm](https://img.shields.io/npm/dm/wordpress-particles?style=for-the-badge)](https://www.npmjs.com/package/wordpress-particles) [![WordPress Plugin Downloads](https://img.shields.io/wordpress/plugin/dw/tsparticles-block?style=for-the-badge)](https://wordpress.org/plugins/tsparticles-block/) [![WordPress Plugin Active Installs](https://img.shields.io/wordpress/plugin/installs/tsparticles-block?style=for-the-badge)](https://wordpress.org/plugins/tsparticles-block/)\n\nThe plugin page hosted on WordPress.org can be\nfound [here](https://wordpress.org/plugins/tsparticles-block/#description)\n\n### Elementor\n\nActually, an official tsParticles plugin isn't existing, but I have a collaboration with\nthe `Premium Addons for Elementor` plugin collection.\n\n<div style=\"float: left; margin-right: 10px;\">\n    <img width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https://particles.js.org/images/premium-addons-wordpress-plugin.png\" />\n</div>\n<div>\n    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">Check It Now</a>.<br />\n    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href=\"https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/\" target=\"_blank\">See a Live Example</a>.\n</div>\n<div style=\"clear: both;\"></div>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in [this repository](https://github.com/tsparticles/presets), and they also have a bundle file that contains everything\nneeded to run.\n\n### Big Circles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bigCircles#readme)\n\n### Bubbles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bubbles#readme)\n\n### Confetti\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confetti#readme)\n\n### Fire\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)\n\nThis preset loads a faded red to a black background with particles colored like fire and ash sparks.\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fire#readme)\n\n### Firefly\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/firefly#readme)\n\n### Fireworks\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fireworks#readme)\n\n### Fountain\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fountain#readme)\n\n### Links\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/links#readme)\n\n### Sea Anemone\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/seaAnemone#readme)\n\n### Snow\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/snow#readme)\n\n### Stars\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/stars#readme)\n\n### Triangles\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge?style=for-the-badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)\n\n[![demo](https://github.com/tsparticles/presets/raw/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)\n\nYou can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/triangles#readme)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are\ncreated for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_, and other frameworks.\n\nThe templates will vary, new ones can be created or older ones updated with the latest features or changed to a better\nstyle. Check them out once in a while.\n\nIf you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be\ncredited as the template author!\n\n<https://github.com/tsparticles/templates>\n\n---\n\n## **_Demo / Generator_**\n\n<https://particles.js.org/samples>\n\n[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.1)](https://particles.js.org/samples)\n\n---\n\n## **_Video Tutorials_**\n\nYou can find all video tutorials on the website here: <https://particles.js.org/video.html>\n\n_More videos are coming soon! Check every day if there are some new contents._\n\n---\n\n### Characters as particles\n\n[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https://github.com/tsparticles/website/tree/main/presets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)\n📖\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can check out\nmy [profile](https://codepen.io/matteobruni)\n\nOtherwise, there's the demo page link below.\n\n[![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/)\n\nWant to see even more demos? Clone the repository on your computer and follow these instructions\n\n```shell\n$ pnpm i\n$ pnpm run build\n$ cd demo/vanilla\n$ pnpm start\n```\n\n**Boom! 💥** <http://localhost:3000> and you can check out other demos.\n\n_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.\n\n---\n\n## Migrating from Particles.js\n\n**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.\n\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npm](https://img.shields.io/npm/dm/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js)\n\nSeriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're\nready** 🧙!\n\nYou can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)\n\n_Below you can find all the information you need to install tsParticles and its new syntax._\n\n---\n\n## Plugins/Customizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._\n\n---\n\n## Dependency Graph\n\n```mermaid\nflowchart LR\n\nsubgraph b [Bundles]\nbb[tsParticles Basic] --> bs[tsParticles Slim]\nbp[Particles.js compatibility bundle] --> bs\nbs --> bf[tsParticles]\nend\n\ne[tsParticles Engine] --> b\n\niea & iebo & iebu & iec & ieg & iepa & iepu & ierem & ierep & ies --> bs\nipa & ipc & ipl --> bs\nmb --> bb\nmp --> bs\npleq --> bs\nsci --> bb\nsi & sl & spo & ssq & sst & st --> bs\nuc & uop & uou & usi --> bb\nul & urot & ust --> bs\n\niet --> bf\npla & plem --> bf\nurol & uti & utw & uw --> bf\n\nsubgraph i [Interactions]\n\nsubgraph ie [Externals]\niea[Attract]\niebo[Bounce]\niebu[Bubble]\niec[Connect]\nieg[Grab]\niepa[Pause]\niepu[Push]\nierem[Remove]\nierep[Repulse]\nies[Slow]\niet[Trail]\nend\n\nil[Light]\n\nsubgraph ip [Particles]\nipa[Attract]\nipc[Collisions]\nipl[Links]\nipr[Repulse]\nend\n\nend\n\ni --> ie\ni --> ip\n\ne --> i\n\nsubgraph m [Movers]\nmb[Base]\nmp[Parallax]\nend\n\ne --> m\n\nsubgraph pa [Paths]\npac[Curves]\npapn[Perlin Noise]\npap[Polygon]\npasn[Simplex Noise]\npasvg[SVG]\nend\n\ne --> pa\n\nsubgraph pl [Plugins]\npla[Absorbers]\nplcm[Canvas Mask]\nplem[Emitters]\nplh[HSV Color]\npli[Infection]\nplm[Motion]\nplp[Polygon Mask]\npls[Sounds]\n\nsubgraph plea [Easings]\npleb[Back]\npleci[Circ]\nplecu[Cubic]\nplee[Expo]\npleq[Quad]\nple4[Quart]\nple5[Quint]\nples[Sine]\nend\n\nsubgraph plex [Exports]\nplexi[Image]\nplexj[JSON]\nplexv[Video]\nend\n\nend\n\npl --> plea\n\ne --> pl\n\nsubgraph s [Shapes]\nsa[Arrow]\nsb[Bubble]\nsci[Circle]\nscog[Cog]\nsh[Heart]\nsi[Image]\nsl[Line]\nsmt[Multiline Text]\nspa[Path]\nspo[Polygon]\nsrp[Rounded Polygon]\nsrr[Rounded Rectangle]\nssp[Spiral]\nssq[Square]\nsst[Star]\nst[Text]\nend\n\ne --> s\n\nsubgraph u [Updaters]\nuc[Color]\nud[Destroy]\nug[Gradient]\nul[Life]\nuop[Opacity]\nuor[Orbit]\nuou[Out Modes]\nurol[Roll]\nurot[Rotate]\nusi[Size]\nust[Stroke Color]\nuti[Tilt]\nutw[Twinkle]\nuw[Wobble]\nend\n\ne --> u\n```\n\n---\n\n<p>  \n    <a href=\"https://www.jetbrains.com/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n    <a href=\"https://www.jetbrains.com/webstorm/?from=tsParticles\">  \n        <img src=\"https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png\" height=\"150\" alt=\"JetBrains\" />  \n    </a>  \n</p>\n\n## Sponsors\n\n### ScribbleMaps\n\nHuge thanks to [ScribbleMaps](https://www.scribblemaps.com/) for their support on this project.\n\n### JetBrains\n\nHuge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2022 Open Source Licenses!\n\n[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.\n","readmeFilename":"README.md"}