Field Hex Background
Procedural hex grid WebGL background with grainy dark fills, crisp stroke lines, and intense white/cyan line glow. Path mode uses a smooth UV ripple with fading trail wake; blob mode uses a smooth gaussian around the cursor.
Line-hover hex grid
Fine hex grid with smooth path ripple or blob glow masked to stroke lines only.
Controls
Colours
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Foreground DOM content rendered above the canvas. |
| model | 'path' | 'blob' | 'path' | Path uses a smooth ripple with fading trail wake; blob uses a localized gaussian glow. |
| fillColor | string | '#050a12' | Hex cell interior colour. Unaffected by pointer interaction. |
| lineColor | string | '#3d4f6f' | Base stroke colour for the hex grid lines. |
| glowColor | string | '#5eead4' | Bloom and flare accent colour mixed into active lines. |
| hexScale | number | 28 | Hex grid density. |
| lineWidth | number | 0.018 | Stroke thickness in UV units. |
| pathRadius | number | 0.12 | UV falloff radius for the path ripple and trail wake. |
| blobRadius | number | 0.18 | UV falloff radius for the blob model. |
| trailLength | number | 24 | Maximum number of trail UV points kept in path mode. |
| trailDecay | number | 1.2 | Fade speed for path trail wake. |
| intensity | number | 1.4 | Effect strength multiplier on hex lines. |
| interactive | boolean | true | Whether pointer position influences hex line effects. |