Cursor Web Fluid

A fluid animation that follows the cursor.

Move your cursor here

Experience the WebGL Fluid

Props

PropertyTypeDefaultDescription
inkColorstring"--foreground"CSS color or theme variable for the fluid.
containedbooleanfalseRender inside the nearest positioned parent.
blendModeCSSProperties["mixBlendMode"]"difference"Blend mode used to render the fluid over the preview surface.
dyeDissipationnumber0.97How quickly the fluid trail fades.
velocityDissipationnumber0.97How quickly fluid velocity dissipates.
curlnumber30Vorticity strength that controls fluid swirling.
forceStrengthnumber8Cursor force applied to the fluid.
thresholdnumber0.6Display threshold used for the fluid texture.