Three-fluid-fx

Three-fluid-fx is a Three.js library by Artem Korenevych for creating fluid-driven visual effects on the web.

The project turns pointer movement into a simulated fluid field that can be used for overlays, distortion, and particle motion. Instead of treating cursor effects as simple trails, it gives developers a more physical material to work with: ink, smoke, oil, water, heat haze, glass, neon, and other responsive surface effects.

It supports both WebGL and WebGPU workflows. The WebGL version works with GLSL, WebGLRenderer, and post-processing passes, while the TSL version is designed for newer Three.js WebGPU pipelines.

What makes the project interesting is the separation between simulation and final rendering. The library gives you motion data from the fluid simulation, then you decide how to use it. That could mean distorting an image, pushing particles, painting color into a scene, or building a custom shader effect around the user’s movement.

It is especially useful for expressive landing pages, portfolios, product demos, creative tools, and experimental interfaces where interaction should feel more alive than a standard hover state.