← DOCS
effects

SplashCursor

Interactive fluid simulation cursor with colorful splash effects and realistic dye diffusion.

npx chaos add splash-cursor

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { SplashCursor } from '@oalacea/chaosui/effects/splash-cursor';

<SplashCursor />
<SplashCursor DENSITY_DISSIPATION={5} SPLAT_FORCE={8000} />
<SplashCursor SHADING={false} TRANSPARENT={false} />

PROPS

PropTypeDefault
SIM_RESOLUTIONFluid simulation resolution for velocity fields
number128
DYE_RESOLUTIONResolution of the color/dye texture
number1440
DENSITY_DISSIPATIONRate at which color/density dissipates over time
number3.5
VELOCITY_DISSIPATIONRate at which velocity dissipates over time
number2
SPLAT_RADIUSRadius of the splash effect
number0.2
SPLAT_FORCEForce of the fluid splash on interaction
number6000
SHADINGToggle simple lighting/shading
booleantrue
COLOR_UPDATE_SPEEDFrequency of color randomization
number10
BACK_COLORBackground color RGB values
{ r: number; g: number; b: number }{ r: 0.5, g: 0, b: 0 }
TRANSPARENTTransparent canvas background
booleantrue
classNameCustom className
string""