Liquid Metal Field
Gooey metaball blobs that fuse and split as they drift, with a specular sheen.
DOM + CSS0 deps1 file · 3 KB TSX
Props
"use client";
import { useId } from "react";
export function LiquidMetalField({
blobs = 5,
gooeyness = 18,
speed = 16,
metallic = true,
}: {
blobs?: number;
gooeyness?: number;
speed?: number;
/** Gradient fill plus specular sheen. Off leaves flat, matte blobs. */
metallic?: boolean;
}) {
// SVG filter ids are DOCUMENT-global. With a hard-coded id, a second
// instance on the page silently steals the first one's filter.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Metaballs look like a physics problem and are actually a filter problem. Blur a set of shapes hard enough that their edges overlap, then push alpha through a steep contrast curve, and the overlapping region sums past the threshold and snaps into a single fused silhouette while everything else falls away — one `feColorMatrix` replaces an entire particle system, and it runs on the GPU. The numbers in that matrix are the tuning knobs worth understanding: multiplying alpha by nineteen and subtracting nine puts the cutoff near 0.47, so a smaller multiplier keeps the blobs distinct and a larger one makes them reach for each other from further away. Two details separate this from the version that circulates as a CodePen. The circles are filled with a gradient rather than a flat color, and a radial white highlight sits over the whole field in overlay blend mode — that specular sheen is the difference between liquid metal and blue blobs. The trap to avoid: SVG filter ids are document-global, so the id has to come from `useId`, or a second instance silently hijacks the first one's filter.
Curator’s note
Built for viberdy 2.1. The alpha contrast curve is the entire effect — everything else is drift and lighting.
