Backgrounds

WebGL Fluid

Pavel Dobryakov's interactive fluid simulation.

Live demowebgl-fluid

Move the cursor across the canvas

Pavel Dobryakov's fluid simulation, packaged for npm. Drop it on a canvas and get an interactive, hypnotic GPU-accelerated fluid background. Move the mouse or tap over the canvas.

Install

npm i webgl-fluid

Snippet

import WebGLFluid from "webgl-fluid";

useEffect(() => {
  WebGLFluid(canvasRef.current, {
    SPLAT_RADIUS: 0.25,
    DENSITY_DISSIPATION: 1.2,
    VELOCITY_DISSIPATION: 0.2,
    PRESSURE: 0.8,
    COLOR_UPDATE_SPEED: 6,
    SPLAT_FORCE: 6000,
    TRANSPARENT: true,
    BACK_COLOR: { r: 0, g: 0, b: 0 },
  });
}, []);