# Waves

> Drifting lines behind your content that bend around the pointer.

Source: https://ngwr.dev/bits/waves  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrWaves } from 'ngwr/bits/waves';

@Component({ imports: [WrWaves] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/waves';
```

## Playground

Put it in a positioned box; it fills that box behind the content.

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

```angular-ts
import { Component } from '@angular/core';

import { WrWaves } from 'ngwr/bits/waves';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrWaves],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `lineColor` | Line colour. Unset, it follows the theme. | `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

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/waves`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-waves-line-color` | `light-dark(color-mix(in srgb, var(--wr-color-on-surface) 12%, transparent), rgb(255 255 255 / 14%))` | `.wr-waves` |
| `--wr-waves-x-gap` | `10px` | `.wr-waves` |

## See also

- [Aurora](https://ngwr.dev/bits/aurora) — An animated aurora background for a hero or a section.
- [Split Text](https://ngwr.dev/bits/split-text) — Reveals text piece by piece when it scrolls into view.
- [Splash Cursor](https://ngwr.dev/bits/splash-cursor) — A fluid simulation that splashes colour where the pointer moves.
- [resolveCssColor](https://ngwr.dev/reference/utils/resolve-css-color) — Resolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.