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-motionusers, 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
syncfalse 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 therandomvalue in color and notsync: falseto 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
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!
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
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
Top comments (3)
Omg. Opening this, makes my Macbook fans go brrrrr
With all those embeds, are you trying to crash my browser, or what? ;)
It’s not even my final form :P