tsParticles v1.17.0 released

tsParticles 1.17.0

Release Notes

tsparticles

• Added path property to particles.rotate options to rotate the particle following its path, defaults to false
• Added trail mode for mouse interactivity (click and hover) to create a particle trail while moving or dragging the mouse
• Added attract click/hover mode to attract particles to mouse position
• Added draggable option to absorbers to make them draggable, defaults to false
• Fixed color un-sync animation start value
• Stroke color can now be animated like the (fill) color
• setOnClickHandler function has an additional parameter containing clicked particles

react-tsparticles

• Added two create-react-app templates: cra-template-particles and cra-template-particles-typescript
• Renamed params to options, the old property is still supported

preact-particles

• Renamed params to options, the old property is still supported

particles.vue

• Changed version to 2.0.0 for breaking changes
• The component uses a single options attribute containing the particles config, like in all the other components
• The component now is initialised with Vue.use because it has a plugin now

ng-particles

• Changed version to 2.0.0 for breaking changes
• The component now uses <Particles /> tag instead of <ng-particles />

svelte-particles

• Created Svelte component

---

Some Pens of the new features

Black hole with orbiting particles

---

Particles direction-aware - Planes sample

---

Mouse moving Particles trail

---

Related projects

jQuery

If you want to use tsParticles with jQuery checkout this repository

VueJS

If you want to use tsParticles with VueJS checkout this repository

ReactJS

If you want to use tsParticles with ReactJS checkout this repository

3rd Party

A 3rd-party component is available too, read more here

Preact

If you want to use tsParticles with Preact checkout this repository

Angular CLI

If you want to use tsParticles with Angular CLI (actually v9) checkout this repository

---

Useful links

Checkout the demos here: https://particles.matteobruni.it

Do you want to replace the old, outdated and abandoned particles.js?

You're in the right place!

---

GitHub repo

https://github.com/matteobruni/tsparticles

npm

https://www.npmjs.com/package/tsparticles

yarn

https://yarnpkg.com/package/tsparticles

jsDelivr

https://www.jsdelivr.com/package/npm/tsparticles

CDNJS

https://cdnjs.com/libraries/tsparticles

---

Feel free to contribute to the project!

---

Demos

Here are some demos!

Custom Presets

watch the code for creating custom presets

Custom Shapes

watch the code for creating custom shapes

Characters as particles

FontAwesome characters as particles:

---

Mouse hover connections

---

Polygon mask

---

Background Mask particles

---

Polygon Mask with multiple paths

This polygon has 4 paths

---

Emitters

This login background is made with particles emitters, cool isn't it?

---

Absorbers

Have you ever wanted a black hole? Here's yours!

---

Collisions

The collisions in the previous releases, and in Particles.js too, were horrible. Now they're fixed and they look good. Finally!

---

Twinkle effect

Particles twinkling

---

Noise trails

---

Infection

---

Growing particles

---

Simplified addParticle method

---

Links with triangles filled

---

Color animations

---

Warp out mode

---

Click play/pause mode

---

Euro flags with Divs interaction

---

External Noise Generator

---

External Noise Generator with noise field drawn

---

COVID-19 SARS-CoV-2 particles

Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!

COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME