import { Component } from '@angular/core';
import { WrSplashCursor } from 'ngwr/bits/splash-cursor';
@Component({ imports: [WrSplashCursor] })
export class MyComponent {}Splash Cursor
A fluid simulation that splashes colour where the pointer moves.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
Move the pointer through the box, or turn on fullscreen to cover the page.
<wr-splash-cursor [fullscreen]="false" [splatRadius]="0.2" [curl]="3" />Customize
Rainbow
Color
Splat Radius
Curl
Fullscreen overlay
Gotchas
- With
fullscreenoff, it fills the nearest positioned parent. - It draws nothing with
prefers-reduced-motionor 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' |