Theme 025 · Material & 3D

Liquid Metaball

Metrics are glossy teal droplets on a deep-ink ground. They flow down channels and fuse into one calm pool — except the anomaly, a coral bead that refuses to merge and trembles until a human decides what to do with it.

readability ●●○trust ●●○effort med

How many dashboards
did you check today?

↓ the drop still shipped Friday

38 DASHBOARDS · SCATTERED

1 · HOOK0:00–0:08

Scattered drops wobble and half-merge at random, drifting upward; on the bar-8 downbeat a coral drop slides off the bottom-right edge as the “shipped Friday” line appears.

Acme Pulse

EVERY METRIC FLOWS INTO ONE WATCHER

2 · REVEAL0:08 (drop)

Every droplet snaps toward the centre on the drop, necks stretching then fusing with elastic.out; the mark surfaces out of the pool and the wordmark fades up one beat later.

SIGNUPS

USERS

P95

CHECKOUT

13 METRICS · MERGED · HEALTHY

WON'T MERGE

Checkout conversion

−18%

since 09:42
after deploy #2231

Roll back

Acknowledge

2,418 EVENTS / SEC FLOWING

3 · PROOF MOMENT0:12–0:32

Drops pour down the channels one per beat and fuse into the pool; the coral checkout bead stops short, repels with a 3-cycle wobble on the snare, the card slides in from the right, and “Roll back” pulses on the downbeat.

Acme Pulse

You ship.
Pulse watches.

Start free

4 · CTA0:36–0:45

The pool rises from the bottom edge and settles; the tagline surfaces line by line and the coral “Start free” drop beads up on the last downbeat.

COMPONENT KIT

Goo filter — feGaussianBlur + feColorMatrix alpha threshold that makes neighbouring circles fuse
Droplet — circle with an off-centre radial gradient and a separate specular highlight
Channel — a rounded track each metric's drops flow down
Merge pool — the calm body of all healthy metrics
Rogue bead — the coral drop that will not merge, with ripple rings — the anomaly
Label chip — mono text and the anomaly card kept outside the filter so they stay crisp

MOTION · MUSIC

Path flow — drops follow the channel path, power1.in, 0.06 s stagger; one release per beat at 120 BPM
Merge snap — the neck stretches for 2 frames, then fuses with elastic.out(1, .4) 0.6 s, landing on a downbeat
Repel wobble — the coral bead squashes ±8 % in a 3-cycle damped sine (0.5 s) on the snare when it refuses to merge

WHY / RISK · ADAPT IT

Surface tension is an instant visual for “this doesn't belong”: everyone understands a drop that won't join the rest. It feels alive but contained. Risk: the goo filter blurs anything inside it, so every word and number must live outside the filtered group.

Adapt to your product: Make each drop one unit of your product's flow (orders, events, jobs) and the pool the healthy total; the thing your product catches is the drop that won't merge. Keep all labels as crisp overlays.

References: https://tympanus.net/codrops/2025/06/09/how-to-create-interactive-droplet-like-metaballs-with-three-js-and-glsl/ (droplet metaballs with Three.js and GLSL) · https://css-tricks.com/gooey-effect/ (the SVG gooey filter technique)