Smokey Cursor Effect
Customize
Props
| Property | Type | Default | Description |
|---|---|---|---|
simResolution | number | 128 | Grid resolution of the velocity/pressure simulation. Lower values are cheaper but blockier; the sim is reinitialized only on mount. |
dyeResolution | number | 1440 | Grid resolution of the visible dye/color texture. Auto-clamped to 256 when the browser lacks linear-filtering support for float textures. |
densityDissipation | number | 3.5 | How quickly the smoke/dye fades over time. Higher values dissipate faster; live-tunable without reinitializing WebGL. |
velocityDissipation | number | 2 | How quickly fluid motion slows down. Higher values make the flow feel more viscous/damped; live-tunable. |
pressure | number | 0.1 | Pressure-clear coefficient used each step before the Jacobi pressure solve; live-tunable. |
pressureIterations | number | 20 | Number of Jacobi iterations used to solve the pressure field per frame. Higher values are more accurate but costlier. Requires remount to change. |
curl | number | 3 | Vorticity confinement strength, controlling how swirly/curly the smoke motion looks; live-tunable. |
splatRadius | number | 0.2 | Radius (relative to canvas) of the color/velocity splat injected on pointer move and click; live-tunable. |
splatForce | number | 6000 | Force multiplier applied to pointer-movement deltas when injecting velocity into the field; live-tunable. |
shading | boolean | true | Enables the normal-based lighting term in the display shader for a more 3D, glossy smoke look. Toggling re-selects the shader keyword variant without a full reinit. |
colorUpdateSpeed | number | 10 | How quickly the pointer color cycles through the HSV wheel while moving. Only applies when `color` is not set; live-tunable. |
color | string | null | null | Fixed hex color (e.g. "#ff6b00") used for every splat instead of the random HSV cycle. Leave as null to keep the default rainbow cycling; live-tunable. |
className | string | "" | Custom class name applied to the outer wrapper div, useful for setting size/rounding from the parent. The canvas background is always transparent. |
simResolutionnumberGrid resolution of the velocity/pressure simulation. Lower values are cheaper but blockier; the sim is reinitialized only on mount.
128dyeResolutionnumberGrid resolution of the visible dye/color texture. Auto-clamped to 256 when the browser lacks linear-filtering support for float textures.
1440densityDissipationnumberHow quickly the smoke/dye fades over time. Higher values dissipate faster; live-tunable without reinitializing WebGL.
3.5velocityDissipationnumberHow quickly fluid motion slows down. Higher values make the flow feel more viscous/damped; live-tunable.
2pressurenumberPressure-clear coefficient used each step before the Jacobi pressure solve; live-tunable.
0.1pressureIterationsnumberNumber of Jacobi iterations used to solve the pressure field per frame. Higher values are more accurate but costlier. Requires remount to change.
20curlnumberVorticity confinement strength, controlling how swirly/curly the smoke motion looks; live-tunable.
3splatRadiusnumberRadius (relative to canvas) of the color/velocity splat injected on pointer move and click; live-tunable.
0.2splatForcenumberForce multiplier applied to pointer-movement deltas when injecting velocity into the field; live-tunable.
6000shadingbooleanEnables the normal-based lighting term in the display shader for a more 3D, glossy smoke look. Toggling re-selects the shader keyword variant without a full reinit.
truecolorUpdateSpeednumberHow quickly the pointer color cycles through the HSV wheel while moving. Only applies when `color` is not set; live-tunable.
10colorstring | nullFixed hex color (e.g. "#ff6b00") used for every splat instead of the random HSV cycle. Leave as null to keep the default rainbow cycling; live-tunable.
nullclassNamestringCustom class name applied to the outer wrapper div, useful for setting size/rounding from the parent. The canvas background is always transparent.
""Crafted withbyMohammad Tasin