Liquid Puddle Text Reveal

This is a Liquid Puddle Text Reveal. It transforms standard typographic elements into falling droplets that merge organically into readable words. Its function is to provide a highly stylized, kinetic introduction for hero headlines, replacing standard opacity fades with a physical, fluid simulation.

Specs

• Weight: ~3 KB. Zero dependencies.
• Performance: High. Uses hardware-accelerated CSS transform for the drop animation, although the SVG <feGaussianBlur> and <feColorMatrix> combo can be GPU-intensive on devices with low rendering capabilities.
• Theming / Customization: Colors are easily governed by CSS root variables (--text-color, --drops-color), while behavior is mapped to JavaScript object options (delayBetweenDrops, dropTypes).
• Responsiveness: Scales organically relying on vmin units for typography.
• Graceful Degradation: [!] If JavaScript is disabled, the text remains static and fully readable without the puddle reveal animation. However, accessibility is compromised because JS splits the text into individual <div> letters without preserving aria-label attributes for screen readers.

Anatomy

• HTML: Minimal base nodes (.puddle) containing the raw text. The JavaScript class automatically duplicates the text for the background liquid effect and injects an inline SVG filter.
• CSS (Sass): Sets up the @keyframes drop sequence using transform: translate(). It applies the SVG filter url(#drops-filter) to the background container and utilizes CSS custom properties (--delay, --r, --x, --y) to drive dynamic positioning and staggered delays.
• JS: The Droppy class. It injects the SVG matrix, wraps each letter in a div, assigns a randomized box-shadow for organic droplet shapes, computes animation delays, and manages the DOM clones required for the background merging effect.

Logic

The standout feature is the combination of DOM cloning and the classic SVG “gooey” filter.

// The filter injected via JS
<filter id="drops-filter">
  <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="... 0 0 0 21 -7" result="cm" />
</filter>

.combined-puddles {
  filter: url(#drops-filter);
}

Instead of running a heavy WebGL physics engine, the script duplicates the text into a background layer (.combined-puddles) and applies an SVG filter. The <feGaussianBlur> mathematically blurs the falling circular letters together. Immediately after, the <feColorMatrix> sharply increases the alpha contrast. When the blurred edges of the animated background letters overlap, the color matrix snaps them together into a solid shape, creating a flawless, liquid-like merging effect driven entirely by native browser rendering.

Feel

Organic, heavy, and satisfying. The letters go up from the bottom of the screen like dense droplets of ink or liquid metal. As they hit the baseline, the SVG gooey filter causes them to blob and merge into a single cohesive puddle before revealing the crisp foreground text. It feels highly physical, transforming standard typography into a fluid simulation with an impressive level of tactile gravity.