Showcase

Metaball Fusion

Five blobs in a tight cluster. With theme.fusionRadius: 60 and WebGPU, they merge into a smooth metaball via SDF smooth-min. Toggle to Canvas2D — the option is ignored and you see five distinct shapes. This is what WebGPU buys you.

Fusion demo

const liquid = await LiquidDOM.create({
    capacity: 8,
    autoObserve: true,
    container: root,
    renderer,
    // rgba() is the safe format for both Canvas2D and WebGPU renderers.
    // (WebGPU shader does not parse oklch.)
    colorDefault: "rgba(140, 95, 220, 0.85)",
    theme: { fusionRadius: 60 },  // WebGPU only — Canvas2D ignores
  });

fusionRadius activates a WebGPU-only full-screen quad shader that smooth-mins the SDFs of all entities. When two blobs come within ~60 CSS pixels of each other, their boundaries merge into one.

Canvas2D ignores the option entirely — the blobs render via the Bezier-spline path with no compositing. Click Canvas2D in the header toggle to see the difference live.