Interactive real-time 2D fluid dynamics simulation in the browser, based on Jos Stam's "Real-Time Fluid Dynamics for Games" (a Navier-Stokes solver), rendered on an HTML canvas.
Built with Next.js (App Router) + Tailwind CSS, deployed to Cloudflare Workers via OpenNext.
Requirements: Node.js and pnpm (versions are pinned in mise.toml — run
mise install if you use mise).
pnpm install
pnpm devOpen http://localhost:3000 and click / touch-drag on the canvas to add fluid.
| Script | What it does |
|---|---|
pnpm dev |
Start the development server |
pnpm build |
Production build |
pnpm lint |
ESLint + type-check + Prettier check (in parallel) |
pnpm fix |
Auto-fix ESLint and Prettier issues |
pnpm test |
Run unit tests (Vitest) |
src/lib/fluid-simulation.ts— the fluid solver (pure TypeScript, no DOM); unit-tested insrc/lib/fluid-simulation.test.tssrc/components/FluidCanvas.tsx— canvas rendering, pointer interaction, and simulation controlssrc/app/— Next.js App Router pages
Pushes to main deploy to Cloudflare Workers via the Deploy GitHub Actions
workflow (OpenNext build + opennextjs-cloudflare deploy). Pull requests get
a preview upload with the version preview URL posted as a sticky PR comment.