Splash Cursor

Liquid splash burst at cursor with curling ripples and waves.

Default

Move the pointer to stir the fluid. Like the original, the effect is a fixed overlay over the whole viewport, not just the preview, and it ignores pointer events so nothing underneath is blocked.

Props are read once when the component mounts, so the controls below remount it on every change.

Move Your Cursor

Customize

Density Dissipation3.5

Velocity Dissipation2

Pressure0.1

Curl3

Splat Radius0.2

Splat Force6000

Color Update Speed10

ShadingRainbow Mode

Color

API Reference

SplashCursor

Prop	Type	Default	Description
`SIM_RESOLUTION`	`number`	`128`	Fluid simulation resolution for velocity fields.
`DYE_RESOLUTION`	`number`	`1440`	Resolution of the color/dye texture.
`CAPTURE_RESOLUTION`	`number`	`512`	Resolution used for certain capture operations (rarely changed).
`DENSITY_DISSIPATION`	`number`	`3.5`	Rate at which color/density dissipates over time.
`VELOCITY_DISSIPATION`	`number`	`2`	Rate at which velocity dissipates over time.
`PRESSURE`	`number`	`0.1`	Base pressure for the fluid simulation.
`PRESSURE_ITERATIONS`	`number`	`20`	Number of Jacobi iterations used for the pressure solver.
`CURL`	`number`	`3`	Amount of vorticity/curl to apply for swirling effects.
`SPLAT_RADIUS`	`number`	`0.2`	Radius of the 'splat' effect when user interacts.
`SPLAT_FORCE`	`number`	`6000`	Force of the fluid 'splat' on each interaction.
`SHADING`	`boolean`	`true`	Toggles simple lighting/shading on the fluid.
`COLOR_UPDATE_SPEED`	`number`	`10`	Frequency at which pointer colors are re-randomized.
`RAINBOW_MODE`	`boolean`	`true`	When true, uses randomly cycling rainbow colors. When false, uses the COLOR prop.
`COLOR`	`string`	`'#ff0000'`	Hex color for the cursor effect when RAINBOW_MODE is false.
`BACK_COLOR`	`object`	`{ r: 0.5, g: 0, b: 0 }`	Base background color for the fluid. Not always used if TRANSPARENT is true.

Accessibility

Keyboard shortcuts and ARIA behavior.

The canvas ignores pointer events and is purely decorative.
Mount it only when the user has not asked for reduced motion.

Shape Blur Star Border