Aurora
WebGL aurora borealis effect with simplex noise GLSL shaders powered by OGL
Preview
Overview
Aurora renders a full WebGL aurora borealis effect using OGL and custom GLSL fragment shaders with simplex noise. The effect features smooth color gradients, animated wave distortion, and configurable amplitude and blending.
Features
- WebGL powered — hardware-accelerated rendering via OGL
- Simplex noise — organic wave motion using GLSL noise functions
- 3-stop color ramp — configurable gradient across the aurora
- Responsive — auto-resizes to container dimensions
- Transparent background — composites cleanly over any content
Usage
import Aurora from '@/components/aurora'
<div className="h-[400px]">
<Aurora
colorStops={['#00d2ff', '#7cff67', '#00d2ff']}
amplitude={1.2}
blend={0.5}
speed={0.8}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
colorStops | string[] | ['#5227FF', '#7cff67', '#5227FF'] | Array of 3 hex colors for the aurora gradient |
amplitude | number | 1.0 | Wave height multiplier |
blend | number | 0.5 | Smoothness of the aurora edge blending |
speed | number | 1.0 | Animation speed multiplier |
time | number | — | Override the internal time value for manual control |