LiquidEffect

Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

Demo

https://liquideffect.netlify.app/

Dependencies

NPM Package

npm i pixi.js
npm i @pixi/filter-displacement
npm i @pixi/filter-rgb-split

Browser

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-filters.js"></script>
<script src="<PATH_TO_FILE>/LiquidEffect.js"></script>

Usage

Vanilla JavaScript

<script>
    new LiquidEffect({
        appendTo: "#main",
        image: './assets/images/image.jpg',
        displacementImage: "./assets/images/displacement_map.jpg",
        displacementScale: 1,
        speed: 1,
        intensityX: 1.5,
        intensityY: 1.5,
    });
</script>

With Framework

npm i liquideffect

import LiquidEffect from 'liquideffect'

LiquidEffect({
    appendTo: "#main",
    image: './assets/images/image.jpg',
    displacementImage: "./assets/images/displacement_map.jpg",
    displacementScale: 1,
    speed: 1,
    intensityX: 1.5,
    intensityY: 1.5,
});

Parameters

Name	Type	Description
appendTo	Dom Element	Parent Element
image	Image	Image to display
displacementImage	Image	Displacement Image
displacementScale	Float	Displacement Scale value 0.0 - 1.0 causing waves to be shorter or bigger
speed	Float	Liquid effect wave speed
intensityX	Float	Liquid effect intensity on X-axis
intensityY	Float	Liquid effect intensity on Y-axis