Melty Gooey Text

Show Preview
Melty Gooey Text
Melty Gooey Text

About Melty Gooey Text

Letters wobble, drip, and fuse into goo while the text auto-fits its container width, so it works as a full-bleed hero title out of the box.

What it does:

  • Animated liquid distortion with wobble, goo, drip, speed, and displace scale sliders

  • Runs always-on or only on hover; always-on mode adds an extra surge when hovered

  • Appear animation with three styles (Melt In, Rise, Blur), staggered by character or word

  • Full font control (family, size, weight, spacing, alignment) plus any text color

  • Auto-fits the text to its container width, or keeps a fixed size

  • Respects prefers-reduced-motion and pauses the effect while off screen

How to use it:

- Drag it in, set your text, font, and color, then tune Wobble, Goo, and Drip until it feels right. Use Trigger to choose always-on or hover.

The melt is a real-time SVG turbulence filter, not a video or Lottie, so it stays sharp at any size and works with any font.

From Sanna Granqvist

Highlight Cycling
Gradient Scroll Text
Loop Shiny Text
Word Shifter

Related Components

WebGL Text Tunnel
Reveal Text
AutoCover
Diagonal Text Reveal