Liquid Morph

Viscous fluid distortion effects for images, text, and cards. SVG filter-based - works everywhere.

Hover the title above for WebGL liquid effect. Open in new tab if viewing in iframe.

01

Headline Text Morph

Apply liquid distortion to text elements. Hover or focus on the headlines to see the fluid effect:

FLUID

MOTION

DESIGN

02

Basic Hover Distortion

Hover or focus on the images to see them distort and reform with a liquid-like motion:

Abstract gradient art
Purple abstract waves
Colorful fluid art
03

Scroll-Scrubbed Reveal

Distortion tied to scroll position with data-scrub="true". Scroll slowly to see the effect:

Pink marble texture
Scrub Mode
Abstract liquid art
Scrub Mode
Gradient blur
Scrub Mode
04

Intensity Variations

Hover or focus to control distortion strength with data-intensity (0.1 to 1):

Soft gradient
Subtle (0.2)
Portrait with medium liquid distortion
Medium (0.5)
Portrait with intense liquid distortion
Intense (1.0)
05

Direction Control

Hover or focus to distort on specific axes with data-direction:

3D abstract
Horizontal
Abstract shapes
Vertical
Neon lights
Both Axes
06

Gallery Grid with Stagger

Staggered reveals that repeat when scrolling back up (data-stagger="0.1"):

Abstract art with liquid distortion on scroll
Colorful abstract art with staggered morph reveal
Vibrant abstract texture with fluid distortion
Paint swirls with liquid morph animation
Gradient waves with scroll-driven distortion
Deep purple gradient with staggered morph effect
07

WebGL Liquid Title

PixiJS

GPU-accelerated liquid distortion using PixiJS displacement filters. Hover or focus for smooth WebGL animation. Requires pixi.js as an additional dependency:

LIQUID

SHADER

EFFECT

Setup: Include PixiJS before the effect script. The .liquid-title component uses a canvas overlay with displacement mapping for smooth GPU-rendered distortion. Falls back gracefully to static text when WebGL is unavailable.