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.

threejs,  webgl,  animation,  cool effects