fluidkit

Live demo → · npm

Framework-agnostic GPU fluid simulation for the web. The sim engine (Stable Fluids on WebGL2) produces velocity/dye field textures; pluggable render modes consume them — smoky dye, flat posterized "sticker" liquid, or your own fragment shader.

Status: v0.5 — WebGL2 core with five render modes (dye, threshold, ramp, displacement, custom); pointer, ambient, programmatic, mask, and audio emitters; obstacles; React/Vue/Svelte adapters; CDN build; experimental WebGPU backend (try it).

Building with an AI coding agent? Point it at AGENTS.md — a complete guide with landing-page recipes, the liquid-vs-smoke look formula, and pitfalls.

Quickstart

npm install @dilukangelo/fluidkit

import { createFluid, threshold } from '@dilukangelo/fluidkit'

const fluid = createFluid(canvas, {
  emitters: { pointer: true, ambient: { strength: 0.2 } },
  render: threshold({
    levels: [{ cutoff: 0.1, color: '#ffc7ff' }],
    background: 'transparent',
  }),
})

That's it — interactive fluid on your canvas. Omit render for the classic smoky dye look.

API

fluid.splat(x, y, dx, dy, { color: '#ffc7ff', radius: 0.25 }) // programmatic droplet, x/y in [0,1], y up
fluid.params.curl = 45                                        // all sim params live-tunable
fluid.setRenderMode(dye())                                    // swap looks at runtime
const tex = fluid.getTexture('dye')                           // raw WebGLTexture for three.js/pixi
fluid.pause(); fluid.resume(); fluid.destroy()

Sim params (all optional in createFluid options, all live-tunable via fluid.params): simResolution (128), dyeResolution (1024), curl (30), pressureIterations (20), pressure (0.8), velocityDissipation (0.2), densityDissipation (1.0), gravity (0 — set 100–400 for pours/waterfalls), wind (0), speed (1), splatRadius (0.25), splatForce (6000).

Render modes

• dye({ brightness, glow, glowRadius, background }) — classic smoky multicolor, with an optional neon halo.
• threshold({ levels, background, outline, softness, lighting }) — up to 8 posterized levels with per-level alpha, edge A