[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10041":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":15,"starSnapshotCount":15,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},10041,"tsparticles","tsparticles\u002Ftsparticles","tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.","https:\u002F\u002Fparticles.js.org",null,"TypeScript",8880,946,114,7,0,4,14,53,13,85.23,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,5,42,43,44],"2d","angular","animations","bg","canvas","confetti","fireworks","hacktoberfest","html","javascript","js","npm","particles","react","svelte","ts","typescript","vue","web","2026-06-12 04:00:48","[![banner](https:\u002F\u002Fparticles.js.org\u002Fimages\u002Fbanner3.png)](https:\u002F\u002Fparticles.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:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fsponsors\u002Fmatteobruni?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fmatteobruni)\n[![jsDelivr hits (npm)](https:\u002F\u002Fimg.shields.io\u002Fjsdelivr\u002Fnpm\u002Fhm\u002Ftsparticles?style=for-the-badge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Ftsparticles)\n[![Cdnjs](https:\u002F\u002Fimg.shields.io\u002Fcdnjs\u002Fv\u002F@tsparticles\u002Fengine?style=for-the-badge)](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Ftsparticles)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fengine?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftsparticles)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Ftsparticles?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftsparticles)\n[![lerna](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fmaintained%20with-lerna-cc00ff?style=for-the-badge)](https:\u002F\u002Flerna.js.org\u002F)\n[![CodeFactor](https:\u002F\u002Fwww.codefactor.io\u002Frepository\u002Fgithub\u002Ftsparticles\u002Ftsparticles\u002Fbadge)](https:\u002F\u002Fwww.codefactor.io\u002Frepository\u002Fgithub\u002Ftsparticles\u002Ftsparticles)\n[![Codacy Badge](https:\u002F\u002Fapi.codacy.com\u002Fproject\u002Fbadge\u002FGrade\u002Fb983aaf3461a4c48b1e2eecce1ff1d74)](https:\u002F\u002Fwww.codacy.com\u002Fmanual\u002Far3s\u002Ftsparticles?utm_source=github.com&utm_medium=referral&utm_content=tsparticles\u002Ftsparticles&utm_campaign=Badge_Grade)\n[![Rate this package](https:\u002F\u002Fbadges.openbase.com\u002Fjs\u002Frating\u002Ftsparticles.svg?style=openbase&token=A9jHQ1nkb6fnCndKM7O2w4hx3OD8PVCuqHtSpw8mMOg=)](https:\u002F\u002Fopenbase.com\u002Fjs\u002Ftsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js\u002Ftsparticles)\n[![Gitpod Ready-to-Code](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGitpod-ready--to--code-blue?logo=gitpod)](https:\u002F\u002Fgitpod.io\u002F#https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles)\n[![Run on Repl.it](https:\u002F\u002Frepl.it\u002Fbadge\u002Fgithub\u002Ftsparticles\u002Ftsparticles)](https:\u002F\u002Frepl.it\u002Fgithub\u002Ftsparticles\u002Ftsparticles)\n\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F872061157379301416?label=discord&logo=discord&logoColor=white&style=for-the-badge)](https:\u002F\u002Fdiscord.gg\u002FhACwv45Hme)\n[![Telegram](https:\u002F\u002Fparticles.js.org\u002Fimages\u002Ftelegram.png)](https:\u002F\u002Ft.me\u002Ftsparticles)\n[![Reddit](https:\u002F\u002Fimg.shields.io\u002Freddit\u002Fsubreddit-subscribers\u002FtsParticles?style=for-the-badge)](https:\u002F\u002Fwww.reddit.com\u002Fr\u002FtsParticles\u002F)\n\n[![tsParticles Product Hunt](https:\u002F\u002Fapi.producthunt.com\u002Fwidgets\u002Fembed-image\u002Fv1\u002Ffeatured.svg?post_id=186113&theme=light)](https:\u002F\u002Fwww.producthunt.com\u002Fposts\u002Ftsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles\")\n[![Buy Me A Coffee](https:\u002F\u002Fimg.buymeacoffee.com\u002Fbutton-api\u002F?text=Buy%20me%20a%20beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00\")](https:\u002F\u002Fwww.buymeacoffee.com\u002Fmatteobruni)\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  - [Start here in 2 minutes](#start-here-in-2-minutes)\n  - [**_Library installation_**](#library-installation)\n    - [**_Hosting \u002F 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      - [`@tsparticles\u002Fangular`](#tsparticlesangular)\n    - [Astro](#astro)\n      - [`@tsparticles\u002Fastro`](#tsparticlesastro)\n    - [Ember.js](#emberjs)\n      - [`@tsparticles\u002Fember`](#tsparticlesember)\n    - [Inferno](#inferno)\n      - [`@tsparticles\u002Finferno`](#tsparticlesinferno)\n    - [jQuery](#jquery)\n      - [`@tsparticles\u002Fjquery`](#tsparticlesjquery)\n    - [Preact](#preact)\n      - [`@tsparticles\u002Fpreact`](#tsparticlespreact)\n    - [Qwik](#qwik)\n      - [`@tsparticles\u002Fqwik`](#tsparticlesqwik)\n    - [ReactJS](#reactjs)\n      - [`@tsparticles\u002Fnextjs`](#tsparticlesnextjs)\n      - [`@tsparticles\u002Freact`](#tsparticlesreact)\n    - [RiotJS](#riotjs)\n      - [`@tsparticles\u002Friot`](#tsparticlesriot)\n    - [SolidJS](#solidjs)\n      - [`@tsparticles\u002Fsolid`](#tsparticlessolid)\n    - [Svelte](#svelte)\n      - [`@tsparticles\u002Fsvelte`](#tsparticlessvelte)\n    - [VueJS 2.x](#vuejs-2x)\n      - [`@tsparticles\u002Fnuxt2`](#tsparticlesnuxt2)\n      - [`@tsparticles\u002Fvue2`](#tsparticlesvue2)\n    - [VueJS 3.x](#vuejs-3x)\n      - [`@tsparticles\u002Fnuxt3`](#tsparticlesnuxt3)\n      - [`@tsparticles\u002Fnuxt4`](#tsparticlesnuxt4)\n      - [`@tsparticles\u002Fvue3`](#tsparticlesvue3)\n    - [Web Components](#web-components)\n      - [`@tsparticles\u002Fwebcomponents`](#tsparticleswebcomponents)\n    - [WordPress](#wordpress)\n      - [`@tsparticles\u002Fwordpress`](#tsparticleswordpress)\n    - [Elementor](#elementor)\n  - [Presets](#presets)\n    - [Ambient](#ambient)\n    - [Big Circles](#big-circles)\n    - [Bubbles](#bubbles)\n    - [Confetti](#confetti)\n    - [Confetti Cannon](#confetti-cannon)\n    - [Confetti Explosions](#confetti-explosions)\n    - [Confetti Falling](#confetti-falling)\n    - [Confetti Parade](#confetti-parade)\n    - [Fire](#fire)\n    - [Firefly](#firefly)\n    - [Fireworks](#fireworks)\n    - [Fountain](#fountain)\n    - [Hyperspace](#hyperspace)\n    - [Links](#links)\n    - [Sea Anemone](#sea-anemone)\n    - [Snow](#snow)\n    - [Squares](#squares)\n    - [Stars](#stars)\n    - [Triangles](#triangles)\n  - [Templates and Resources](#templates-and-resources)\n  - [**_Demo \u002F 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\u002FCustomizations](#pluginscustomizations)\n  - [Dependency Graph](#dependency-graph)\n\n---\n\n## Do you want to use it on your website?\n\n_Documentation and Development references [here](https:\u002F\u002Fparticles.js.org\u002Fdocs\u002F) 📖_\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:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002FREADME.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:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002FREADME.md#library-installation) to guide you to\nmigrate from the old particles.js library.\n\n## Start here in 2 minutes\n\nIf you are new to tsParticles, this path is usually the fastest:\n\n1. Install `@tsparticles\u002Fengine` and `@tsparticles\u002Fslim`\n2. Load the slim bundle once\n3. Start with a small config and iterate\n\n```javascript\nimport { tsParticles } from \"@tsparticles\u002Fengine\";\nimport { loadSlim } from \"@tsparticles\u002Fslim\";\n\nawait loadSlim(tsParticles);\n\nawait tsParticles.load({\n  id: \"tsparticles\",\n  options: {\n    background: {\n      color: \"#0d1117\",\n    },\n    particles: {\n      move: {\n        enable: true,\n      },\n      number: {\n        value: 60,\n      },\n    },\n  },\n});\n```\n\nUseful docs for the next step:\n\n- Docs home: \u003Chttps:\u002F\u002Fparticles.js.org\u002Fdocs\u002F>\n- Options guide: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FOptions.md>\n- Migration guide: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FpjsMigration.md>\n- Presets catalog: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets>\n\n## Quick checklist\n\n- Install `@tsparticles\u002Fengine` and one bundle (`@tsparticles\u002Fslim` is the common default)\n- Load the bundle before calling `tsParticles.load(...)`\n- Start from a small config, then extend incrementally\n\n## Choose your quick-start path\n\n- **I want fewer dependencies**: use `@tsparticles\u002Fengine` + only needed feature packages\n- **I want the easiest default**: use `@tsparticles\u002Fslim`\n- **I need everything enabled**: use `@tsparticles\u002Fall`\n\n## Common pitfalls\n\n- Loading options that require plugins before loading those plugin packages\n- Starting with very high particle counts before checking FPS\n- Mixing legacy snake_case keys with modern camelCase options\n\n## Related docs\n\n- Main docs: \u003Chttps:\u002F\u002Fparticles.js.org\u002Fdocs\u002F>\n- Root options guide: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FOptions.md>\n- Migration guide: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FpjsMigration.md>\n\n## **_Library installation_**\n\n### **_Hosting \u002F CDN_**\n\n**_Please use these hosts or your own to load tsParticles on your projects_**\n\n#### jsDelivr\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fconfetti\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fconfetti)\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fengine\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fengine)\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Ffireworks\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Ffireworks)\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fbasic\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fbasic)\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fslim\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fslim)\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002Ftsparticles\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Ftsparticles)\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fall\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fall)\n\n#### cdnjs\n\n[![Cdnjs](https:\u002F\u002Fimg.shields.io\u002Fcdnjs\u002Fv\u002Ftsparticles)](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Ftsparticles)\n\n#### unpkg\n\n\u003Chttps:\u002F\u002Funpkg.com\u002F@tsparticles\u002Fconfetti\u002F> \u003Chttps:\u002F\u002Funpkg.com\u002F@tsparticles\u002Fengine\u002F> \u003Chttps:\u002F\u002Funpkg.com\u002F@tsparticles\u002Ffireworks\u002F> \u003Chttps:\u002F\u002Funpkg.com\u002F@tsparticles\u002Fbasic\u002F> \u003Chttps:\u002F\u002Funpkg.com\u002F@tsparticles\u002Fslim\u002F> \u003Chttps:\u002F\u002Funpkg.com\u002Ftsparticles\u002F> \u003Chttps:\u002F\u002Funpkg.com\u002F@tsparticles\u002Fall\u002F>\n\n---\n\n### **_npm_**\n\n_tsParticles Confetti_\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fconfetti?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fconfetti) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fconfetti?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fconfetti)\n\n_tsParticles Engine_\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fengine?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fengine) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fengine?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fengine)\n\n_tsParticles Fireworks_\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Ffireworks?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Ffireworks) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Ffireworks?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Ffireworks)\n\n_tsParticles Basic_\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fbasic?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fbasic) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fbasic?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fbasic)\n\n_tsParticles Slim_\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fslim?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fslim) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fslim?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fslim)\n\n_tsParticles_\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Ftsparticles?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftsparticles) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Ftsparticles?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftsparticles)\n\n_tsParticles All_\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fall?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fall) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fall?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fall)\n\n```shell\nnpm install @tsparticles\u002Fengine\n```\n\n### **_yarn_**\n\n```shell\nyarn add @tsparticles\u002Fengine\n```\n\n### **_pnpm_**\n\n```shell\npnpm install @tsparticles\u002Fengine\n```\n\n#### Import and require\n\n```javascript\nconst tsParticles = require(\"@tsparticles\u002Fengine\");\n\n\u002F\u002F or\n\nimport { tsParticles } from \"@tsparticles\u002Fengine\";\n```\n\nThe imported `tsParticles` is the same instance you have when including the script in the page using the `\u003Cscript>` tag.\n\n---\n\n### **_Usage_**\n\nLoad tsParticles and configure the particles:\n\n[![tsParticles demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FftHwBpp3b0qNyCXRuu\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org)\n[![tsParticles Confetti demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FftHwBpp3b0qNyCXRuu\u002Fgiphy.gif)](https:\u002F\u002Fconfetti.js.org)\n\n**index.html**\n\n```html\n\u003Cdiv id=\"tsparticles\">\u003C\u002Fdiv>\n\n\u003Cscript src=\"tsparticles.engine.min.js\">\u003C\u002Fscript>\n```\n\n**app.js**\n\n```javascript\n\u002F\u002F @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\u002F* tsParticles.load(@params); *\u002F\n\ntsParticles\n  .load({\n    id: \"tsparticles\",\n    url: \"presets\u002Fdefault.json\",\n  })\n  .then(container => {\n    console.log(\"callback - tsparticles config loaded\");\n  })\n  .catch(error => {\n    console.error(error);\n  });\n\n\u002F\u002For\n\ntsParticles.load({\n  id: \"tsparticles\",\n  options: {\n    \u002F* options here *\u002F\n  },\n});\n\n\u002F\u002For\n\ntsParticles.load({\n  id: \"tsparticles\",\n  options: [\n    {\n      \u002F* options here *\u002F\n    },\n    {\n      \u002F* other options here *\u002F\n    },\n  ],\n});\n\u002F\u002Frandom object\n\ntsParticles.load({\n  id: \"tsparticles\",\n  options: [\n    {\n      \u002F* options here *\u002F\n    },\n    {\n      \u002F* other options here *\u002F\n    },\n  ],\n  index: 1,\n}); \u002F\u002Fthe second one\n\u002F\u002F Important! If the index is not in range 0...\u003Carray.length, the index will be ignored.\n\n\u002F\u002F after initialization this can be used.\n\n\u002F* tsParticles.setOnClickHandler(@callback); *\u002F\n\n\u002F* this will be fired from all particles loaded *\u002F\n\ntsParticles.setOnClickHandler((event, particles) => {\n  \u002F* custom on click handler *\u002F\n});\n\n\u002F\u002F now you can control the animations too, it's possible to pause and resume the animations\n\u002F\u002F these methods don't change the config so you're safe with all your configurations\n\u002F\u002F domItem(0) returns the first tsParticles instance loaded in the dom\nconst particles = tsParticles.item(0);\n\n\u002F\u002F 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\u002F\u002F 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#### `@tsparticles\u002Fangular`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fangular?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fangular) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fangular?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fangular)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fangular#readme)\n\n### Astro\n\n#### `@tsparticles\u002Fastro`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fastro?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fastro) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fastro?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fastro)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fastro#readme)\n\n### Ember.js\n\n#### `@tsparticles\u002Fember`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fember?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fember) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fember?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fember)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fember#readme)\n\n### Inferno\n\n#### `@tsparticles\u002Finferno`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Finferno?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Finferno) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Finferno?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Finferno)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Finferno#readme)\n\n### jQuery\n\n#### `@tsparticles\u002Fjquery`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fjquery?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fjquery) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fjquery?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fjquery)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fjquery#readme)\n\n### Preact\n\n#### `@tsparticles\u002Fpreact`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fpreact?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreact) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fpreact?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreact)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fpreact#readme)\n\n### Qwik\n\n#### `@tsparticles\u002Fqwik`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fqwik?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fqwik) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fqwik?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fqwik)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fqwik#readme)\n\n### ReactJS\n\n#### `@tsparticles\u002Fnextjs`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fnextjs?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnextjs) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fnextjs?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnextjs)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fnextjs#readme)\n\n#### `@tsparticles\u002Freact`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Freact?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Freact) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Freact?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Freact)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Freact#readme)\n\n### RiotJS\n\n#### `@tsparticles\u002Friot`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Friot?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Friot) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Friot?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Friot)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Friot#readme)\n\n### SolidJS\n\n#### `@tsparticles\u002Fsolid`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fsolid?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fsolid) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fsolid?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fsolid)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fsolid#readme)\n\n### Svelte\n\n#### `@tsparticles\u002Fsvelte`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fsvelte?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fsvelte) [![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fsvelte?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fsvelte)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fsvelte#readme)\n\n### VueJS 2.x\n\n#### `@tsparticles\u002Fnuxt2`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fnuxt2?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnuxt2) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fnuxt2?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnuxt2)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fnuxt2#readme)\n\n#### `@tsparticles\u002Fvue2`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fvue2?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fvue2) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fvue2?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fvue2)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fvue2#readme)\n\n### VueJS 3.x\n\n#### `@tsparticles\u002Fnuxt3`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fnuxt3?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnuxt3) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fnuxt3?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnuxt3)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fnuxt3#readme)\n\n#### `@tsparticles\u002Fnuxt4`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fnuxt4?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnuxt4) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fnuxt4?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fnuxt4)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fnuxt4#readme)\n\n#### `@tsparticles\u002Fvue3`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fvue3?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fvue3) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fvue3?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fvue3)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fvue3#readme)\n\n### Web Components\n\n#### `@tsparticles\u002Fwebcomponents`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fwebcomponents?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fwebcomponents) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fwebcomponents?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fwebcomponents)\n\nInstructions available [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Ftree\u002Fmain\u002Fwrappers\u002Fwebcomponents#readme)\n\n### WordPress\n\n#### `@tsparticles\u002Fwordpress`\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@tsparticles\u002Fwordpress?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fwordpress) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fwordpress?style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fwordpress) [![WordPress Plugin Downloads](https:\u002F\u002Fimg.shields.io\u002Fwordpress\u002Fplugin\u002Fdw\u002F@tsparticles\u002Fblock?style=for-the-badge)](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ftsparticles-block\u002F) [![WordPress Plugin Active Installs](https:\u002F\u002Fimg.shields.io\u002Fwordpress\u002Fplugin\u002Finstalls\u002Ftsparticles-block?style=for-the-badge)](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ftsparticles-block\u002F)\n\nThe plugin page hosted on WordPress.org can be\nfound [here](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ftsparticles-block\u002F#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\u003Cdiv style=\"float: left; margin-right: 10px;\">\n    \u003Cimg width=\"64\" alt=\"Premium Addons for Elementor\" src=\"https:\u002F\u002Fparticles.js.org\u002Fimages\u002Fpremium-addons-wordpress-plugin.png\" \u002F>\n\u003C\u002Fdiv>\n\u003Cdiv>\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. \u003Ca href=\"https:\u002F\u002Fpremiumaddons.com\u002Fparticles-section-addon-for-elementor-page-builder\u002F\" target=\"_blank\">Check It Now\u003C\u002Fa>.\u003Cbr \u002F>\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. \u003Ca href=\"https:\u002F\u002Fpremiumaddons.com\u002Fparticles-section-addon-for-elementor-page-builder\u002F\" target=\"_blank\">See a Live Example\u003C\u002Fa>.\n\u003C\u002Fdiv>\n\u003Cdiv style=\"clear: both;\">\u003C\u002Fdiv>\n\n---\n\n## Presets\n\nThere are some presets ready to be used in [this repository](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets), and they also have a bundle file that contains everything\nneeded to run.\n\n### Ambient\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-ambient\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-ambient) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-ambient.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-ambient) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-ambient)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-ambient)\n\nThis preset loads ambient circles on a dark background.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Fambient\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Fambient)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Fambient#readme)\n\n### Big Circles\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-big-circles\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-big-circles) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-big-circles.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-big-circles) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-big-circles)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-big-circles)\n\nThis preset loads big colored circles moving upwards on a white background.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002FbigCircles\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002FbigCircles)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002FbigCircles#readme)\n\n### Bubbles\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-bubbles\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Ftsparticles) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-bubbles.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-bubbles) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-bubbles)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-bubbles)\n\nThis preset loads colored bubbles coming from the bottom of the screen on a white background.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Fbubbles\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Fbubbles)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Fbubbles#readme)\n\n### Confetti\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-confetti.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-confetti)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti)\n\nThis preset loads white and red confetti launched from the screen center on a transparent background.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Fconfetti\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Fconfetti)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Fconfetti#readme)\n\n### Confetti Cannon\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-cannon\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-cannon) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-confetti-cannon.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-cannon) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-confetti-cannon)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-cannon)\n\nThis preset loads confetti launched from a draggable cannon.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002FconfettiCannon\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002FconfettiCannon)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002FconfettiCannon#readme)\n\n### Confetti Explosions\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-explosions\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-explosions) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-confetti-explosions.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-explosions) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-confetti-explosions)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-explosions)\n\nThis preset loads confetti bursts at multiple points on the screen.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002FconfettiExplosions\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002FconfettiExplosions)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002FconfettiExplosions#readme)\n\n### Confetti Falling\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-falling\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-falling) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-confetti-falling.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-falling) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-confetti-falling)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-falling)\n\nThis preset loads slowly falling confetti particles.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002FconfettiFalling\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002FconfettiFalling)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002FconfettiFalling#readme)\n\n### Confetti Parade\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-parade\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-confetti-parade) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-confetti-parade.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-parade) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-confetti-parade)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-confetti-parade)\n\nThis preset loads confetti moving horizontally across the screen like a parade.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002FconfettiParade\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002FconfettiParade)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002FconfettiParade#readme)\n\n### Fire\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-fire\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-fire) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-fire.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-fire) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-fire)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-fire)\n\nThis preset loads a faded red to a black background with particles colored like fire and ash sparks.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Ffire\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Ffire)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Ffire#readme)\n\n### Firefly\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-firefly\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-firefly) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-firefly.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-firefly) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-firefly)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-firefly)\n\nThis preset loads a mouse trail made with small fading particles like little fireflies.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Ffirefly\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Ffirefly)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Ffirefly#readme)\n\n### Fireworks\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-fireworks\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-fireworks) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-fireworks.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-fireworks) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-fireworks)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-fireworks)\n\nThis preset loads a beautiful fireworks effect.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Ffireworks\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Ffireworks)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Ffireworks#readme)\n\n### Hyperspace\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-hyperspace\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-hyperspace) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-hyperspace.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-hyperspace) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-hyperspace)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-hyperspace)\n\nThis preset loads a hyperspace tunnel effect with fast-moving particles.\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Fhyperspace\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Fhyperspace)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Fhyperspace#readme)\n\n### Fountain\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-fountain\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-fountain) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-fountain.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-fountain) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-fountain)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-fountain)\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Ffountain\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Ffountain)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Ffountain#readme)\n\n### Links\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-links\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-links) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-links.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-links) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-links)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-links)\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Flinks\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Flinks)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Flinks#readme)\n\n### Sea Anemone\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-sea-anemone\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-sea-anemone) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-sea-anemone.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-sea-anemone) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-sea-anemone)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-sea-anemone)\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002FseaAnemone\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002FseaAnemone)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002FseaAnemone#readme)\n\n### Snow\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-snow\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-snow) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-snow.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-snow) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-snow)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-snow)\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Fsnow\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Fsnow)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Fsnow#readme)\n\n### Squares\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-squares\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-squares) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-squares.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-squares) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-squares)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-squares)\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Fsquares\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Fsquares)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Fsquares#readme)\n\n### Stars\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-stars\u002Fbadge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-stars) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-stars.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-stars) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-stars)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-stars)\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Fstars\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Fstars)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Fstars#readme)\n\n### Triangles\n\n[![jsDelivr](https:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-triangles\u002Fbadge?style=for-the-badge)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fpreset-triangles) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fpreset-triangles.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-triangles) [![npmjs](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@tsparticles\u002Fpreset-triangles)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fpreset-triangles)\n\n[![demo](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Fraw\u002Fmain\u002Fpresets\u002Ftriangles\u002Fimages\u002Fsample.png)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002Fpresets\u002Ftriangles)\n\nYou can find the instructions [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fpresets\u002Ftree\u002Fmain\u002Fpresets\u002Ftriangles#readme)\n\n---\n\n## Templates and Resources\n\nYou can find some tsParticles related templates [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftemplates). 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\u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftemplates>\n\n---\n\n## **_Demo \u002F Generator_**\n\n\u003Chttps:\u002F\u002Fparticles.js.org\u002Fsamples>\n\n[![Particles demo](https:\u002F\u002Fparticles.js.org\u002Fimages\u002Fdemo2.png?v=1.39.1)](https:\u002F\u002Fparticles.js.org\u002Fsamples)\n\n---\n\n## **_Video Tutorials_**\n\nYou can find all video tutorials on the website here: \u003Chttps:\u002F\u002Fparticles.js.org\u002Fvideo.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:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FJsssOXz72bM6jGEZ0s\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002F#chars)\n\n---\n\n### Polygon mask\n\n[![tsParticles Polygon Mask demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FlNRfiSgaMFbL4FMhW6\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002F#polygonMask)\n\n---\n\n### Animated stars\n\n[![Particles NASA demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FcLqGsnh7FKRVMgPIWE\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002F#nasa)\n\n---\n\n### Nyan cat flying on scrolling stars\n\n[![Particles Nyan Cat demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FLpX2oNc9ZMgIhIXQL9\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002F#nyancat2)\n\n---\n\n### Snow particles\n\n[![tsParticles Snow demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FgihwUFbmiubbkdzEMX\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002F#snow)\n\n---\n\n### Background Mask particles\n\n[![tsParticles Background Mask demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FdWraWgqInWFGWiOyRu\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002F#background)\n\n---\n\n**particles.json**\n\nYou can find some config samples [here](https:\u002F\u002Fgithub.com\u002Ftsparticles\u002Fwebsite\u002Ftree\u002Fmain\u002Fpresets) 📖\n\n---\n\n## **_Options_**\n\nYou can find all options\navailable [here](https:\u002F\u002Fparticles.js.org\u002Fdocs\u002Finterfaces\u002FtsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)\n📖\n\nIf you want a practical map with examples, check these markdown docs too:\n\n- Root options: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FOptions.md>\n- Colors: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FColor.md>\n- Container API: \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FContainer.md>\n\n## Want to see it in action and try it?\n\nI've created a tsParticles collection on [CodePen](https:\u002F\u002Fcodepen.io\u002Fcollection\u002FDPOage) 😮 or you can check out\nmy [profile](https:\u002F\u002Fcodepen.io\u002Fmatteobruni)\n\nOtherwise, there's the demo page link below.\n\n[![tsParticles demo](https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FfsVN1ZHksgBIXNIbr1\u002Fgiphy.gif)](https:\u002F\u002Fparticles.js.org\u002Fsamples\u002F)\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\u002Fvanilla\n$ pnpm start\n```\n\n**Boom! 💥** \u003Chttp:\u002F\u002Flocalhost: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:\u002F\u002Fdata.jsdelivr.com\u002Fv1\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fparticles.js\u002Fbadge?style=rounded)](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002F@tsparticles\u002Fparticles.js) [![npmjs](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002F@tsparticles\u002Fparticles.js.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fparticles.js) [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@tsparticles\u002Fparticles.js)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tsparticles\u002Fparticles.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:\u002F\u002Fdev.to\u002Fmatteobruni\u002Fmigrating-from-particles-js-to-tsparticles-2a6m)**\n\nWant to know 5 reasons to do the\nswitch? [Read here](https:\u002F\u002Fdev.to\u002Fmatteobruni\u002F5-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\nMigration quick guide in this repository:\n\n- \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FpjsMigration.md>\n\n---\n\n## Plugins\u002FCustomizations\n\ntsParticles now supports some customizations 🥳.\n\n**You can create your own plugins**\n\n_Read more [here](https:\u002F\u002Fparticles.js.org\u002Fdocs\u002Fmodules\u002FCore_Interfaces_IPlugin.html)..._\n\nPractical customization guide (shape + preset examples):\n\n- \u003Chttps:\u002F\u002Fgithub.com\u002Ftsparticles\u002Ftsparticles\u002Fblob\u002Fmain\u002Fmarkdown\u002FPlugins.md>\n\n---\n\n## Dependency Graph\n\n```mermaid\nflowchart TD\n\n  subgraph core [Core]\n    engine[tsParticles Engine]\n    perlin-noise[Perlin Noise Lib]\n    simplex-noise[Simplex Noise Lib]\n    configs[tsParticles Configs]\n  end\n\n  subgraph bundle-basic [tsParticles Basic]\n\n    subgraph basic-plugins [Plugins]\n      plugin-move[Move]\n\n      subgraph basic-plugins-colors [Colors]\n        plugin-hex-color[Hex Color]\n        plugin-hsl-color[HSL Color]\n        plugin-rgb-color[RGB Color]\n      end\n    end\n\n    subgraph basic-shapes [Shapes]\n      shape-circle[Circle]\n    end\n\n    subgraph basic-updates [Updaters]\n      updater-fill-color[Color]\n      updater-opacity[Opacity]\n      updater-out-modes[Out Modes]\n      updater-size[Size]\n    end\n\n  end\n\n  engine --> bundle-basic\n\n  subgraph bundle-confetti [tsParticles Confetti]\n\n    subgraph confetti-plugins [Plugins]\n      plugin-emitters\n      plugin-motion\n    end\n\n    subgraph confetti-shapes [Shapes]\n      shape-cards\n      shape-emoji\n      shape-heart\n      shape-image\n      shape-polygon\n      shape-square\n      shape-star\n    end\n\n    subgraph confetti-updaters [Updaters]\n      updater-life\n      updater-roll\n      updater-rotate\n      updater-tilt\n      updater-wobble\n    end\n\n  end\n\n  bundle-basic --> bundle-confetti\n\n  subgraph bundle-slim [tsParticles Slim]\n\n    subgraph slim-interactions [Interactions]\n\n      subgraph slim-interactions-external [Externals]\n        interaction-external-attract[Attract]\n        interaction-external-bounce[Bounce]\n        interaction-external-bubble[Bubble]\n        interaction-external-connect[Connect]\n        interaction-external-grab[Grab]\n        interaction-external-parallax[Parallax]\n        interaction-external-pause[Pause]\n        interaction-external-push[Push]\n        interaction-external-remove[Remove]\n        interaction-external-repulse[Repulse]\n        interaction-external-slow[Slow]\n      end\n\n      subgraph slim-interactions-particles [Particles]\n        interaction-particles-attract[Attract]\n        interaction-particles-collisions[Collisions]\n        interaction-particles-links[Links]\n      end\n\n    end\n\n    subgraph slim-plugins [Plugins]\n      plugin-interactivity[Interactivity]\n\n      subgraph slim-plugins-easings [Easings]\n        plugin-easing-quad[Quad]\n      end\n\n    end\n\n    subgraph slim-shapes [Shapes]\n      shape-emoji[Emoji]\n      shape-image[Image]\n      shape-line[Line]\n      shape-polygon[Polygon]\n      shape-square[Square]\n      shape-star[Star]\n    end\n\n    subgraph slim-updaters [Updaters]\n      updater-life[Life]\n      updater-rotate[Rotate]\n      updater-stroke-color[Stroke Color]\n    end\n\n  end\n\n  bundle-basic --> bundle-slim\n\n  subgraph bundle-fireworks [tsParticles Fireworks]\n\n    subgraph fireworks-effects [Effects]\n      effect-trail\n    end\n\n    subgraph fireworks-plugins [Plugins]\n      plugin-emitters\n\n      subgraph fireworks-plugin-emitters-shapes [Emitters Shapes]\n        plugin-emitters-shape-square\n      end\n\n      plugin-sounds\n    end\n\n    subgraph fireworks-updaters [Updaters]\n      updater-destroy\n      updater-life\n      updater-rotate\n    end\n\n  end\n\n  bundle-basic --> bundle-fireworks\n\n  subgraph bundle-full [tsParticles]\n\n    subgraph full-interactions [Interactions]\n\n      subgraph full-interactions-external [Externals]\n        interaction-external-trail[Trail]\n      end\n\n    end\n\n    subgraph full-plugins [Plugins]\n      plugin-absorbers[Absorbers]\n      plugin-emitters[Emitters]\n\n      subgraph full-plugin-emitters-shapes [Emitters Shapes]\n        plugin-emitters-shape-circle[Circle]\n        plugin-emitters-shape-square[Square]\n      end\n\n    end\n\n    subgraph full-shapes [Shapes]\n      shape-text[Text]\n    end\n\n    subgraph full-updaters [Updaters]\n      updater-destroy[Destroy]\n      updater-roll[Roll]\n      updater-tilt[Tilt]\n      updater-twinkle[Twinkle]\n      updater-wobble[Wobble]\n    end\n\n  end\n\n  bundle-slim --> bundle-full\n\n  subgraph bundle-all [tsParticles All]\n\n    subgraph all-effects [Effects]\n      effect-bubble[Bubble]\n      effect-particles[Particles]\n      effect-shadow[Shadow]\n      effect-trail[Trail]\n    end\n\n    subgraph all-interactions [Interactions]\n      subgraph all-interactions-external [External]\n        interaction-external-particle[Particle]\n        interaction-external-pop[Pop]\n      end\n\n      interaction-light[Light]\n\n      subgraph all-interactions-particles [Particles]\n        interaction-particles-repulse[Repulse]\n      end\n    end\n\n    subgraph all-paths [Paths]\n      path-branches[Branches]\n      path-brownian[Brownian]\n      path-curl-noise[Curl Noise]\n      path-curves[Curves]\n      path-fractal-noise[Fractal Noise]\n      path-grid[Grid]\n      path-levy[Levy]\n      path-perlin-noise[Perlin Noise]\n      path-polygon[Polygon]\n      path-random[Random]\n      path-simplex-noise[Simplex Noise]\n      path-spiral[Spiral]\n      path-svg[SVG]\n      path-zig-zag[Zig Zag]\n    end\n\n    subgraph all-plugins [Plugins]\n      plugin-background-mask[Background Mask]\n      plugin-blend[Blend]\n      plugin-canvas-mask[Canvas Mask]\n\n      subgraph all-plugins-colors [Colors]\n        plugin-hsv-color[HSV Color]\n        plugin-hwb-color[HWB Color]\n        plugin-lab-color[Lab Color]\n        plugin-lch-color[Lch Color]\n        plugin-named-color[Named Color]\n        plugin-oklab-color[Oklab Color]\n        plugin-oklch-color[Oklch Color]\n      end\n\n      subgraph all-plugins-easings [Easings]\n        plugin-easing-back[Back]\n        plugin-easing-bounce[Bounce]\n        plugin-easing-circ[Circ]\n        plugin-easing-cubic[Cubic]\n        plugin-easing-elastic[Elastic]\n        plugin-easing-expo[Expo]\n        plugin-easing-gaussian[Gaussian]\n        plugin-easing-linear[Linear]\n        plugin-easing-quart[Quart]\n        plugin-easing-quint[Quint]\n        plugin-easing-sigmoid[Sigmoid]\n        plugin-easing-sine[Sine]\n        plugin-easing-smoothstep[Smoothstep]\n      end\n\n      subgraph all-plugin-emitters-shapes [Emitters Shapes]\n        plugin-emitters-shape-canvas[Canvas]\n        plugin-emitters-shape-path[Path]\n        plugin-emitters-shape-polygon[Polygon]\n      end\n\n      subgraph all-plugins-exports [Exports]\n        plugin-export-image[Image]\n        plugin-export-json[JSON]\n        plugin-export-video[Video]\n      end\n\n      plugin-infection[Infection]\n      plugin-manual-particles[Manual Particles]\n      plugin-motion[Motion]\n      plugin-poisson-disc[Poisson Disc]\n      plugin-polygon-mask[Polygon Mask]\n      plugin-responsive[Responsive]\n      plugin-sounds[Sounds]\n      plugin-themes[Themes]\n      plugin-trail[Trail]\n      plugin-zoom[Zoom]\n    end\n\n    subgraph all-shapes [Shapes]\n      shape-arrow[Arrow]\n      shape-cards[Cards]\n      shape-cog[Cog]\n      shape-heart[Heart]\n      shape-infinity[Infinity]\n      shape-matrix[Matrix]\n      shape-path[Path]\n      shape-rounded-polygon[Rounded Polygon]\n      shape-rounded-rect[Rounded Rect]\n      shape-spiral[Spiral]\n      shape-squircle[Squircle]\n    end\n\n    subgraph all-updaters [Updaters]\n      updater-gradient[Gradient]\n      updater-orbit[Orbit]\n    end\n\n    simplex-noise --> path-curl-noise\n    perlin-noise --> path-perlin-noise\n    simplex-noise --> path-simplex-noise\n\n  end\n\n  bundle-full --> bundle-all\n```\n","tsParticles 是一个用于创建高度可定制的 JavaScript 粒子效果、彩纸爆炸和烟花动画的轻量级 TypeScript 库，适用于为网站添加动态背景。其核心功能包括支持多种粒子效果配置，并且无需依赖其他库即可在浏览器中运行。技术上，该项目使用 TypeScript 编写，保证了代码质量和类型安全，同时提供了针对 React.js, Vue.js (2.x 和 3.x), Angular, Svelte 等主流前端框架的现成组件。非常适合需要增强视觉吸引力的网页设计场景，如活动页面、个人博客或企业官网等，能够显著提升用户体验。",2,"2026-06-11 03:26:15","top_topic"]