Fluid Image

WebGL fluid that follows your cursor

The effect runs on four gradient colors that blend and shift as the cursor moves. Gradient toggle, radius, strength, distortion, hue shift, and color cycle speed all live under the Effect group. Animation controls cover overall speed, trail persistence, and pointer smoothing — smoothing affects how closely the fluid tracks the cursor versus drifting behind it. Overflow padding lets the canvas bleed past the image edges for a softer boundary. Under Advanced: quality toggle (high uses curl noise for a cleaner flow field, low is faster), fade-in duration, and max DPR cap. The image prop hot-reloads the texture without destroying the GL context, so swapping images in the CMS works cleanly. Click anywhere on the image to trigger a radial burst that expands and decays. The RAF loop pauses when the pointer leaves and all effects have settled — it doesn't keep running in the background. Static fallback renders a plain image for SSR and thumbnails. Reduced motion disables pointer tracking.

WebGL fluid that follows your cursor