Pixel Distortion Effect
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.
