Shader Aurora
WebGL aurora: 2D simplex FBM + layered curl-noise flow fields for ribbon-like liquid motion (replacing value-noise blobs), container-scoped pointer tracking (enter to engage, leave fades distortion), pointer velocity in UV/s (time between pointer events), frame-time exponential decay, clamped magnitude, noisy falloff + swirl + ring + trail, spatial hue variation on blends, and subtle film grain. Respects `prefers-reduced-motion` (static frame, no cursor distortion, no RAF loop). Renders as a `relative` wrapper: canvas fills behind optional `children` (pointer-events-none; moves bubble from children).
Default
Default shader aurora background
Sign in to view this example's source code.
Sign inNeon SaaS
Neon SaaS shader aurora background
Sign in to view this example's source code.
Sign inWarm gradient
Warm gradient shader aurora background
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Foreground above the WebGL layer (clicks/hover work normally). |
| colors | [string, string, string] | ['#7c3aed', '#06b6d4', '#3b82f6'] | Three hex colors (#rrggbb) blended in the fragment shader |
| speed | number | 0.2 | Multiplier on elapsed time passed to the shader |
| intensity | number | 1.0 | Scalar applied to the final color in the shader |
| cursorDistortion | number | 0.12 | Radial + swirl UV warp at the pointer (0 disables). Only active while the pointer is inside the component; fades on leave. Pointer deltas feed u_velocity (with per-frame decay) so fast moves read stronger. |
| cursorRadius | number | 0.32 | Gaussian falloff radius in aspect-corrected UV space |
| maxVelocity | number | 2.5 | Clamp for pointer velocity (UV/s) after time-normalized deltas; reduces flick spikes |