Liquid Text React component

Liquid Text is a free effect that runs real DOM text through an animated SVG filter. Fractal noise drives a displacement map, so the letters ripple, melt or wobble continuously. Moving the pointer toward the center strengthens the distortion, and an optional click burst spikes it for three quarters of a second.

preset sets the character of the effect: liquid, melt (stretches vertically), blob (thickened, softened edges), ghost (heavier blur) or crystal (sharper turbulence). scaleMultiplier scales the whole distortion, mouseEnabled, mouseStrength and mouseRadius tune the pointer boost, and clickBurst with burstStrength adds the tap effect. The text takes fontSize or autoFit, fontWeight, fontFamily, letterSpacing, and textColor or a gradient, and useGlow adds a glow in glowColor.

Use it for a hero word, event or festival titles, music and drink brands, or anything with a water theme where a fluid look fits.

Keep it to a few large words, since the distortion makes small text hard to read. For a crisp 3D hover, use Tilt Text.