MAR 2026 / NPM PACKAGE SHEET / LIQUID-DISTORT

liquiddistort

name: liquid-distort / version: 0.1.0 / license: MIT

repository: github.com/kalaanakonda/liquiddistorteverything

1/3

zero dependencies
works with any framework
~9kb gzipped

Cursor-driven liquid distortion effect for any DOM element. Warps text, images, and UI using SVG displacement maps. No WebGL, no canvas overlay, no dependencies.

main: ./dist/liquid-distort.cjs
module: ./dist/liquid-distort.js
types: ./dist/index.d.ts
exports: import/require/types

Install

npm install liquid-distort

CDN: https://cdn.jsdelivr.net/npm/liquid-distort/dist/liquid-distort.umd.cjs

Quick Start

import { LiquidDistort } from 'liquid-distort'

new LiquidDistort(document.getElementById('hero'))

Framework Support

React: useEffect + destroy cleanup

Vue: onMounted / onUnmounted

Svelte: action with destroy()

Plain HTML: UMD CDN script

Core API

new LiquidDistort(element, options)

effect.setOptions({ ... })

effect.destroy()

Target a container to exclude outside elements

How It Works

Renders a small off-screen canvas displacement map each frame.

Pixel channels encode X/Y distortion direction + magnitude.

Map is fed to SVG feDisplacementMap on the target element.

Canvas 2D + SVG filter pipeline, no WebGL.

Modes

refract, attract, swirl, ripple, wave

Shapes

circle, ellipse, rect, roundedRect

Triggers

always, hover, click

Key Options

radius, strength, falloff, follow, spring, decay, tail, resolution

NPM PACKAGE GITHUB REPO README ISSUES

keywords: liquid, distort, displacement, svg, canvas, cursor, effect, animation, hover, interactive, filter, webgl-alternative, react, vue, svelte, vanilla