Move your cursor around this page to push neon pulses through the fluid. Click anywhere for a color burst. Draw a complete loop clockwise or counterclockwise to move through the color schemes, or use the small controls at the side if mouse gestures are not your thing.
How It Works
I first found this through Luke Bonnici’s post on LinkedIn, which sent me to his fluid-web-gl project. I immediately wanted to turn the fluid itself into a cursor. This version was guided by 5.6 Sol and uses the MIT-licensed WebGL Fluid Enhanced engine underneath Luke’s configurator.
As the cursor moves, it drops small splats into the simulation: soft dabs of force and color. Not a 3D splat as I’ve come to know. Movement leaves the trail, clicks make the larger bursts, and loops switch color palettes.
The glow comes from bloom. I first learned about it during my days working on Hubs. Light mode uses deeper colors, while dark mode goes brighter.
WebGL vs. WebGPU
WebGPU is a newer API for GPU work in the browser, but this experiment stays with WebGL. The engine is already built around WebGL, and moving it over would mean a rewrite without changing much of what you see.
Astro
Astro keeps that work isolated to this post. It loads the React component and fluid engine only when somebody visits, and reduced motion skips the simulation entirely.