component
Melty Gooey Text
By Sanna Granqvist

Details
- Sanna GranqvistAuthor
- componentType
- 2026-07-19Published
- 2026-07-21Updated
- 2026-07-19Added
- TextCategories
Summary
Subtle melt effect for text
Description
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.
Introduction
Subtle melt effect for text
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #199