Grid motion
stable 1.5 kB<hk-grid-motion>Lines converging on a vanishing point, scrolling toward the viewer. Depth spacing is exponential rather than linear, which is what makes it read as perspective instead of a tilted ladder, and the scroll offset wraps so the advance is seamless.
#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. |
| horizon | number | 0.42 | Horizon position as a fraction of height. |
| columns | number | 16 | Vertical lines either side of centre. |
| rows | number | 14 | Depth bands between horizon and viewer. |
| lineWidth | number | 1 | Stroke width in px. |
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.