Distorsion grid - breakfusion.com

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 Breakdance Builder, add a Code element and paste the JavaScript
Add this attribute to any container element:
data-grid-distortion📋
with value "true"

✨ Works with child elements! You can add text, buttons, and other content inside the container. The grid distortion will act as a background effect while preserving the positioning and functionality of your child elements.

Breakfusion 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

Code Copied Successfully! Ready to paste into Breakdance Builder

Documentation

GETTING STARTED

MENU ANIMATION

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

TRANSITION PAGES

How to Use in Breakdance Builder

JavaScript Code