This widget offers a modern, eye-catching particle effect. It can be used as a background, foreground, or constrained as needed. In addition to looking good, the particles are fully interactive.
Extensive customization options make this widget massively versatile. Full control of display and interactivity allow you to present anything from mild to wild.
Compatibility: Muse 2018.1
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial Release
Setup
WIDGET PLACEMENT IN MUSE
Drop the Particles widget onto your page. Place the widget where you would like the effect to appear. Resize the widget to cover the intended space.
If you want the effect to cover the entire width of the browser, select "Stretch to browser width" in the resize menu.
This widget is compatible with layers in Muse, and Muse elements may be placed on top. If you wish to have text or images appear on top of it, place them on top as normal in the Muse Design area.
WIDGET OPTIONS
Many of the options in the option panel are labeled with their exact function, and no further explanation is needed. Only the options that require further explanation will be covered below.
Open the widget option panel.
Breakpoint Mode: These options allow the widget to work properly with Muse breakpoints. It is very important to set this accurately.
No Breakpoints: Use this option if your page has no breakpoints.
Normal Breakpoint: Use this option if your site uses fixed breakpoints.
Responsive Breakpoint: Use this option if your site uses fluid breakpoints.
Background Color: This color setting applies to the background of the widget only. This means that wherever you place the widget, that space will have a background color. You may also select a transparent background, which will allow the page background to be seen under the particle effects.
Particle Speed: This is the overall speed of the movement of the particles.
Particle Path Mode: This setting determines the path mode of the particles. "Exit Screen" allows the particles and shapes to move outside of the screen. "Bounce off edges" allows the particles to bounce off the edges of the browser window.
Bounce Between Particles: This toggle allows the particles or shapes bounce when they collide.
You will see mentions of "shapes" and "particles" in the widget options. Shapes always refer to specific shapes that can be applied to the particle effect, such as circles, squares, triangles and stars
Shape Type: There are several shapes that can be applied to the particles. Our live demo uses circles with randomized sizes and opacity. Note that the Polygon setting will not apply a shape like the other options. Only the lines will be seen.
Particle Size: This setting applies uniform sizing to the particles.
Randomize Particle Sizes / Particle Minimum Size: These settings work together, along with the Particle Size setting. When Randomize Particle Sizes is toggled on, particle sizes will be randomized within the range of the values set for Particle Size and Particle Minimum Size.
Animate Particles: This toggle applies animation to the particles. When animated, particles change in size and opacity.
Shape Stroke Width / Shape Stroke Color: Use these settings to apply a border to the particle shapes.
Shape Opacity: This setting applies a uniform opacity to the shapes (circles, edge, triangles, stars)
Randomize Shape Opacity / Shape Minimum Opacity: These settings work together, along with the Shape Opacity setting. When Randomize Shape Opacity is toggled on, shape opacity will be randomized within the range of the values set for Shape Opacity and Shape Minimum Opacity.
Display Linking Lines: This toggle enables the lines that link the shapes. If you wish to display the shapes only, disable this option. The remaining options in this section apply styling to the linking lines.
Interactivity Settings Section: Site visitors may interact with the effect when these options are toggled on. It is possible to interact with the particles by hovering, clicking, or both. There are several interactivity modes, with options for both hover and click. The hover modes in particular allow for setting-specific customization with the other options seen in this section.