Water like distortion effect integration

Hi to everyone. I was just wondering how to integrate this effect on mouse move:


in a website affecting all elements on the page.

I would like to implement it in this simple single page website but also how to implement an effect over different pages would be great to know.

Thank you for your help

Hey @furgi

Not EXACTLY what you originally linked in this post, but this video should get you onto the right path.

I would imagine you would tweak some things in this code with the .mousemove lines and the what I would imagine to be the viscosity of the said liquid affecting the canvas that you would be implementing.

I also looked at the article you are looking to implement and there are alot of Three.js resources on codepen.io as well as tympanus.net/codrops/ (which you already know about).

Let me know if you have or do find the exact implementation as I would love to utilize this effect! I will search as well to get that exact effect!

Best,
Matt

@Matthew_Bozanich Thank You so much for all the info. I was aware about ran’s ripple effect that’s not bad even though I find it a little too artificial to the eyes. It could be a nice solution anyway.
Because I miss knowledge of js in general, I just can’t figure out where I would start to do what I would like to do. I’ll keep searching and trying though :upside_down_face: