Mouse-trail pixelation hover effect

Design help Animations & Interactions
1

I would love some help replicating the mouse-trail pixelated effect over the image on the landing section of this site: https://namesak3.com/. I’ve searched extensively on Google, YouTube, and the Webflow community but haven’t found anything that quite matches this effect.

I’ve come across some mouse-trailing cloneables (like Web Bae), but they are more grid-based and don’t create the same pixelated distortion effect on the underlying image. I also love the bubble/balloon/mouse attraction effect over the image too.

Any assistance would be appreciated, or if this effect is impossible to achieve in Webflow, knowing that would be helpful too. Thanks!

2

This type of effect are actually 3D/WebGL animations and can be done with threeJS.

You can find good tutorials from Codrops, here is something similar to that website Pixel Distortion Effect with Three.js | Codrops

Check the demo 3 and 4.

1 Like
3

Thank you so much for this! Sometimes it’s just hard to find the name of what you’re searching for. I’ve found lots on Pixel Distortion Effect with Three.js now, so will start exploring and building. I really appreciate your help!

1 Like
4

Happy to help always, please mark this post as solved so we can close this post.