Angular adaptation of an effect by David Haz / reactbits.dev.
Import
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.
<wr-splash-cursor [fullscreen]="false" [splatRadius]="0.2" [curl]="3" />Customize
Rainbow
Color
Splat Radius
Curl
Fullscreen overlay
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' |