1 | [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
|
2 |
|
3 | # tsParticles - TypeScript Particles
|
4 |
|
5 | **A lightweight TypeScript library for creating particles. Dependency free (\*), browser ready and compatible with
|
6 | React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**
|
7 |
|
8 | [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni?style=for-the-badge)](https://github.com/sponsors/matteobruni)
|
9 | [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/tsparticles?style=for-the-badge)](https://www.jsdelivr.com/package/npm/tsparticles)
|
10 | [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles-engine?style=for-the-badge)](https://cdnjs.com/libraries/tsparticles)
|
11 | [![npm](https://img.shields.io/npm/v/tsparticles-engine?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)
|
12 | [![npm](https://img.shields.io/npm/dm/tsparticles?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)
|
13 | [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff?style=for-the-badge)](https://lerna.js.org/)
|
14 | [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles)
|
15 | [![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)
|
16 | [![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)
|
17 | [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles)
|
18 | [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)
|
19 |
|
20 | [![Discord](https://img.shields.io/discord/872061157379301416?label=discord&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/hACwv45Hme)
|
21 | [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
|
22 | [![WhatsApp](https://particles.js.org/images/WhatsApp.png)](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c)
|
23 | [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
|
24 | [![Reddit](https://img.shields.io/reddit/subreddit-subscribers/tsParticles?style=for-the-badge)](https://www.reddit.com/r/tsParticles/)
|
25 |
|
26 | [![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")
|
27 | [![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)
|
28 |
|
29 | ---
|
30 |
|
31 | ## Table of Contents
|
32 |
|
33 | ⚠️⚠️ \_This readme refers to **v2**
|
34 | version, [read here](https://github.com/matteobruni/tsparticles/tree/v1#readme) for **v1** documentation\* ⚠️⚠️
|
35 |
|
36 | - [Use for your website](#Do-you-want-to-use-it-on-your-website)
|
37 | - [Library installation](#Library-installation)
|
38 | - [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)
|
39 | - [Angular](#Angular)
|
40 | - [Inferno](#Inferno)
|
41 | - [jQuery](#jQuery)
|
42 | - [Preact](#Preact)
|
43 | - [ReactJS](#ReactJS)
|
44 | - [RiotJS](#RiotJS)
|
45 | - [SolidJS](#SolidJS)
|
46 | - [Svelte](#Svelte)
|
47 | - [VueJS 2.x](#VueJS-2x)
|
48 | - [VueJS 3.x](#VueJS-3x)
|
49 | - [Web Components](#Web-Components)
|
50 | - [WordPress](#WordPress)
|
51 | - [Elementor](#Elementor)
|
52 | - [Presets](#Presets)
|
53 | - [Big Circles](#Big-Circles)
|
54 | - [Bubbles](#Bubbles)
|
55 | - [Confetti](#Confetti)
|
56 | - [Fire](#Fire)
|
57 | - [Firefly](#Firefly)
|
58 | - [Fireworks](#Fireworks)
|
59 | - [Fountain](#fountain)
|
60 | - [Links](#links)
|
61 | - [Sea Anemone](#Sea-Anemone)
|
62 | - [Snow](#Snow)
|
63 | - [Stars](#Stars)
|
64 | - [Triangles](#Triangles)
|
65 | - [Templates and Resources](#Templates-and-Resources)
|
66 | - [Demo / Generator](#Demo--Generator)
|
67 | - [Characters as particles](#Characters-as-particles)
|
68 | - [Mouse hover connections](#Mouse-hover-connections)
|
69 | - [Polygon mask](#Polygon-mask)
|
70 | - [Animated stars](#Animated-stars)
|
71 | - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)
|
72 | - [Background Mask particles](#Background-Mask-particles)
|
73 | - [Video Tutorials](#Video-Tutorials)
|
74 | - [Migrating from Particles.js](#Migrating-from-Particlesjs)
|
75 | - [Plugins/Customizations](#PluginsCustomizations)
|
76 | - [Dependency Graphs](#Dependency-Graphs)
|
77 | - [Sponsors](#Sponsors)
|
78 |
|
79 | ---
|
80 |
|
81 | ## Do you want to use it on your website?
|
82 |
|
83 | _Documentation and Development references [here](https://particles.js.org/docs/) 📖_
|
84 |
|
85 | **This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js
|
86 | it's even easier**.
|
87 |
|
88 | You'll find the
|
89 | instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the
|
90 | links you need, and _don't be scared by **TypeScript**, it's just the source language_.
|
91 |
|
92 | **The output files are just JavaScript**. 🤩
|
93 |
|
94 | CDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.engine.min.js) and
|
95 | all
|
96 | files splitted for `import` syntax.
|
97 |
|
98 | **If you are interested** there are some _simple instructions_
|
99 | just [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to
|
100 | migrate from the old particles.js library.
|
101 |
|
102 | ## **_Library installation_**
|
103 |
|
104 | ### **_Hosting / CDN_**
|
105 |
|
106 | **_Please use these hosts or your own to load tsParticles on your projects_**
|
107 |
|
108 | #### jsDelivr
|
109 |
|
110 | [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-engine/badge)](https://www.jsdelivr.com/package/npm/tsparticles-engine)
|
111 | [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-slim/badge)](https://www.jsdelivr.com/package/npm/tsparticles-slim)
|
112 | [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge)](https://www.jsdelivr.com/package/npm/tsparticles)
|
113 |
|
114 | #### cdnjs
|
115 |
|
116 | [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles)
|
117 |
|
118 | #### unpkg
|
119 |
|
120 | <https://unpkg.com/tsparticles-engine/> <https://unpkg.com/tsparticles-slim/> <https://unpkg.com/tsparticles/>
|
121 |
|
122 | ---
|
123 |
|
124 | ### **_npm_**
|
125 |
|
126 | _tsParticles Engine_
|
127 |
|
128 | [![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)
|
129 |
|
130 | _tsParticles Slim_
|
131 |
|
132 | [![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)
|
133 |
|
134 | _tsParticles_
|
135 |
|
136 | [![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)
|
137 |
|
138 | ```shell
|
139 | npm install tsparticles-engine
|
140 | ```
|
141 |
|
142 | ### **_yarn_**
|
143 |
|
144 | ```shell
|
145 | yarn add tsparticles-engine
|
146 | ```
|
147 |
|
148 | ### **_pnpm_**
|
149 |
|
150 | ```shell
|
151 | pnpm install tsparticles-engine
|
152 | ```
|
153 |
|
154 | #### Import and require
|
155 |
|
156 | Starting from version 1.12.11 `import` and `require` can be used to import `tsParticles` .
|
157 |
|
158 | Now you can write something like this
|
159 |
|
160 | ```javascript
|
161 | const tsParticles = require("tsparticles-engine");
|
162 |
|
163 | // or
|
164 |
|
165 | import { tsParticles } from "tsparticles-engine";
|
166 | ```
|
167 |
|
168 | The imported `tsParticles` is the same instance you have when including the script.
|
169 |
|
170 | ---
|
171 |
|
172 | ### **_NuGet_**
|
173 |
|
174 | [![Nuget](https://img.shields.io/nuget/v/tsParticles?style=for-the-badge)](https://www.nuget.org/packages/tsParticles/)
|
175 |
|
176 | ---
|
177 |
|
178 | ### **_Usage_**
|
179 |
|
180 | Load tsParticles and configure the particles:
|
181 |
|
182 | [![tsParticles demo](https://media.giphy.com/media/ftHwBpp3b0qNyCXRuu/giphy.gif)](https://particles.js.org)
|
183 |
|
184 | **index.html**
|
185 |
|
186 | ```html
|
187 | <div id="tsparticles"></div>
|
188 |
|
189 | <script src="tsparticles.engine.min.js"></script>
|
190 | ```
|
191 |
|
192 | **app.js**
|
193 |
|
194 | ```javascript
|
195 | // @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected
|
196 | /* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */
|
197 |
|
198 | tsParticles
|
199 | .loadJSON("tsparticles", "presets/default.json")
|
200 | .then((container) => {
|
201 | console.log("callback - tsparticles config loaded");
|
202 | })
|
203 | .catch((error) => {
|
204 | console.error(error);
|
205 | });
|
206 |
|
207 | //or
|
208 |
|
209 | /* tsParticles.load(@dom-id, @options); */
|
210 |
|
211 | tsParticles.load("tsparticles", {
|
212 | /* options here */
|
213 | });
|
214 |
|
215 | //or
|
216 |
|
217 | /* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */
|
218 |
|
219 | tsParticles.loadFromArray("tsparticles", [
|
220 | {
|
221 | /* options here */
|
222 | },
|
223 | {
|
224 | /* other options here */
|
225 | },
|
226 | ]);
|
227 | //random object
|
228 |
|
229 | tsParticles.loadFromArray(
|
230 | "tsparticles",
|
231 | [
|
232 | {
|
233 | /* options here */
|
234 | },
|
235 | {
|
236 | /* other options here */
|
237 | },
|
238 | ],
|
239 | 1
|
240 | ); //the second one
|
241 | // Important! If the index is not in range 0...<array.length, the index will be ignored.
|
242 |
|
243 | // after initialization this can be used.
|
244 |
|
245 | /* tsParticles.setOnClickHandler(@callback); */
|
246 |
|
247 | /* this will be fired from all particles loaded */
|
248 |
|
249 | tsParticles.setOnClickHandler((event, particles) => {
|
250 | /* custom on click handler */
|
251 | });
|
252 |
|
253 | // now you can control the animations too, it's possible to pause and resume the animations
|
254 | // these methods don't change the config so you're safe with all your configurations
|
255 | // domItem(0) returns the first tsParticles instance loaded in the dom
|
256 | const particles = tsParticles.domItem(0);
|
257 |
|
258 | // play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
|
259 | particles.play();
|
260 |
|
261 | // pause will stop the animations
|
262 | particles.pause();
|
263 | ```
|
264 |
|
265 | ---
|
266 |
|
267 | ## Official components for some of the most used frameworks
|
268 |
|
269 | ### Angular
|
270 |
|
271 | `ng-particles`
|
272 |
|
273 | [![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)
|
274 |
|
275 | Instructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/angular/README.md)
|
276 |
|
277 | ### Inferno
|
278 |
|
279 | `inferno-particles`
|
280 |
|
281 | [![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)
|
282 |
|
283 | Instructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/inferno/README.md)
|
284 |
|
285 | ### jQuery
|
286 |
|
287 | `jquery-particles`
|
288 |
|
289 | [![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)
|
290 |
|
291 | Instructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/jquery/README.md)
|
292 |
|
293 | ### Preact
|
294 |
|
295 | `preact-particles`
|
296 |
|
297 | [![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)
|
298 |
|
299 | Instructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/preact/README.md)
|
300 |
|
301 | ### ReactJS
|
302 |
|
303 | `react-particles`
|
304 |
|
305 | [![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)
|
306 |
|
307 | Instructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)
|
308 |
|
309 | ### RiotJS
|
310 |
|
311 | #### `riot-particles`
|
312 |
|
313 | [![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)
|
314 |
|
315 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)
|
316 |
|
317 | ### SolidJS
|
318 |
|
319 | #### `solid-particles`
|
320 |
|
321 | [![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)
|
322 |
|
323 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)
|
324 |
|
325 | ### Svelte
|
326 |
|
327 | `svelte-particles`
|
328 |
|
329 | [![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)
|
330 |
|
331 | Instructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md)
|
332 |
|
333 | ### VueJS 2.x
|
334 |
|
335 | `vue2-particles`
|
336 |
|
337 | [![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)
|
338 |
|
339 | Instructions available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue/README.md)
|
340 |
|
341 | ### VueJS 3.x
|
342 |
|
343 | `vue3-particles`
|
344 |
|
345 | [![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)
|
346 |
|
347 | Instruction available [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)
|
348 |
|
349 | ### Web Components
|
350 |
|
351 | #### `web-particles`
|
352 |
|
353 | [![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)
|
354 |
|
355 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)
|
356 |
|
357 | ### WordPress
|
358 |
|
359 | #### `wordpress-particles`
|
360 |
|
361 | [![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/)
|
362 |
|
363 | The plugin page hosted on WordPress.org can be
|
364 | found [here](https://wordpress.org/plugins/tsparticles-block/#description)
|
365 |
|
366 | ### Elementor
|
367 |
|
368 | Actually an official tsParticles plugin isn't existing, but I have a collaboration with
|
369 | the `Premium Addons for Elementor` plugin collection.
|
370 |
|
371 | <div style="float: left; margin-right: 10px;">
|
372 | <img width="64" alt="Premium Addons for Elementor" src="https://particles.js.org/images/premium-addons-wordpress-plugin.png" />
|
373 | </div>
|
374 | <div>
|
375 | 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 />
|
376 | 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>.
|
377 | </div>
|
378 | <div style="clear: both;"></div>
|
379 |
|
380 | ---
|
381 |
|
382 | ## Presets
|
383 |
|
384 | There are some presets ready to be used in this repository, and they have also a bundle file that contains everything
|
385 | needed to run.
|
386 |
|
387 | ### Big Circles
|
388 |
|
389 | [![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)
|
390 |
|
391 | This preset loads big colored circles moving upwards on a white background.
|
392 |
|
393 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)
|
394 |
|
395 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/bigCircles/README.md)
|
396 |
|
397 | ### Bubbles
|
398 |
|
399 | [![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)
|
400 |
|
401 | This preset loads colored bubbles coming from the bottom of the screen on a white background.
|
402 |
|
403 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)
|
404 |
|
405 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/bubbles/README.md)
|
406 |
|
407 | ### Confetti
|
408 |
|
409 | [![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)
|
410 |
|
411 | This preset loads white and red confetti launched from the screen center on a transparent background.
|
412 |
|
413 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)
|
414 |
|
415 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/confetti/README.md)
|
416 |
|
417 | ### Fire
|
418 |
|
419 | [![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)
|
420 |
|
421 | This preset loads a faded red to black background with particles colored like fire and ash sparks.
|
422 |
|
423 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)
|
424 |
|
425 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/fire/README.md)
|
426 |
|
427 | ### Firefly
|
428 |
|
429 | [![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)
|
430 |
|
431 | This preset loads a mouse trail made with small fading particles like little fireflies.
|
432 |
|
433 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)
|
434 |
|
435 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/firefly/README.md)
|
436 |
|
437 | ### Fireworks
|
438 |
|
439 | [![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)
|
440 |
|
441 | This preset loads a beautiful fireworks effect.
|
442 |
|
443 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)
|
444 |
|
445 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/fireworks/README.md)
|
446 |
|
447 | ### Fountain
|
448 |
|
449 | [![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)
|
450 |
|
451 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)
|
452 |
|
453 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/fountain/README.md)
|
454 |
|
455 | ### Links
|
456 |
|
457 | [![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)
|
458 |
|
459 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)
|
460 |
|
461 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/links/README.md)
|
462 |
|
463 | ### Sea Anemone
|
464 |
|
465 | [![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)
|
466 |
|
467 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)
|
468 |
|
469 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/seaAnemone/README.md)
|
470 |
|
471 | ### Snow
|
472 |
|
473 | [![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)
|
474 |
|
475 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)
|
476 |
|
477 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/snow/README.md)
|
478 |
|
479 | ### Stars
|
480 |
|
481 | [![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)
|
482 |
|
483 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)
|
484 |
|
485 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/stars/README.md)
|
486 |
|
487 | ### Triangles
|
488 |
|
489 | [![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)
|
490 |
|
491 | [![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)
|
492 |
|
493 | You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/presets/triangles/README.md)
|
494 |
|
495 | ---
|
496 |
|
497 | ## Templates and Resources
|
498 |
|
499 | You can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are
|
500 | created for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.
|
501 |
|
502 | The templates will vary, new ones can be created or older ones updated with latest features or changed to a better
|
503 | style. Check them out once in a while.
|
504 |
|
505 | If you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be
|
506 | credited as the template author!
|
507 |
|
508 | <https://github.com/tsparticles/templates>
|
509 |
|
510 | ---
|
511 |
|
512 | ## **_Demo / Generator_**
|
513 |
|
514 | <https://particles.js.org/samples>
|
515 |
|
516 | [![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.1)](https://particles.js.org/samples)
|
517 |
|
518 | ---
|
519 |
|
520 | ## **_Video Tutorials_**
|
521 |
|
522 | You can find all video tutorials in the website here: <https://particles.js.org/video.html>
|
523 |
|
524 | _More videos are coming soon! Check every day if there are some new contents._
|
525 |
|
526 | ---
|
527 |
|
528 | ### Characters as particles
|
529 |
|
530 | [![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples/#chars)
|
531 |
|
532 | ---
|
533 |
|
534 | ### Polygon mask
|
535 |
|
536 | [![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples/#polygonMask)
|
537 |
|
538 | ---
|
539 |
|
540 | ### Animated stars
|
541 |
|
542 | [![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples/#nasa)
|
543 |
|
544 | ---
|
545 |
|
546 | ### Nyan cat flying on scrolling stars
|
547 |
|
548 | [![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples/#nyancat2)
|
549 |
|
550 | ---
|
551 |
|
552 | ### Snow particles
|
553 |
|
554 | [![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples/#snow)
|
555 |
|
556 | ---
|
557 |
|
558 | ### Background Mask particles
|
559 |
|
560 | [![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples/#background)
|
561 |
|
562 | ---
|
563 |
|
564 | **particles.json**
|
565 |
|
566 | You can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets) 📖
|
567 |
|
568 | ---
|
569 |
|
570 | ## **_Options_**
|
571 |
|
572 | You can find all options
|
573 | available [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖
|
574 |
|
575 | ## Want to see it in action and try it?
|
576 |
|
577 | I've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage) 😮 or you can checkout
|
578 | my [profile](https://codepen.io/matteobruni)
|
579 |
|
580 | Otherwise, there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. **It's safe** 😷.
|
581 |
|
582 | [![tsParticles demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples/#virus)
|
583 |
|
584 | Want to see ever more demos? Clone the repository on your computer and follow these instructions
|
585 |
|
586 | ```shell
|
587 | $ pnpm i
|
588 | $ npx lerna run build
|
589 | $ cd demo/vanilla
|
590 | $ pnpm run start
|
591 | ```
|
592 |
|
593 | **Boom! 💥** <http://localhost:3000> and you can checkout other demos.
|
594 |
|
595 | _If you are brave enough_ you can switch to the `dev` branch for trying the features under development.
|
596 |
|
597 | ---
|
598 |
|
599 | ## Migrating from Particles.js
|
600 |
|
601 | **tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.
|
602 |
|
603 | [![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)
|
604 |
|
605 | Seriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're
|
606 | ready** 🧙!
|
607 |
|
608 | You can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)**
|
609 |
|
610 | Want to know 5 reasons to do the
|
611 | switch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)
|
612 |
|
613 | _Below you can find all the information you need to install tsParticles and its new syntax._
|
614 |
|
615 | ---
|
616 |
|
617 | ## Plugins/Customizations
|
618 |
|
619 | tsParticles now supports some customizations 🥳.
|
620 |
|
621 | **You can create your own plugins**
|
622 |
|
623 | _Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._
|
624 |
|
625 | ---
|
626 |
|
627 | ## Dependency Graphs
|
628 |
|
629 | ```mermaid
|
630 | flowchart TD
|
631 |
|
632 | subgraph c [Components]
|
633 | ca[Angular]
|
634 | ci[Inferno.js]
|
635 | cj[JQuery]
|
636 | cp[Preact]
|
637 | cre[React.js]
|
638 | cri[Riot.js]
|
639 | cso[Solid.js]
|
640 | csv[Svelte]
|
641 | cv2[Vue.js 2.x]
|
642 | cv3[Vue.js 3.x]
|
643 | cwc[Web Components]
|
644 | cwp[WordPress]
|
645 | end
|
646 |
|
647 | e[tsParticles Engine] --> c
|
648 | ```
|
649 |
|
650 | ```mermaid
|
651 | flowchart LR
|
652 |
|
653 | subgraph b [Bundles]
|
654 | bp[Particles.js compatibility bundle] --> bs[tsParticles Slim]
|
655 | bs --> bf[tsParticles]
|
656 | end
|
657 |
|
658 | e[tsParticles Engine] --> b
|
659 |
|
660 | iea & iebo & iebu & iec & ieg & iepa & iepu & ierem & ierep & ies --> bs
|
661 | ipa & ipc & ipl --> bs
|
662 | mb & mp --> bs
|
663 | ple4 --> bs
|
664 | sc & si & sl & sp & ssq & sst & st --> bs
|
665 | ua & uc & ul & uop & uou & usi & ust --> bs
|
666 |
|
667 | iet --> bf
|
668 | pla & plem --> bf
|
669 | ur & uti & utw & uw --> bf
|
670 |
|
671 | subgraph i [Interactions]
|
672 |
|
673 | subgraph ie [Externals]
|
674 | iea[Attract]
|
675 | iebo[Bounce]
|
676 | iebu[Bubble]
|
677 | iec[Connect]
|
678 | ieg[Grab]
|
679 | iepa[Pause]
|
680 | iepu[Push]
|
681 | ierem[Remove]
|
682 | ierep[Repulse]
|
683 | ies[Slow]
|
684 | iet[Trail]
|
685 | end
|
686 |
|
687 | il[Light]
|
688 |
|
689 | subgraph ip [Particles]
|
690 | ipa[Attract]
|
691 | ipc[Collisions]
|
692 | ipl[Links]
|
693 | ipr[Repulse]
|
694 | end
|
695 |
|
696 | end
|
697 |
|
698 | i --> ie
|
699 | i --> ip
|
700 |
|
701 | e --> i
|
702 |
|
703 | subgraph m [Movers]
|
704 | mb[Base]
|
705 | mp[Parallax]
|
706 | end
|
707 |
|
708 | e --> m
|
709 |
|
710 | subgraph pa [Paths]
|
711 | pac[Curves]
|
712 | pape[Perlin Noise]
|
713 | papo[Polygon]
|
714 | pas[Simplex Noise]
|
715 | end
|
716 |
|
717 | e --> pa
|
718 |
|
719 | subgraph pl [Plugins]
|
720 | pla[Absorbers]
|
721 | plem[Emitters]
|
722 | plh[HSV Color]
|
723 | pli[Infection]
|
724 | plm[Motion]
|
725 | plp[Polygon Mask]
|
726 |
|
727 | subgraph plea [Easings]
|
728 | pleb[Back]
|
729 | pleci[Circ]
|
730 | plecu[Cubic]
|
731 | plee[Expo]
|
732 | ple4[Quad]
|
733 | ple5[Quint]
|
734 | ples[Sine]
|
735 | end
|
736 |
|
737 | end
|
738 |
|
739 | pl --> plea
|
740 |
|
741 | e --> pl
|
742 |
|
743 | subgraph s [Shapes]
|
744 | sb[Bubble]
|
745 | sc[Circle]
|
746 | sh[Heart]
|
747 | si[Image]
|
748 | sl[Line]
|
749 | sm[Multiline Text]
|
750 | sp[Polygon]
|
751 | sr[Rounded Rectangle]
|
752 | ssp[Spiral]
|
753 | ssq[Square]
|
754 | sst[Star]
|
755 | st[Text]
|
756 | end
|
757 |
|
758 | e --> s
|
759 |
|
760 | subgraph u [Updaters]
|
761 | ua[Angle]
|
762 | uc[Color]
|
763 | ud[Destroy]
|
764 | ug[Gradient]
|
765 | ul[Life]
|
766 | uop[Opacity]
|
767 | uor[Orbit]
|
768 | uou[Out Modes]
|
769 | ur[Roll]
|
770 | usi[Size]
|
771 | ust[Stroke Color]
|
772 | uti[Tilt]
|
773 | utw[Twinkle]
|
774 | uw[Wobble]
|
775 | end
|
776 |
|
777 | e --> u
|
778 |
|
779 | subgraph pr [Presets]
|
780 | prbi[Big Circles]
|
781 | prbu[Bubbles]
|
782 | prc[Confetti]
|
783 | prf[Fire]
|
784 | prff[Firefly]
|
785 | prfw[Fireworks]
|
786 | prfo[Fountain]
|
787 | prl[Links]
|
788 | prsa[Sea Anemone]
|
789 | prsn[Snow]
|
790 | prst[Stars]
|
791 | prt[Triangles]
|
792 | end
|
793 |
|
794 | e --> pr
|
795 | ```
|
796 |
|
797 | ---
|
798 |
|
799 | <p>
|
800 | <a href="https://www.jetbrains.com/?from=tsParticles">
|
801 | <img src="https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png" height="150" alt="JetBrains" />
|
802 | </a>
|
803 | <a href="https://www.jetbrains.com/webstorm/?from=tsParticles">
|
804 | <img src="https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png" height="150" alt="JetBrains" />
|
805 | </a>
|
806 | </p>
|
807 |
|
808 | ### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2022 Open Source Licenses!
|
809 |
|
810 | [JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles) is used to maintain this project.
|
811 |
|
812 | ---
|
813 |
|
814 | ## Sponsors
|
815 |
|
816 | <p>
|
817 | <a href="https://www.codacy.com">
|
818 | <img src="https://particles.js.org/images/codacy-logos/codacy-white.jpeg" alt="Codacy" height="100" />
|
819 | </a>
|
820 | </p>
|
821 |
|
822 | [Codacy](https://www.codacy.com) is a code quality platform that helps you to detect and fix code quality issues in your
|
823 | code.
|
824 |
|
825 | **Automate code reviews on your commits and pull requests**
|
826 |
|
827 | Check your code quality and keep track of your technical debt for more than 40 programming languages. Seamlessly
|
828 | integrated within your development workflow.
|