tsParticles v1.15.0
Release notes
New features
- Interactivity
grab
mode now has a linecolor
option - Particles and link lines have a
warp
option, Particles will maintain the same coordinates inout
mode and lines will link beyond canvas borders - Particles
color
now has ananimation
section like the one onangle
,opacity
andsize
. It will animate the particles color. - Added click mode
pause
to play/pause animations when the click event occurs. - Added
triangles
options tolinks
to fill the triangles between lines,color
andopacity
customizable - Added
id
propery tolinks
to create links between particles with the same id - PolygonMask now has a new property
data
to work with, where you can specify a string with the SVG to use (well formatted, namespaces included) or an object with paths (array or single string, just the data, not the tag) and size
Changes
- Renamed
lineLinked
inlinks
inparticles
,interactivity.modes.connect
andinteractivity.modes.grab
, it's still supported the old syntax - Container
particles.addParticle
now it's an easier method, it has two parameters:position
({ x: 0, y: 0 }
for example) andoverrideOptions
(the same object specified inparticles
options). This method will add a new particle in that position if notundefined
and with that options if notundefined
- Fixed a bug with
links
color used in override options (emitters, custom particles, etc...) - Improved bubble mode interoperability with other modes
- Star shape improved with new draw method and another additional option called
inset
to specify the inset length.
Some Pens of the new features
Simplified addParticle
method
Links with triangles filled
Color animations
Warp out mode
Click play/pause mode
Preset repositories
- https://github.com/matteobruni/tsparticles-preset-60fps
- https://github.com/matteobruni/tsparticles-preset-backgroundMask
- https://github.com/matteobruni/tsparticles-preset-basic
- https://github.com/matteobruni/tsparticles-preset-bouncing
- https://github.com/matteobruni/tsparticles-preset-fire
- https://github.com/matteobruni/tsparticles-preset-fontAwesome
- https://github.com/matteobruni/tsparticles-preset-snow
- https://github.com/matteobruni/tsparticles-preset-stars
Shape repositories
- https://github.com/matteobruni/tsparticles-shape-spiral
- https://github.com/matteobruni/tsparticles-shape-heart
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
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 (0)