motion-liquid

Applies an animated SVG displacement filter to text, giving it a living, fluid quality — like ink in water or hot air shimmer. No WebGL required.

Preview

LIQUID

Import

Usage

Static content

Write the text as a child. The browser shows it as plain text before the element is defined, so the page never paints an empty gap while the library loads.

Dynamic content

Use the text attribute when text changes at runtime. Setting the property restarts the animation automatically.

If both are present, the attribute wins and the child text stays as the pre-upgrade fallback.

Intensity

intensity sets the maximum displacement in pixels. Higher values create more dramatic distortion.

SUBTLE

INTENSE

Speed

speed controls how fast the fluid motion evolves. Slow speeds feel like a gentle shimmer; higher speeds feel chaotic.

SLOW

FAST

Pause on hover

Add pause-on-hover to freeze the fluid motion when the cursor enters.

HOVER ME

How it works

An SVG <filter> with <feTurbulence> and <feDisplacementMap> is applied to an SVG <text> element, and SMIL <animate> elements drive its baseFrequency and scale over time. Filtering SVG content (rather than an HTML element via CSS filter: url()) is what keeps it animating on WebKit/iOS, where a url() filter on HTML only repaints on scroll.

Properties

Attribute	Property	Type	Default	Description
text	text	string	—	Text to render with the liquid effect. Falls back to the child text when unset
intensity	intensity	number	10	Maximum displacement in px
speed	speed	number	2	How fast the fluid motion evolves
pause-on-hover	pauseOnHover	boolean	false	Freeze motion on mouseenter, resume on mouseleave

JavaScript API

Control the liquid programmatically with play(), pause(), finish(), and cancel().

playState: –

Accessibility

When prefers-reduced-motion is set, the animation loop does not start and the text renders without distortion.