Table of Content
Enable Particle Effects
The Particles Effect can be enabled for each of your Module’s Slides.
Particle Effects Library
Select a preset from the Particles Effects Library to load its settings.
The if you’ve adjusted the settings and want to save them for usage on another Slide or Module, you can save your settings as your own custom template.
The new custom template will be listed in the “Custom Presets” section, where its name can be changed, settings overridden or deleted.
1. Particle Icon
Select one or more icons to display in the effect.
2. SVG Library
Select from 900+ icons to use in the effect.
3. Number of Particles
The maximum number of particles to display at any given time.
4. Particle Size
The size of each particle in pixels.
5. Random Sizes
Randomize the particle sizes.
6. Minimum Size
The minimum size for randomized sizes.
7. Disable on Mobile
Disable the effect on mobile devices.
Set a custom CSS z-index for the particle’s HTML Canvas element.
2. Particle Colors
Select one or multiple colors for the particles. Multiple colors will be alternated between particles.
The transparency level of the particles (0-100).
4. Random Opacity
Randomize the transparency for each particle.
5. Minimum Opacity
The minimum opacity to apply when the opacity is randomized.
6. Borders & Strokes
Add borders and strokes to the particle SVGs.
7. Border Colors
Choose one or more colors for the border/stroke. Multiple colors will be alternated between particles.
8. Border Size
The “stroke-width” for the particle’s SVGs.
9. Border Opacity
A transparency level for the SVG’s border (0-100).
10. Connected Lines
Connect each particle with lines, creating a spider-web type visual.
11. Connected Line Colors
Choose one or more colors for hte connected lines. Multiple colors will be alternated between particles.
12. Connected Line Width
The size of the line in pixels.
13. Connected Line Opacity
The transparency level of the connected lines (0-100).
14. Distance Between Particles
The amount of space that needs to exist before a two particles are connected with lines.
1. Particle Movement
Most of the time you will want your particles to move for the effect, but they can also appear as a static image if this option is disabled.
The speed at which the particles move.
3. Varying Speed
Randomize the speed at which the particles move.
4. Min. Speed
The minimum speed the particles will move if the movement is randomized.
Choose if the particles should disappear when they reach the module’s bounding box, or if they should “bounce” off the walls and continue to move in another direction.
Particles can move in a linear direction (up, down, top-right, etc.) or move in a random direction.
Users can interact with the Particles on mouse-hover and click. “Repulse”, “Grab” and “Bubble” are available for mouse-hovers and “Repulse” and “Bubble” for clicks. Give each a try to see what type of user-interaction effects are best suited for your project.
1. Repulse Distance
The distance at which the particles will jump to in random directions away from the mouse.
2. Repulse Easing
The strength at which the particles will move. For example, if “100” is entered, particles will start to move at a speed of “100” and then the speed will gradually be reduced to zero as the repulse effect takes place.
1. Grab Distance
The maximum distance the particles need to be from the mouse before the connected lines are drawn.
2. Grab Opacity
The opacity level for the connected lines when the grab effect takes place.
1. Bubble Distance
The maximum distance the particles need to be from the mouse before the particles are scaled.
2. Bubble Size
The maximum size in pixels the particles will scale to.
3. Bubble Opacity
The transparency level of the scaled particles.
1. Animate Particle Size
Choose to continuously animate the particles size.
The speed in milliseconds the particle’s size will animate.
3. Minimum Size
The smallest size in pixels the particles will animate to.
Enable this option to animate all particles size at the same time (otherwise they will animate randomly).
5. Animate Particle Opacity
Choose to continuously animate the particles transparency levels.
The speed in milliseconds the particle’s opacity will animate.
7. Minimum Opacity
The lowest opacity level the particles will animate to.
Enable this option to animate the opacity level of all particles at the same time (otherwise they will animate randomly).