# Waves

> Wave-field background — a grid of lines drifting on perlin noise, nudged by the pointer. Line colour follows the theme out of the box. Use behind hero copy or section content.

Source: https://ngwr.dev/animations/waves  
Kind: Animation

## Import

```angular-ts
import { WrWaves } from 'ngwr/waves';
```

## Playground

```html
<section style="position: relative">
  <wr-waves [waveAmpX]="32" [waveAmpY]="16" [xGap]="10" [yGap]="32" />
  <h1>Content above the waves</h1>
</section>
```

## 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` |