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
Import
Usage
Intensity
intensity sets the maximum displacement in pixels. Higher values create more dramatic distortion.
Speed
speed controls how fast the fluid motion evolves. Slow speeds feel like a gentle shimmer; higher speeds feel chaotic.
Pause on hover
Add pause-on-hover to freeze the fluid motion when the cursor enters.
How it works
An inline SVG <filter> containing <feTurbulence> and <feDisplacementMap> is defined in the shadow root and applied to the text span via filter: url(#liquid-filter). A requestAnimationFrame loop updates the turbulence baseFrequency and displacement scale attributes over time using sine and cosine curves, creating a continuously evolving organic distortion.
Because the filter is scoped to the shadow root, multiple motion-liquid instances on the same page do not interfere with each other.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | — | Text to render with the liquid effect |
| | | number | 10 | Maximum displacement in px |
| | | number | 2 | How fast the fluid motion evolves |
| | | boolean | false | Freeze motion on mouseenter, resume on mouseleave |
Accessibility
When prefers-reduced-motion is set, the animation loop does not start and the text renders without distortion.