Aurora.gl
Shaders
Masks
Presets
Docs
v2.0 Studio
Volumetric WebGL Background
Atmospheric light for the modern web.
Zero-dependency 3D curtains with real-time masks, ASCII matrices, and magnetic cursor physics.
Get Started
Copy Component
Volumetric Engine
3D S-Curve Folds
Post-Processing
ASCII & Halftone
Footprint
Zero Dependencies
9:41
5G 100%
KP 6.8 STORM
69.65° N
Tromsø Observatory
Borealis Live Skycast.
Solar Wind Telemetry
557.7 nm [O I]
Real-time WebGL atmospheric shader running natively at 60 FPS on mobile GPUs.
Open Sky Camera
INTERACTIVE CARD
GLSL
A
Aurora Shader Card
React & Vanilla WebGL Component
Drop-in volumetric background for profile cards, pricing tiers, and interactive callouts.
Masks
Post-FX
Explore
Bento Hero Cell
Multi-Panel Shader Backdrop
Use a single WebGL canvas behind CSS Grid bento cards with backdrop-filter glassmorphism.
GPU Compositor
SVG & Text Masks
Real-time knockout & stencil modes
Pattern Shaders
ASCII & Halftone
6 procedural screen-space effects
Horizon Cutoff
Props API Reference
| Prop / Option | Type | Default | Description |
|---|---|---|---|
preset |
'arctic' | 'australis' | 'geomagnetic' | 'solarFlare' | 'polarSilk' | 'lofotenMidnight' | 'zenithCorona' | 'stevePicket' | 'tromsoViolet' | 'yukonAmber' | 'cyberGrid' | 'halftonePrint' | 'topoContours' | 'asciiMatrix' |
'arctic' |
Selects one of the built-in atmospheric or stylized presets. |
viewElevation |
number |
0.42 |
Camera vantage height (`0.0` = ground level looking up, `0.42` = elevated eye-level view across the 3D curtains). |
depth3D |
number |
0.78 |
Controls 3D S-curve depth recession, self-occlusion, and cursor parallax across depth slices. |
curtainAngle |
number |
0 |
Curtain heading / perspective angle in degrees (-75 to +75). Dynamic serpentine snaking and horizon trail-off. |
curtainSnaking |
number |
1.0 |
Serpentine ribbon S-curve winding amplitude (0.0 to 2.5). Controls how dynamically the curtains snake across the celestial dome. |
lowerFringe |
number |
0 |
Nitrogen pink fringe along the sharp lower edge of the curtains (0 to 1). |
crimsonCrown |
number |
0 |
High-altitude oxygen red tint blended into the upper curtain (0 to 1). |
renderScale |
number |
1.0 |
Internal WebGL resolution multiplier (`0.5` Eco to `2.0` Retina). |
raySlices |
number |
8 |
Volumetric depth slices per curtain (`4`–`16`) with automatic brightness compensation. |
fxPattern |
0 | 1 | 2 | 3 | 4 | 5 | 6 |
0 |
GPU Post-FX shader (`0`=Off, `1`=Halftone, `2`=Scanlines, `3`=LED Matrix, `4`=Bayer Dither, `5`=Topo Contours, `6`=Gradient ASCII). |