import { Component } from '@angular/core';
import { WrWaves } from 'ngwr/bits/waves';
@Component({ imports: [WrWaves] })
export class MyComponent {}Waves
Drifting lines behind your content that bend around the pointer.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
Put it in a positioned box; it fills that box behind the content.
<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 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
Animation AuroraAn animated aurora background for a hero or a section.Animation Split TextReveals text piece by piece when it scrolls into view.Animation Splash CursorA fluid simulation that splashes colour where the pointer moves.Util resolveCssColorResolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.