# Splash Cursor

> A fluid simulation that splashes colour where the pointer moves.

Source: https://ngwr.dev/bits/splash-cursor  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrSplashCursor } from 'ngwr/bits/splash-cursor';

@Component({ imports: [WrSplashCursor] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/splash-cursor';
```

## Playground

Move the pointer through the box, or turn on fullscreen to cover the page.

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

```angular-ts
import { Component } from '@angular/core';

import { WrSplashCursor } from 'ngwr/bits/splash-cursor';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrSplashCursor],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## Gotchas

- With `fullscreen` off, it fills the nearest positioned parent.
- It draws nothing with `prefers-reduced-motion` or without WebGL.

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `fullscreen` | Cover the viewport, or fill the nearest positioned parent. | `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'` |

## See also

- [Click Spark](https://ngwr.dev/bits/click-spark) — Sparks that burst from wherever you click inside it.
- [Aurora](https://ngwr.dev/bits/aurora) — An animated aurora background for a hero or a section.
- [Waves](https://ngwr.dev/bits/waves) — Drifting lines behind your content that bend around the pointer.