Waves
stable 1.8 kB<hk-waves>Each band sums three sines at unrelated frequencies — one wave alone reads as obviously mechanical, three make the crest wander the way water does. Sampled every six pixels, which is indistinguishable from per-pixel and costs a sixth as much.
#background#canvas#decorative
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | '#dc2626' | Base colour. Any hex the background derives its palette from. |
| speed | number | 1 | Animation multiplier. 0 freezes on the first frame. |
| opacity | number | 1 | Canvas opacity — these sit behind real content. |
| paused | boolean | false | Stops the loop without unmounting. |
| layers | number | 4 | How many stacked bands. |
| amplitude | number | 34 | Crest height in px. |
| wavelength | number | 280 | Horizontal wavelength in px. |
| filled | boolean | true | Fills under each crest instead of stroking only. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-bg-color | #dc2626 | Base hue. Every background derives its palette from it. |
Accessibility
- The canvas is aria-hidden — a decorative layer must never be announced.
- Under prefers-reduced-motion it paints one frame and never starts the loop.
- The loop stops when the element scrolls out of view and when the tab is hidden, so an offscreen background costs nothing.
- Frames run outside the Angular zone, so animating never triggers change detection in the rest of the app.