New

9 buttons. Ready to use.

Fluid Ring Configurator - BricksFusion
data-fluid-ring
How to Use & Code Information
  1. Customize your fluid ring animation using the controls below
  2. Click Copy JS to copy the JavaScript code to clipboard
  3. In Bricks Builder, add a Code element
  4. Paste or upload the JavaScript code
  5. To add the effect to any section: go to Section → Style → Attributes, add data-fluid-ring as attribute name (leave value empty)
Interactive Fluid Ring Preview
Primary Color
HEX
HSL
Variation Strength
5.0
Animation Settings
Animation Speed
1.0x
Ring Radius
0.35
Ring Width
0.035
Intensity
1.0
Advanced Options
Performance Mode