tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
MIT License
Bot releases are hidden (Show)
Published by matteobruni 11 months ago
load
methods to keep only a single one using a single object
parametershape.image
, shape.polygon
, shape.stroke
particles section
, not in the shape
objectshape.options
object@tsparticles/angular
): https://github.com/tsparticles/angular
@tsparticles/astro
): https://github.com/tsparticles/astro
@tsparticles/ember
): https://github.com/tsparticles/ember
@tsparticles/inferno
): https://github.com/tsparticles/inferno
@tsparticles/jquery
): https://github.com/tsparticles/jquery
@tsparticles/lit
): https://github.com/tsparticles/lit (WIP)
@tsparticles/preact
): https://github.com/tsparticles/preact
@tsparticles/react
): https://github.com/tsparticles/react
@tsparticles/riot
): https://github.com/tsparticles/riot
@tsparticles/solid
): https://github.com/tsparticles/solid
@tsparticles/svelte
): https://github.com/tsparticles/
@tsparticles/vue2
): https://github.com/tsparticles/vue2
@tsparticles/vue3
): https://github.com/tsparticles/vue3
@tsparticles/webcomponents
): https://github.com/tsparticles/webcomponents
@tsparticles/wordpress
): https://github.com/tsparticles/wordpress
@tsparticles/preset-<name>
#3977)@tsparticles/
organization in the package name, replacing tsparticles-
prefix, except for tsparticles
package which will remain the same.@tsparticles/slim
bundle, only included in @tsparticles/all
.@tsparticles/slim
bundle, included in tsparticles
.@tsparticles/slim
bundle.Published by matteobruni almost 2 years ago
Published by matteobruni almost 2 years ago
Published by matteobruni almost 2 years ago
reset
method to updaters, this method will be called after a particle loses a life.fullScreen
option is enabled (default behavior)aria-hidden="true"
to canvas element, fixes #4785absorb.speed
option to collisions
sectionrgb()
, hsl()
and hsv()
values in color option valuesinitAsync
function from plugins, standard init
is now async for all pluginstsparticles
package, this is a breaking change only for those that are using it. Since it's a heavy plugin and not so much used, I have preferred removing it from the tsparticles
package.Published by matteobruni about 2 years ago
bounds
to particles.destroy
options, if the particle is outside one of the bounds the particle will be destroyedsmooth
to the options, it uses the fpsLimit
field as a reference value trying to create a smoother animation on the provided fps value.canvasMask
plugin, it uses a canvas, an image or a text for positioning particles in the canvas, closes #4492With the new smooth
option enabled the animation will be affected by the fps on the user's PC, so be careful. Higher fps, higher speed, lower fps, lower speed ⚠️.
Some examples:
- with a fpsLimit
of 60
the animation will be twice faster on 120
fps devices
- with a fpsLimit
of 120
the animation will be twice slower on 60
fps devices
The animation will be always smooth, but the behavior could be affected by the user screen refresh rate.
It's recommended to keep this disabled, be careful enabling this.
Published by matteobruni about 2 years ago
Published by matteobruni about 2 years ago
getRandom
and setRandom
functions for customizing all the random behaviors, it's recommended to use the getRandom
function instead of Math.random
when writing plugins, so the randomness can be customized as expectedactive
from slow
interactivity mode object, it was obsolete, small breaking change but the engine will be a bit smallerPublished by matteobruni about 2 years ago
Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
Starting from version 2.0.0
, tsparticles
won't be a single package anymore. Its growth makes me think a lot about splitting the project in more packages.
The new structure will be a common engine and lot of packages with single features that can be installed and loaded, so everyone can install only the features they need, and for the lazy ones there are bundles and presets ready to be used.
For example, if you want to stick with the tsparticles
library you can still install it, and use the bundle file with the CDN. You can easily set it up when using import
or require
, since you have to add few lines of code to the v1
configuration.
import { tsParticles } from "tsparticles-engine"; // this is the new common package
import { loadFull } from "tsparticles"; // this function loads all the features contained in v1 package
(async () => {
await loadFull(tsParticles); // this is needed to load all the features and can be done everywhere before using tsParticles.load
await tsParticles.load("tsparticles", { /* options */ }); // this must be done after loadFull
})();
package.json
file, that's why presets will be more important now.outside
and inside
values to particles move direction optionsoutside
and inside
values to particles move out modes optionsv1
to v2
?Version 1.x
is still the latest
tag on npm
, but the next
version has a 2.0.0
version, which is something I need to release to the public to find issues, and receive some feedbacks.
Just change the tsparticles
file from tsparticles.min.js
to tsparticles.bundle.min.js
, if the slim
version is used, there's a bundle also there but it's a different package, now called tsparticles-slim
.
"tsparticles-engine"
using the next
tag like this: npm install tsparticles-engine@next
"tsparticles"
imports to "tsparticles-engine"
import { loadFull } from "tsparticles";
in the imports, or its RequireJS version. This requires the new 2.0.x
version, you can install it using npm install tsparticles@next
loadFull
particlesInit/init
property, passing the same parameter coming from the init
function to loadFull
loadFull(tsParticles)
before any tsParticles
usageUsing the bundled version of the tsparticles
package is not optimal, it's easier to implement but it could load a lot of unnecessary stuff.
I want to take the following code as an example (it's the core of tsparticles-slim
package)
import type { Engine } from "tsparticles-engine";
import { loadAngleUpdater } from "tsparticles-updater-angle";
import { loadBaseMover } from "tsparticles-move-base";
import { loadCircleShape } from "tsparticles-shape-circle";
import { loadColorUpdater } from "tsparticles-updater-color";
import { loadExternalAttractInteraction } from "tsparticles-interaction-external-attract";
import { loadExternalBounceInteraction } from "tsparticles-interaction-external-bounce";
import { loadExternalBubbleInteraction } from "tsparticles-interaction-external-bubble";
import { loadExternalConnectInteraction } from "tsparticles-interaction-external-connect";
import { loadExternalGrabInteraction } from "tsparticles-interaction-external-grab";
import { loadExternalPauseInteraction } from "tsparticles-interaction-external-pause";
import { loadExternalPushInteraction } from "tsparticles-interaction-external-push";
import { loadExternalRemoveInteraction } from "tsparticles-interaction-external-remove";
import { loadExternalRepulseInteraction } from "tsparticles-interaction-external-repulse";
import { loadImageShape } from "tsparticles-shape-image";
import { loadLifeUpdater } from "tsparticles-updater-life";
import { loadLineShape } from "tsparticles-shape-line";
import { loadOpacityUpdater } from "tsparticles-updater-opacity";
import { loadOutModesUpdater } from "tsparticles-updater-out-modes";
import { loadParallaxMover } from "tsparticles-move-parallax";
import { loadParticlesAttractInteraction } from "tsparticles-interaction-particles-attract";
import { loadParticlesCollisionsInteraction } from "tsparticles-interaction-particles-collisions";
import { loadParticlesLinksInteraction } from "tsparticles-interaction-particles-links";
import { loadPolygonShape } from "tsparticles-shape-polygon";
import { loadSizeUpdater } from "tsparticles-updater-size";
import { loadSquareShape } from "tsparticles-shape-square";
import { loadStarShape } from "tsparticles-shape-star";
import { loadStrokeColorUpdater } from "tsparticles-updater-stroke-color";
import { loadTextShape } from "tsparticles-shape-text";
export async function loadSlim(engine: Engine): Promise<void> {
await loadBaseMover(engine);
await loadParallaxMover(engine);
await loadExternalAttractInteraction(engine);
await loadExternalBounceInteraction(engine);
await loadExternalBubbleInteraction(engine);
await loadExternalConnectInteraction(engine);
await loadExternalGrabInteraction(engine);
await loadExternalPauseInteraction(engine);
await loadExternalPushInteraction(engine);
await loadExternalRemoveInteraction(engine);
await loadExternalRepulseInteraction(engine);
await loadParticlesAttractInteraction(engine);
await loadParticlesCollisionsInteraction(engine);
await loadParticlesLinksInteraction(engine);
await loadCircleShape(engine);
await loadImageShape(engine);
await loadLineShape(engine);
await loadPolygonShape(engine);
await loadSquareShape(engine);
await loadStarShape(engine);
await loadTextShape(engine);
await loadLifeUpdater(engine);
await loadOpacityUpdater(engine);
await loadSizeUpdater(engine);
await loadAngleUpdater(engine);
await loadColorUpdater(engine);
await loadStrokeColorUpdater(engine);
await loadOutModesUpdater(engine);
}
Splitting things can be a long activity using <script>
tags, but nothing impossible.
From the example above, every package needs its own <script>
tag, and every load
function needs to be called using tsParticles
as a parameter, then use the tsParticles
object as always.
The tsparticles-engine
must be always present, if there are no bundles (tsparticles-slim
, tsparticles
or any bundled preset). Every other package is required only if you want to use that feature.
Let's see an example:
https://codepen.io/matteobruni/pen/zYPEbjx
As you can see, in the JS options there are the needed scripts, and before using tsParticles.load
their functions are called to load everything correctly. Every load
function is async
, so it's a Promise that can be awaited, it's not always necessary (like in this case), but it's recommended.
In this case importing modules is easier, since every module can be installed easily using npm
, yarn
or pnpm
.
Once installed the required packages, import them and the code used for "Vanilla JS / HTML Usage"
works also here.
The module sample can be found here:
https://codesandbox.io/s/immutable-cookies-n2lm9p
Every component has a init
or particlesInit
(checkout the documentation until everything has the same attribute), that is the place to load all the components, that function has an engine
attribute, which is the tsParticles
instance used by the component.
React Sample
https://codesandbox.io/s/optimistic-http-mxz8bg
Vue.js 2.x Sample
https://codesandbox.io/s/eager-wildflower-co03th>
Vue.js 3.x Sample
https://codesandbox.io/s/angry-hellman-xv6ifv
Angular Sample
Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
canvas.clear
closer to draw
breaks grab links, and maybe other interactionsPublished by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
New numeric values are now randomizable, using the { min, max }
object instead of the numeric value. The list of the new randomizable options are:
particles.move.attract.distance
particles.move.angle.offset
particles.move.angle.value
particles.orbit.opacity
particles.orbit.radius
particles.orbit.width
particles.repulse.distance
particles.repulse.duration
particles.repulse.factor
particles.repulse.speed
particles.roll.darken.value
particles.roll.enlighten.value
particles.rotate.animation.speed
particles.tilt.animation.speed
particles.twinkle.lines.opacity
particles.twinkle.particles.opacity
These are the core options, also every animation object now can have randomizable count
and speed
properties.
Absorbers and Emitters plugin options now have randomizable coordinates, the { min, max }
can be set to their position.x
and position.y
values instead of a single numeric.
Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
particles.vue3
particlesLoaded
propertyng-particles
to Angular 13