Gooey Stack never bends a border-radius or animates a border-radius or a clip-path. The liquid look is an SVG filter fusing rectangles, cross-faded against the plain crisp cards underneath — and only while it needs to be. Here's the whole trick.

Every card position is drawn three times. A merge surface (blurred silhouettes, behind everything) gets pushed through the goo filter so close cards visually fuse. A native surface (real bg-card rects with CSS borders) sits on top of it, pixel-perfect at every zoom. Your content sits on top of that, unfiltered and always sharp — it recedes and frosts with the cards, but text never blurs into soup.

The goo shouldn't show at rest — not fanned out, and not fully merged either (a receded card should leave no ghost behind the anchor). nearness is a band-pass on the live gap: zero at both ends, peaking only while surfaces are actually necking. Watch the slow loop below — four held steps so the cross-fade is obvious: apart → necking (goo on) → merged (goo off) → necking out.

It reads off a spring following the live gap, not the target gap directly — at both rest ends the target's nearness is already 0, so deriving the cross-fade from the target alone would mean the goo never appears mid-toggle at all.

Two SVG primitives do the fusing: feGaussianBlur softens the source into overlapping halos, then feColorMatrix multiplies the alpha channel back up past 1 and clips it — a razor-steep threshold that turns "soft overlapping blur" into "one hard-edged fused shape," almost without anti-aliasing. The demo crawls through the same four steps so you can see the bridge form and tear apart.

The real filter also regrows a thin, radially-symmetric border ring around the fused shape from a second small blur + threshold pass — a Gaussian stays round at corners and through the neck, where a box-shadow or clip-path approach would go square or wobble with curvature.

Why filter and opacity, not layout? Nothing here ever animates border-radius, height, or clip-path. Cards move on y/scale/opacity, blur is a static filter on a layer that itself only fades in and out — every frame is compositor work, whether there are two cards or a dozen stacked behind the anchor.

Cheap when idle: a ResizeObserver per card keeps the stack's height and each card's bottom offset registered to its real content — so the layout survives text reflow or a resize without measuring on every animation frame. The observer only fires on actual size changes, not on every spring tick.

const ro = new ResizeObserver(measure);
for (const el of contentRefs.current) if (el) ro.observe(el);

Every piece, assembled — tap the plug and watch the prompt card merge in, then split back out.

Two silhouette layers, one band-pass, and a filter that only ever touches pixels that are actually close — that's the whole liquid effect.