Skip to content

Neon Fluid

A browser platformer where real incompressible fluid dynamics are the physics engine: a glowing liquid character crosses 100 levels driven by a dual CPU and GPU simulation, WebGL2 rendering, and procedural Web Audio.

WebGLGameTypeScript

Overview

Neon Fluid is a platformer whose physics engine is a real incompressible fluid solver. The player is a glowing liquid character, and movement comes from mouse-driven pressure waves pushing that fluid through 100 levels. There is no game engine or physics library underneath, the simulation is hand-built.


What it demonstrates

  • Using a genuine fluid solver as gameplay physics, not just a visual effect
  • A dual-simulation architecture splitting physics accuracy from render quality
  • Hand-rolled WebGL2 and Web Audio with no engine or framework

Key features

  • Dual-simulation architecture: a CPU sim (256x256, TypeScript in a Web Worker) for physics, a GPU sim (up to 512x512, WebGL2) for visuals
  • Stam's "Real-Time Fluid Dynamics for Games" solver with vorticity confinement
  • 10 handcrafted levels plus 90 procedurally generated levels (seeded PRNG)
  • Mouse-driven pressure waves for character movement
  • Mechanics: moving platforms, pushable boxes, enemies, wind blowers, fluid barriers, pressure switches
  • Real-time Web Audio synthesis for music and sound effects
  • GPU tier detection for adaptive performance

Stack

  • Next.js 16 (App Router, static export), React 19
  • TypeScript (strict, no any)
  • WebGL2 for GPU fluid rendering, Web Audio API for procedural synthesis
  • No game engine or physics library
Requires a desktop browser with WebGL2.