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. Unset, the theme decides: a dark tint on light, white-alpha on dark. | string | null | null |
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 |
CSS variables
Custom properties ngwr/waves publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-waves-line-color | rgba(var(--wr-color-on-surface-rgb), 0.12) | .wr-waves +1 variant override |
--wr-waves-x-gap | 10px | .wr-waves |