Distorsion animation for Bricks Builder

Documentation

v2.0

GETTING STARTED

Quick started

Installing transitions

MENU ANIMATIONS

Expandable tab

New

Mobile Opener

New

Dynamic island

CORE BACKGROUND

New

Network effect Snowfall

New!

New!

New

SHOWCASE

New

VISUAL EFFECTS

New

New

New

New

New

ANIMATED TEXT

New

New

New

New

INTERACTION

New

Timeline Gradient Vertical Parallax

New

New

New

New

New

New

New

Grid Distortion Configurator

How to Use in Bricks Builder

Customize your grid distortion effect using the controls below
Enter an image URL in the Image URL field
Click the Get Code button and copy the JavaScript
In Bricks Builder, add a Code element and paste the JavaScript
Add this attribute to any container element:
data-grid-distortion📋

This tool creates a custom script with your configured distortion settings built-in. Just add the data attribute to any element with an image URL!

BricksFusion Exclusive Get Your Grid Distortion Effect

Add a mesmerizing interactive grid distortion effect to your website with this powerful shader-based animation.

Easy implementation with simple data attributes
Interactive mouse-driven distortion effects
Fully responsive and mobile-friendly
Customizable grid density and animation strength
Works with any image URL

Image Source

Provide an image URL for the distortion effect. The image will be used as the base for the interactive distortion animation.

Distortion Settings

Grid Density 20

Controls the resolution of the distortion grid (higher = more detailed)

Mouse Sensitivity 0.15

Range of mouse influence on the distortion effect

Distortion Strength 1.0

Intensity of the visual distortion effect

Recovery Speed 0.9

How quickly the distortion returns to normal state

Documentation

GETTING STARTED

MENU ANIMATIONS

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

SURECART

BUTTONS

TRANSITION PAGES

How to Use in Bricks Builder

JavaScript Code