Shader Aurora
WebGL aurora background with smooth, flowing ribbon-like motion that reacts to the cursor. Includes subtle color shifting and grain, fades out when the pointer leaves, and disables motion for reduced-motion settings. Renders behind content as a full-size canvas.
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 |