Showcase

Squish

Each button below is a real <button>. Hover it to see the soft-body squish toward your cursor; click to fire impulse() for a brief shake.

Squish demo

const liquid = await LiquidDOM.create({
    capacity: 8,
    autoObserve: true,
    container: root,
    renderer,
    // Note: rgba() is the safe format for both Canvas2D and WebGPU renderers.
    // oklch() works on Canvas2D but the WebGPU shader's color parser only
    // accepts rgb()/rgba() — using oklch makes the WebGPU blob invisible.
    colorDefault: "rgba(45, 100, 200, 0.75)",
    colorHover: "rgba(233, 100, 90, 0.85)",
  });

  for (const btn of root.querySelectorAll<HTMLButtonElement>("button[data-liquid]")) {
    btn.addEventListener("click", () => liquid.impulse(btn, {
      magnitude: 150,           // px/s — visible "pop" without being chaotic
      direction: [0, -1],       // shake upward
      duration: 400,
    }));
  }

autoObserve picks up every [data-liquid] element on mount. The buttons remain accessible DOM nodes — the canvas overlay only paints the physics.

On click, impulse() writes into slots 6/7 of the shared buffer; Rust reads them next tick and applies a brief decaying velocity to the soft-body.