New

9 buttons. Ready to use.

Grid Distortion Configurator - BricksFusion
data-grid-distortion
How to Use & Code Information
  1. Customize your grid distortion effect using the controls below
  2. Enter an image URL in the Image Source field
  3. Click Copy JS to copy the JavaScript code to clipboard
  4. In Bricks Builder, add a Code element
  5. Paste or upload the JavaScript code
  6. To add the effect to any section: go to Section → Style → Attributes, add data-grid-distortion as attribute name, enter your image URL as the value
Interactive Grid Distortion Preview
Image Source
Note: The system automatically handles CORS issues and works with most image sources including Unsplash URLs.
Image Fit
Distortion Settings
Grid Density
20
Mouse Sensitivity
0.15
Distortion Strength
1.0
Recovery Speed
0.9
Advanced Options
Performance Mode
Animation Smoothness
0.05