README.md

Liquify js

Web-GL filter for rasterize and liquify HTML elements

Demo

Try Liquify filter by visiting the GitHub Pages.

📦 Install

Install with npm.

npm install liquify-js

Include JavaScript file.

<script type="text/javascript" src="node_modules/liquify-js/dist/liquify.js"></script>

💧 Usage

Add liquify attribute to an HTMLElement.

<div liquify>Liquified</div>

Options frequency, degree and amplitude can be configured using attributes.

<div liquify
     liquify.frequency="0.5"
     liquify.degree="55"
     liquify.amplitude="0.5">Liquified</div>

Options can be configured dynamically using the Liquify property of the HTMLElement.

const element = window.document.querySelector("[liquify]");
element.Liquify.frequency = 0.5;
element.Liquify.degree = 55;
element.Liquify.amplitude = 0.5;

🎓 License

This project is licensed under the MIT License.