Creates flowing aurora borealis effects using WebGL shaders with procedural noise, glass refraction distortions, and dynamic color palettes. Features multi-layered animation with customizable wave patterns and bloom effects.

Aurora

Move your mouse to interact with the flowing aurora waves.

Appearance

Background Color color picker

Base background color for the canvas. Dark colors work best to let the aurora glow stand out. Black creates the most dramatic effect.

Default: #000000

Color Hue 0.0-1.0

Primary hue value for aurora color palette generation. Lower values shift toward reds and purples, higher values toward greens and blues.

Default: 0.56

Color Saturation 0.0-1.0

Color intensity of the aurora waves. Higher values create more vibrant, saturated colors. Lower values give more pastel tones.

Default: 0.78

Color Variation 0.0-1.0

Range of color diversity across the aurora layers. Higher creates more color transitions, lower keeps colors more uniform.

Default: 0.25

Color Offset 0.0-1.0

Shifts the starting point in the color palette. Adjust to fine-tune the exact hues that appear in the aurora.

Default: 0.24

Animation

Aurora Speed 0.01-0.5

Animation speed of the main aurora flow effect. Lower creates slow, ethereal movement. Higher gives faster, energetic waves.

Default: 0.06

Blinds Speed 0.1-2.0

Speed of the secondary blinds distortion layer that adds depth and complexity to the aurora waves.

Default: 0.5

SDF Speed 0.1-1.0

Speed of the signed distance field refraction layer. Affects how the glass-like distortions move across the aurora.

Default: 0.25

Effects

Bloom Intensity 0.0-2.0

Strength of the glowing bloom effect around bright areas. Higher values create more intense, radiant glow. Lower values are more subtle.

Default: 0.75

Performance

This element uses WebGL2 with complex custom GLSL fragment shaders. Implements 3D Simplex noise for organic pattern generation, Reinhard tonemapping, procedural color palettes, chromatic aberration, signed distance fields, and multi-pass rendering with bloom effects. Requires UnicornStudio.js library (automatically loaded). Very resource intensive - limit to 1 instance per page. Not recommended for mobile devices or low-end hardware due to intensive GPU shader computations and continuous 60fps rendering loop.