Aurora
stable 1.9 kB<hk-aurora>A flowing field rendered per-pixel by a WebGL2 fragment shader. The look comes from domain warping — the sample position is displaced by noise twice before the final lookup, which is what makes the field fold and flow rather than merely drift. Five octaves of fBm give detail at several scales, hue is mixed from the warp field so colour varies across space, and a per-pixel grain kills the banding smooth gradients always show on dark surfaces. Falls back to a Canvas 2D approximation where WebGL is unavailable.
#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. |
| palette | string[] | ['#dc2626', '#7c3aed', '#0ea5e9'] | Hues mixed across the field. Three reads best. |
| intensity | number | 0.62 | Overall brightness. Under 1 by default — this sits behind content. |
| scale | number | 2.4 | Field scale. Higher is busier, lower is broader. |
| warp | number | 3.2 | How far each noise octave displaces the next. 0 disables the warp. |
| vignette | number | 0.75 | Edge darkening, 0–1. Higher keeps the corners out of the way. |
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.