FluidCursor
A WebGL fluid simulation that follows your cursor. Move your mouse around to see the effect.
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>
<FluidCursor />Move your cursor here
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 |
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