Dot matrix
stable 1.7 kB<hk-dot-matrix>A travelling diagonal wave over a dot grid, with a pointer bulge on top. Only dots inside the pointer radius do the distance maths; the rest take a single cheap sine, which keeps a dense grid affordable.
#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. |
| gap | number | 26 | Distance between dot centres, px. |
| dotSize | number | 1.6 | Base dot radius, px. |
| influence | number | 140 | Radius the pointer affects, px. 0 disables the interaction. |
| wave | number | 0.5 | Amplitude of the idle wave, 0–1. |
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.