Clone Project

Pixel Distortion Effect

Description:  
Author 
Charles
Organization 
Similar Projects
Oops! Something went wrong while submitting the form.
Description from Webflow:  
The Pixel Distortion Effect. Inspired by Infinite Bad Guy Website (which is no longer active) You can clone and change the following attribute inside the canvasContainer: data-grid (default value: 34), //generate how many grid data-mouse (default value: 0.25), //mouse radius affecting the distortion data-strength (default value: 1), //higher = more parallax and distorted. data-relaxation (default value: .9), //lower = faster pixel re-sorting data-aspectRatio (default value: 1.77), //change Aspect Ratio according to your image size. (default 1920x1080) It is recommended to use landscape images, To calculate aspect ratio, you can do (image pixel width / image pixel height) Have fun messing around! ✌️ NB. There's also native text animation if you wanna try to play around with that one too.
Tags from Webflow: 
threejs,  webgl,  animation,  cool effects

The best Webflow projects handpicked & delivered.

We search the entire Webflow showcase to find the most clone-worthy* websites.

*The kind of sites that make you say "wait... this is free?"
Sites will be complete, clean, and client ready.

Booyah! The first newsletter will go out early next week.
Oops! Something went wrong while submitting the form.

*The kind of sites that make you say "wait... this is free?" Sites will be complete, clean, and client ready.

Booyah! The first newsletter will go out early next week.
Oops! Something went wrong while submitting the form.
.