DEV Community

Cover image for tsParticles 1.18.0 released
Matteo Bruni for tsParticles

Posted on • Updated on

tsParticles 1.18.0 released

tsParticles 1.18.0

Release Notes

New Features

  • Manual Particles (closes #839)
  • Links and Triangles frequency (closes #691)
  • Mouse hover can act as a light source (closes #606)
  • Particles duplicates can be reduced (closes #437)
  • Options have now a dedicated GUI editor library (closes #534)
  • Theming options (closes #646)
  • Added support to HSV colors (closes #692)
  • OutMode can be configured for every canvas edge (closes #739)
  • Bounce interaction mode; divs and mouse hover have this mode (closes #774)
  • Particles can have a max radius to move inside (closes #797)
  • Particles movement can be affected by the size, the higher the size, the higher the speed
  • Particles movement has now gravity options
  • Particles can have a custom life span and a life count, like the emitter options
  • Particles can now configure bounces on canvas edge and for particles collisions
  • New Motion settings for prefer-reduced-motion users, it can reduce or disable animations

Bug Fixes

  • Single exported options type, used by all components (closes #898)
  • Fixed click bubble mode (closes #618)

Breaking Changes

  • Color animation with sync false in 1.17.0 used a random color instead of a random speed. This is fixed in 1.18.0 but you need to use the random value in color and not sync: false to achieve the same effect.

Some Pens of the new features

Div Bounce

Fireworks effect

Water Fountain

Fountain effect

Switchable themes

Lifespan Options

Mouse Hover light source

Related projects


If you want to use tsParticles with jQuery checkout this repository


If you want to use tsParticles with VueJS checkout this repository


If you want to use tsParticles with ReactJS checkout this repository

3rd Party

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


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:

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

You're in the right place!

GitHub repo





Feel free to contribute to the project!


Here are some demos!

Black hole with orbiting particles

Particles direction-aware - Planes sample

Mouse moving Particles trail

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


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


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


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


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


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

Top comments (3)

thedevdavid profile image

Omg. Opening this, makes my Macbook fans go brrrrr

rowemore profile image
Rowe Morehouse

With all those embeds, are you trying to crash my browser, or what? ;)

matteobruni profile image
Matteo Bruni

It鈥檚 not even my final form :P