# Cursor Fluid

> A WebGL fluid experiment that turns cursor movement, clicks, and loops into temporary neon color.

URL: [Original article](https://mattcool.tech/posts/cursor-fluid)

Published: 2026-07-21T16:00:00.000Z

Tags: features

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](https://www.linkedin.com/posts/lukebonnici_experimenting-with-webgl-is-super-fun-built-ugcPost-7484595449471844352-n3mJ/), which sent me to his [fluid-web-gl project](https://github.com/7DaysToLaunch/fluid-web-gl). 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](https://github.com/michaelbrusegard/WebGL-Fluid-Enhanced) underneath Luke's configurator.

As the cursor moves, it drops small [**splats**](https://ostefani.dev/tech-notes/webgl-fluid-divergence-pressure#adding-interaction-with-a-splat-shader) into the simulation: soft dabs of force and color. Not a [3D splat as I've come to know](/posts/world-labs-web-based-language-sim). Movement leaves the trail, clicks make the larger bursts, and loops switch color palettes.

The glow comes from [bloom](https://en.wikipedia.org/wiki/Bloom_(shader_effect)). I first learned about it during [my days working on Hubs](/posts/looking-back-on-my-work-with-hubs). Light mode uses deeper colors, while dark mode goes brighter.

## WebGL vs. WebGPU

[WebGPU](https://gpuweb.github.io/gpuweb/) is a newer API for GPU work in the browser, but this experiment stays with [WebGL](https://www.khronos.org/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](https://astro.build/) 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.