Bubbles

Bubbles element contains two children:
“Content” where you should put all of your content.
“Bubbles Wrapper” that contains all the Bubbles. You can remove and create new Bubbles right there.
So, display settings have to be set at “Content” as it is the element that will serve as the parent of your content, while dimensions, background, border… have to be set at “Bubbles” root element, that serves as the parent of “Content” and “Bubbles Wrapper”.
Bubbles controls are available at “Bubbles” root element and each of the Bubbles at “Bubbles Wrapper” have their own styling and animation controls.

Available at “Bubbles” root element.
Blur: Determines the general blur applied to bubbles (including cursor). This is the only shared setting by all bubbles. The rest of Bubble settings can be set at each Bubble. The demo uses 20.

Available at “Bubbles” root element.
Enable Cursor Bubble: if enabled, a Bubble will be attached to user’s cursor, colliding as well with the rest of the bubbles on mousemove. Cursor Bubble is available at Chrome, Edge, Brave and Opera browsers. Firefox and Safari don’t support the cursor animation so it won’t be included at them.
Attachment: a value of 1 will attach the Bubble to the cursor without delay. The bigger this value is the bigger the delay.
Dimensions: determines the width and height of the Cursor Bubble. The demo uses 100%.
Mix blend mode: determines the mix blend mode of the collisions. Learn more about CSS mix blend mode property here.
Opacity: determines the opacity of the Cursor Bubble. The demo uses 0.7.

Available at each “Bubble” element.
Top and Left: will determine the Bubble positioning regarding “Bubbles” root element.
Type: determines the path followed by the bubble at it’s position. There are 5 Bubble types: Vertical, Horizontal, Rotating–1, Rotating–2 and Rotating–3.
Speed: determines how fast the Bubble should move through the Bubbles root element. The bigger the slower.

– Tamu