Liquid & Glitch Effects For Images – LiquidEffect.js

Preview:

Description:

LiquidEffect.js is a JavaScript library that makes use of pixi.js library to apply a fancy liquid & glitch effect on images.

How to use it:

1. Load the required pixi.js and pixi-filters libraries on the HTML page.

<script src="https://cdn.jsdelivr.net/npm/pixi.js/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters/dist/pixi-filters.js"></script>

2. Load the LiquidEffect.js after pixi.js library.

<script src="LiquidEffect.js"></script>

3. Create a container to hold the image.

<div id="example"></div>

4. Initialize the LiquidEffect and determine the path to the target and displacement images.

new LiquidEffect({
    appendTo: "#example",
    image: 'image.jpg',
    displacementImage: "displacement_map.jpg"
});

5. Config the Liquid & Glitch Effects with the following props.

new LiquidEffect({
    appendTo: "#example",
    image: 'image.jpg',
    displacementImage: "displacement_map.jpg",
    displacementScale: 1,
    speed: 1, 
    intensityX: 1.5,
    intensityY: 1.5,
});