Particles

How it works

Particles is a nestable widget. You can put any content inside by using the Content repeater control: custom code, templates, global widgets and shortcodes.

Particles

Number: The amount of particles to generate.
Enable density: If enabled, it enables the density calculation for particle distribution. This means that the number of particles will adapt based on the size of the canvas, ensuring a consistent density of particles regardless of the canvas dimensions.
Density value area: defines the area in which the density is calculated. It is measured in pixels. The larger this value, the more spread out the particles will be. Essentially, it controls how many particles are present per unit area of the canvas.

Particle style

Color
Stroke width
Stroke color

Shape

Determines the shape the particles will take. They can be combined at pleasure. There are 6 types: circles, edges, triangles, stars, polygons and image.

Opacity

Determines the opacity of the particles.
If random is enabled, opacity will be assigned from 0 to the opacity value set randomly to each particle.
If animation is enabled, opacity will be animating constantly from 0 to the opacity value set.

Size

Determines the size of the particles.
If random is enabled, size will be assigned from 0.25 to the size value set randomly to each particle.
If animation is enabled, size will be animating constantly from 0.25 to the size value set.

Line linked

If enabled a line animation will be set linking particles when colliding. You can customize its styles and the distance collision.

Move

If enabled, particles will be moving constantly at the canvas. There are many controls to customize the movement animation.
Speed: determines the movement duration.
Move direction: if there is a direction the particles should follow instead of moving randomly.
Move out: out or bounce. If bounce, particles will collide with the walls instead of going out.
Enable attract: if enabled, particles will attract with each other when moving, modifying their directions.

Interactivity

Enable hover: if enabled, an animation can be selected to occur when a particle is hovered. Animations available: repulse, grab and bubble.
Enable click: if enabled, an animation can be selected to occur when a particle is hovered. Animations available: push, remove, bubble and repulse.

All of the animations can be customized at their sections: speed, distance, number and much more.
Customizations will be shared at both click and hover, so customizing repulse will modify it at hover and click.