Interactive liquid shader with flowing distortion and customizable colors.
Colors and simulation settings are wired to the controls underneath. Move the pointer over the stage to stir the fluid; it drives itself when left idle.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ["#5227FF", "#FF9FFC", "#B497CF"] | Array of hex color stops used to build the velocity-to-color palette. |
mouseForce | number | 20 | Strength multiplier applied to mouse / touch movement when injecting velocity. |
cursorSize | number | 100 | Radius (in pixels at base resolution) of the force brush. |
resolution | number | 0.5 | Simulation texture scale relative to canvas size (lower = better performance, more blur). |
dt | number | 0.014 | Fixed simulation timestep used inside the advection / diffusion passes. |
BFECC | boolean | true | Enable BFECC advection (error-compensated) for crisper flow; disable for slight performance gain. |
isViscous | boolean | false | Toggle iterative viscosity solve (smoother, thicker motion when enabled). |
viscous | number | 30 | Viscosity coefficient used when isViscous is true. |
iterationsViscous | number | 32 | Number of Gauss-Seidel iterations for viscosity (higher = smoother, slower). |
iterationsPoisson | number | 32 | Number of pressure Poisson iterations to enforce incompressibility. |
isBounce | boolean | false | If true, shows bounce boundaries (velocity clamped at edges). |
autoDemo | boolean | true | Enable idle auto-driving of the pointer when no user interaction. |
autoSpeed | number | 0.5 | Speed (normalized units/sec) for auto pointer motion. |
autoIntensity | number | 2.2 | Multiplier applied to velocity delta while in auto mode. |
takeoverDuration | number | 0.25 | Seconds to interpolate from auto pointer to real cursor when user moves mouse. |
autoResumeDelay | number | 1000 | Milliseconds of inactivity before auto mode resumes. |
autoRampDuration | number | 0.6 | Seconds to ramp auto movement speed from 0 to full after activation. |
backgroundColor | string | '#FFFFFF' | Background color used when lightMode is true. |
lightMode | boolean | false | Draws the fluid over an opaque background color instead of a transparent one. |
Keyboard shortcuts and ARIA behavior.