# Splash Cursor

> WebGL fluid simulation that splashes colourful dye wherever the pointer moves or clicks. Fullscreen click-through overlay by default, or contained in any positioned box — where the dye collides with the walls. Renders nothing under prefers-reduced-motion or without WebGL.

Source: https://ngwr.dev/animations/splash-cursor  
Kind: Animation

## Import

```angular-ts
import { WrSplashCursor } from 'ngwr/splash-cursor';
```

## Playground

Move the pointer through the box — the dye swirls and bounces off the walls. Flip the fullscreen toggle to let it follow you across the whole page instead.

```html
<wr-splash-cursor [fullscreen]="false" [splatRadius]="0.2" [curl]="3" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `fullscreen` | Viewport overlay, or fill the nearest positioned ancestor. | `boolean` | `true` |
| `simResolution` | Velocity / pressure grid resolution. | `number` | `128` |
| `dyeResolution` | Dye texture resolution (visible detail). | `number` | `1440` |
| `densityDissipation` | Dye fade speed — higher, shorter trails. | `number` | `3.5` |
| `velocityDissipation` | How fast motion settles. | `number` | `2` |
| `pressure` | Pressure retained between frames. | `number` | `0.1` |
| `pressureIterations` | Jacobi iterations for the pressure solve. | `number` | `20` |
| `curl` | Vorticity confinement — swirliness. | `number` | `3` |
| `splatRadius` | Splat size. | `number` | `0.2` |
| `splatForce` | Velocity a pointer move injects. | `number` | `6000` |
| `shading` | Pseudo-3D shading on the dye. | `boolean` | `true` |
| `colorUpdateSpeed` | How fast the splat colour cycles. | `number` | `10` |
| `rainbow` | Cycle splat colours through the rainbow. | `boolean` | `true` |
| `color` | Fixed splat colour when rainbow is off. | `string` | `'#ff0000'` |