tsParticles 1.18.0 released
Tags: news, showdev, javascript, typescript
Published: 2020-10-06 07:19:00

# 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

{% codepen https://codepen.io/matteobruni/pen/YzqmxGP %}

### Fireworks effect

{% codepen https://codepen.io/matteobruni/pen/PoNmejJ %}

### Water Fountain

{% codepen https://codepen.io/matteobruni/pen/LYNxdBG %}

### Fountain effect

{% codepen https://codepen.io/matteobruni/pen/yLOgLEZ %}

### Switchable themes

{% codepen https://codepen.io/matteobruni/pen/rNeOaWP %}

### Lifespan Options

{% codepen https://codepen.io/matteobruni/pen/ZEWbYzj %}

### Mouse Hover light source

{% codepen https://codepen.io/matteobruni/pen/YzqXwRr %}

---

### Related projects

#### jQuery

If you want to use tsParticles with jQuery checkout [this repository](https://github.com/matteobruni/jquery-particles)

#### VueJS

If you want to use tsParticles with VueJS checkout [this repository](https://github.com/matteobruni/particles.vue)

#### ReactJS

If you want to use tsParticles with ReactJS checkout [this repository](https://github.com/matteobruni/react-tsparticles)

##### 3rd Party

A 3rd-party component is available too, read more [here](https://github.com/Wufe/react-particles-js)

#### Preact

If you want to use tsParticles with Preact checkout [this repository](https://github.com/matteobruni/preact-particles)

#### Angular CLI

If you want to use tsParticles with Angular CLI (actually v9) checkout [this repository](https://github.com/matteobruni/ng-particles)

---

## 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!

### Black hole with orbiting particles

{% codepen https://codepen.io/matteobruni/pen/oNbWrmd %}

---

### Particles direction-aware - Planes sample

{% codepen https://codepen.io/matteobruni/pen/gOPmxNW %}

---

### Mouse moving Particles trail

{% codepen https://codepen.io/matteobruni/pen/abdpbBY %}

### Custom Presets

{% codepen https://codepen.io/matteobruni/pen/ExjJmXX %}

*watch the code for creating custom presets*

### Custom Shapes

{% codepen https://codepen.io/matteobruni/pen/vYOMmGr %}

*watch the code for creating custom shapes*

### Characters as particles

{% codepen https://codepen.io/matteobruni/pen/xxGdyjd %}

#### FontAwesome characters as particles:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

### Mouse hover connections

{% codepen https://codepen.io/matteobruni/pen/GRJMgBp %}

---

### Polygon mask

{% codepen https://codepen.io/matteobruni/pen/yLNpgKW %}

---

### Background Mask particles

{% codepen https://codepen.io/matteobruni/pen/WNvYKgW %}

---

### Polygon Mask with multiple paths

This polygon has 4 paths

{% codepen https://codepen.io/matteobruni/pen/MWaePMa %}

---

### Emitters

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

{% codepen https://codepen.io/matteobruni/pen/VwvPLMe %}

---

### Absorbers

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

{% codepen https://codepen.io/matteobruni/pen/eYpgxQx %}

---

### Collisions

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

{% codepen https://codepen.io/matteobruni/pen/YzyZzGZ %}

---

### Twinkle effect

Particles twinkling

{% codepen https://codepen.io/matteobruni/pen/jObBaqv %}

---

### Noise trails

{% codepen https://codepen.io/matteobruni/pen/vYNJPPL %}

---

### Infection

{% codepen https://codepen.io/matteobruni/pen/abvLoOB %}

---

### Growing particles

{% codepen https://codepen.io/matteobruni/pen/MWavNox %}

---

### Simplified `addParticle` method

{% codepen https://codepen.io/matteobruni/pen/GRpYdGv %}

---

### Links with triangles filled

{% codepen https://codepen.io/matteobruni/pen/WNQgXJZ %}

---

### Color animations

{% codepen https://codepen.io/matteobruni/pen/gOajEQW %}

---

### Warp out mode

{% codepen https://codepen.io/matteobruni/pen/vYNovQW %}

---

### Click play/pause mode

{% codepen https://codepen.io/matteobruni/pen/vYNovvW %}

---

### Euro flags with Divs interaction

{% codepen https://codepen.io/matteobruni/pen/MWKyJez %}

---

### External Noise Generator

{% codepen https://codepen.io/matteobruni/pen/MWKaRYy %}

---

### External Noise Generator with noise field drawn

{% codepen https://codepen.io/matteobruni/pen/rNxOPzQ %}

---

### COVID-19 SARS-CoV-2 particles

{% codepen https://codepen.io/matteobruni/pen/dyoZbMb %}

**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*