WebGL Liquid Distortion

Turn your section background ( or the page background ) into an interactive image background that distorts during mouse/touch movement.

WebGL Liquid Distortion

  • Image: The image to use as a background
  • Style: The style of the distortion effect
  • Size: The size of the virtual stamp used during the distortion
  • Slower Fade: Slows down the effect when the distorted portion o the background returns to it’s normal state
  • Apply to whole page: Use as the page background instead. If you want to cover the WebGL Wavy Gradient in a given section, add one of the default Breakdance backgrounds to that section in order to cover it.
  • Disable on Touch Devices: Disable loading the element on devices with touch capability