Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrWaves } from 'ngwr/waves';Playground
<section style="position: relative">
<wr-waves [waveAmpX]="32" [waveAmpY]="16" [xGap]="10" [yGap]="32" />
<h1>Content above the waves</h1>
</section>Customize
Amp X
Amp Y
X Gap
Y Gap
API
| Name | Description | Type | Default |
|---|---|---|---|
lineColor | Line stroke colour. | string | theme-aware (dark tint on light, white-alpha on dark) |
backgroundColor | Fill behind the lines. | string | 'transparent' |
waveSpeedX | Horizontal noise drift per ms. | number | 0.0125 |
waveSpeedY | Vertical noise drift per ms. | number | 0.005 |
waveAmpX | Horizontal wave amplitude (px). | number | 32 |
waveAmpY | Vertical wave amplitude (px). | number | 16 |
xGap | Gap between lines (px). | number | 10 |
yGap | Gap between points on a line (px). | number | 32 |
friction | Cursor-spring damping, 0..1. | number | 0.925 |
tension | Cursor-spring pull-back strength. | number | 0.005 |
maxCursorMove | Max px a point drags from rest. | number | 100 |