Live Demo
Hover over the image to see the fluid distortion effect. Click to create ripples.
Hover to distort / Click for ripples
1.00
0.15
Webflow Installation
Just 2 steps. The script is hosted for you.
1
Copy this script into Webflow
Go to Project Settings → Custom Code → Footer Code and paste:
Paste in Footer Code
<script src="https://your-project.vercel.app/fluid-effect.js"></script>2
Add attribute to your image container
Select any div with an image inside. In the Element Settings panel, add a custom attribute:
data-fluid-effectOptional attributes for customization:
Example HTML
<div data-fluid-effect data-fluid-strength="0.5" data-fluid-radius="0.3">
<img src="your-image.jpg" alt="Description" />
</div>That's it. The effect auto-initializes on page load. No JavaScript knowledge required.
Options
| Attribute | Default | Description |
|---|---|---|
| data-fluid-effect | - | Required. Enables the effect. |
| data-fluid-strength | 0.5 | Distortion intensity (0 to 3) |
| data-fluid-radius | 0.3 | Effect area size (0.05 to 0.5) |