Matteo Bruni for tsParticles

Posted on Jun 15, 2020 • Edited on Aug 13, 2022

tsParticles v1.16.0 released

#typescript #javascript #showdev #news

tsParticles v1.16.0

Release Notes

Added bubble mode to div events
Added type for div events, circle or rectangle are the values, it represent the div shape
Renamed elementId property in onDiv object to ids
div events now are more configurable, the onDiv property accepts a single object or an array of that object and the divEvent object supports ids property with single string or an array of strings
bubble and repulse modes have a new divs property which is a similar object (or an array of it), it has ids (string or array) instead of divs for configure custom configuration for each div.
particles move has a new property angle (degrees value) to configure the width of spread when it's not set to straight: true and random: false. Defaults to 90 which is the previous behaviour.
Two new collisions modes: absorb and destroy, the first merges two particles, the second one destroys the smaller one, if equal they will be destroyed both.
detectRetina is now true by default
noise is now a simpler object: only delay object and enable property are kept. Other properties have been removed for external noise management. You can now specify your own noise using the method setNoise on particles container.
All tsParticles packages (react-tsparticles, particles.vue, ng-particles, jquery-particles, preact-particles) are now part of this repository thanks to Lerna

Some Pens of the new features

Euro flags with Divs interaction

External Noise Generator

External Noise Generator with noise field drawn

tsParticles plugins

tsParticles supports customizations 🥳.

YOU CAN CREATE YOUR OWN SHAPES OR PRESETS

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

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