Spotlight
stable 1.1 kB<hk-spotlight>Deliberately not canvas: one radial gradient the GPU can composite, with an optional grid masked to the lit area. The only per-move work is writing two CSS variables, coalesced to one write per animation frame and never entering the Angular zone.
#background#canvas#decorative
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | '#dc2626' | Light colour. |
| size | number | 320 | Light radius in px. |
| opacity | number | 1 | Layer opacity. |
| grid | boolean | true | Draws a grid revealed only inside the light. |
| gridSize | number | 32 | Grid cell size 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. |
| --hk-spot-size | 320px | Light radius. |
| --hk-spot-grid | 32px | Grid cell size. |
Accessibility
- The light and grid layers are aria-hidden; projected content stays in the accessibility tree.
- No canvas and no JavaScript animation — the browser composites one gradient, so it is the cheapest background here.
- Pointer writes are coalesced to one per frame and run outside the Angular zone.
- With no pointer (touch, keyboard) the light rests at centre rather than disappearing.