FluidCursor

A WebGL fluid simulation that follows your cursor. Move your mouse around to see the effect.

Color demos

Move your cursor anywhere

Usage

The FluidCursor component renders a full-screen WebGL canvas that creates fluid effects following mouse movement. It's typically used as a background effect.

<script>
  import { FluidCursor } from '$lib/fancy-ui/fluid-cursor';
</script>

<!-- Fixed color -->
<FluidCursor fluidColor="#00ffcc" colorIntensity={0.4} />

<!-- Cycling palette -->
<FluidCursor fluidColors={["#ff0080", "#00ffcc", "#7700ff"]} />

Props

Prop	Type	Default	Description
simResolution	number	128	Simulation resolution
dyeResolution	number	1440	Dye resolution for color rendering
densityDissipation	number	3.5	How quickly the dye fades
velocityDissipation	number	2	How quickly the velocity dissipates
pressure	number	0.1	Pressure value for simulation
curl	number	3	Curl/vorticity strength
splatRadius	number	0.2	Size of the splat effect
splatForce	number	6000	Force of the splat effect
shading	boolean	true	Enable lighting/shading effect
colorUpdateSpeed	number	10	Speed of color cycling
transparent	boolean	true	Enable transparent background
fluidColor	string	—	Fixed fluid color (hex). Disables random cycling.
fluidColors	string[]	—	Palette of hex colors to cycle through on each splat.
colorIntensity	number	0.15	Intensity multiplier applied to fluid colors (0–1).
backColor	{ r, g, b } \| string	{ r: 0.5, g: 0, b: 0 }	Background color — RGB object or hex string.

Notes

The component uses WebGL2 with fallback to WebGL1
Click to create a color splat effect
Move your mouse to create flowing fluid trails
Touch events are supported for mobile devices
The canvas automatically resizes with the window

Credits

Inspired by Inspira UI