Field Background
Smooth WebGL procedural background with gaussian glow, chromatic aberration, and aurora field models, shared host lifecycle, reduced-motion handling, and foreground content composition.
Shader models
Switch between glow, chroma, and aurora fields with live controls.
Controls
Palette
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 | 'glow' | 'chroma' | 'aurora' | 'glow' | Procedural field shader used for the smooth background. |
| colors | string[] | ['#0f172a', '#6366f1', '#22d3ee', '#f472b6'] | Two to four hex, RGB, or resolvable CSS colours used by the field palette. |
| speed | number | 0.7 | Procedural motion speed multiplier. |
| intensity | number | 1 | Final shader colour intensity. |
| interactive | boolean | true | Whether pointer position influences the field. |
| chromaStrength | number | 1 | RGB split strength for the chroma model. |