GCS Studios
Interactive Particle Effects
Create dynamic particle systems that react to cursor movement, clicks, and user interactions in real time.
Why use this?
Built for what Bubble does not cover.
Bubble's background styling stops at a flat color, an image or a static gradient. A hover condition can swap one of those, but nothing follows the cursor, answers a click or keeps moving on its own.
An ambient or interactive layer like this takes custom code: a canvas to draw on, a loop to animate it, and the cleanup that keeps a second canvas from piling up every time the page updates.
Key features 6
Full Visual Customization
Customize particle color, size, opacity, speed, and shapes to perfectly match your UI style and branding.
Particle Connections
Generate beautiful connections between particles with configurable line distance, linking behavior, and network effects.
Mouse Interaction Modes
Particles can attract, repel, connect, or react dynamically to cursor movement and clicks.
Cross-Device Support
Particles adapt smoothly across desktop and mobile devices, maintaining a consistent visual experience.
Fast & Lightweight
Optimized particle rendering ensures smooth animations with minimal impact on performance.
In detail
Particles You Shape
- Six shapes, including polygons with a configurable number of sides and your own image
- Count set directly or by density over an area, so the effect holds on any screen size
- Size, opacity and stroke with their own color, width and random variation
- Independent size and opacity animations, each with its own speed
Motion and Connections
- Nine movement directions, with random direction and straight or free paths
- Attraction toward a point, with the pull adjustable on each axis
- Lines connecting nearby particles, with distance, color, opacity and width of their own
Interactive by Pointer
- Three hover modes: grab, bubble and repulse
- Four click modes: bubble, repulse, push and remove
- Each mode with its own distance, size, opacity, duration and speed
Fully Customizable
- 40+ properties, grouped in sections by what they affect
- Attaches to any element with an ID, filling it without changing your layout
- Several instances run independently on the same page
Reliable & Production-Ready
- Built with lightweight CSS and JavaScript for fast, reliable performance
- Designed around practical use cases and real Bubble development needs
- Tested in real-world applications before being released publicly
- Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer
How to use 4
-
01
Enable the option to set an ID
In the Bubble editor, go to the tab "Settings > General > Advanced options" and check the box "Expose the option to add an ID attribute to HTML elements".
-
02
Identify the target element
Set an ID to the target element.
To prevent compatibility issues, avoid starting IDs with numbers or symbols. Start with letters and use hyphens or underscores if needed.
-
03
Insert the plugin element anywhere on the page
Insert the plugin element anywhere on the page and ensure it is always visible.
In Bubble, any element-type plugin must be visible to work properly.
-
04
Provide the ID and set the plugin properties as desired
In the plugin element, provide the ID assigned to the target element (in step 2) and set the other plugin properties according to your needs.
TARGET ELEMENT 1
Element ID
Provide the ID that was assigned to the target element (where the particle effect will be rendered).
PARTICLES 4
Quantity
Sets the number of particles rendered on the screen.
This is a performance budget, not a style choice. With Enable density turned off, 50 to 200 particles is the comfortable range; a very high count can slow the page down and, depending on the device, crash the browser.
Enable density?
Enables particle density adjustment based on the area size.
With density enabled, the total is no longer a fixed count: it is calculated from the number of particles per density area, so the same Quantity renders more or fewer particles depending on the area you set.
Density area
Sets the area used to calculate particle density (increasing the area reduces the density).
A smaller area means more particles rendered. Keep the ratio between Quantity and Density area between 0.05 and 0.15, and avoid a very small area with a high quantity: that combination can slow the page down and crash the browser on weaker devices.
Particle color
Sets the color of the particles.
SHAPE 7
Shape type
Sets the particle shape type.
Shape stroke width
Sets the stroke width (in pixels) applied to particle shapes.
Shape stroke color
Sets the color of the stroke applied to particle shapes.
Polygon
Polygon sides
Sets the number of sides when using polygon-shaped particles
Image
Image URL
Sets the image source URL when using image-based particles.
Image width
Sets the image width (in pixels) when using image-based particles.
This is the original width of the image used by the particle. The size actually drawn on screen is controlled by Particle size.
Image height
Sets the image height (in pixels) when using image-based particles.
This is the original height of the image used by the particle. The size actually drawn on screen is controlled by Particle size.
OPACITY 3
Opacity
Sets the base opacity of particles (0 - 1).
Random opacity?
Enables random opacity variation per particle.
Opacity animation?
Enables opacity animation over time.
SIZE 4
Particle size
Sets the base radius (in pixels) of each particle.
Random size?
Enables random size variation per particle.
Size animation?
Enables size animation over time.
Size animation speed
Sets the rate at which particle size changes during the size animation.
LINKED LINES 5
Enable linked line?
Enables lines connecting nearby particles.
Line distance
Sets the maximum distance (in pixels) between two particles for a line to be drawn connecting them.
Line color
Sets the color of the lines connecting nearby particles.
Line opacity
Sets the opacity of the connecting lines (0 - 1).
Line width
Sets the width (in pixels) of the connecting lines.
MOTION 8
Enable move?
Enables particle movement.
Move direction
Sets the movement direction of particles.
Random direction?
Adds randomness to particle movement, reducing directional uniformity.
Move straight?
Forces particles to move in straight lines.
Move speed
Sets the movement speed of particles.
Attract effect?
Enables attraction-based particle movement.
Attraction (x axis)
Sets the horizontal attraction strength.
Attraction (y axis)
Sets the vertical attraction strength.
INTERACTION 4
Interaction on hover?
Enables particle interaction when the cursor moves over the detection area.
Hover mode
Sets the interaction behavior triggered on hover.
Interaction on click?
Enables particle interaction when the user clicks within the detection area.
Click mode
Sets the interaction behavior triggered on click.
INTERACTION MODES 11
Grab mode (over only)
Grab distance
Sets the maximum distance (in pixels) for the grab interaction, where particles connect to the cursor with lines.
Grab line opacity
Sets the opacity of the lines drawn between the cursor and nearby particles during the grab interaction (0 - 1).
Bubble mode
Bubble distance
Sets the maximum distance (in pixels) from the cursor where particles will react to the bubble effect.
Bubble size
Sets the particle size (in pixels) applied during the bubble interaction.
Bubble opacity
Sets the particle opacity during the bubble interaction (0 - 1).
Bubble duration
Sets how long (in seconds) the bubble effect lasts after being triggered.
Bubble speed
Sets how quickly particles transition into and out of the bubble effect.
Repulse mode
Repulse distance
Sets the distance (in pixels) that particles move away from the cursor during the repulse interaction.
Repulse duration
Sets how long (in seconds) the repulse interaction lasts when particles are pushed away by the cursor.
Push mode (click only)
Push particles qty
Sets the number of particles added when the push interaction is triggered.
Remove mode (click only)
Remove particles qty
Sets the number of particles removed when the remove interaction is triggered.
FAQ 5
Why use Reactive Particles?
Modern interfaces benefit from subtle motion and visual depth. Reactive particle effects create engaging backgrounds and dynamic visuals that respond to user interaction, helping interfaces feel more alive and immersive.
Is any specific or advanced knowledge required to use the plugin?
No. The plugin is designed to be simple and straightforward. You only need to place the element on the page and configure the particle properties in the editor.
Will particle animations affect performance?
That will depend on your settings. The default settings already ensure good performance, but you can check the documentation to find out how to configure it properly for your use case.
Does it work on mobile devices?
Yes. The particle system adapts to different screen sizes and works smoothly on both desktop and mobile devices.
The particles are not appearing. What should I check?
Make sure the plugin element is visible on the page, that the ID set in the target element is correct and was provided to the plugin element, that the number of particles is greater than zero, that the particle color is not transparent, that a polygon shape has at least three sides configured, that particle opacity is greater than zero, and that particle size is not set to zero.
NWD UI - Effect
This plugin is maintained by GCS Studios and is part of the NWD UI - Effect family, plugins that add visual output an element did not have, without replacing it. Each one attaches to something already on your page and draws on top of it, with no layout to redo, and is tested in real applications before release. See more plugins on the GCS Studios contributor page.