Aurora

Zero-dependency volumetric 3D WebGL shader component for both Aurora Borealis and Aurora Australis — featuring domain-warped curtain folds, elevated camera vantage geometry, altitude-accurate Oxygen/Nitrogen emission gradients, and interactive magnetic cursor response.

Horizon Mask Cutoff

Customize Parameters

Global Shader & Camera Vantage

Camera Vantage Height viewElevation 0.42

3D Ribbon Depth & Parallax depth3D 0.78

Flow & Undulation Speed timeSpeed 0.32

Vertical Falloff Sharpness curtainSharpness 2.00

Magnetic Ray Striation striationDetail 0.46

HDR Exposure exposure 1.48

Horizon Cutoff horizonCutoff 0.94

Cursor Magnetic Pull mouseStrength 0.22

Volumetric Curtain Folds

Fold Layer Enabled

Intensity baseAlpha 0.72

Sky Position baseY 0.68

Curtain Height rayHeight 0.62

3D Fold Depth amplitude 0.160

Meander Scale freq1 1.9

Ray Shimmer raySpeed 1.1

Lower Border (100km)

Mid Curtain

Upper Corona (250km)

HeroAurora.jsx

Prop / Option	Type	Default	Description
`preset`	`'arctic' \| 'australis' \| 'geomagnetic' \| 'solarFlare' \| 'polarSilk'`	`'arctic'`	Selects one of the built-in atmospheric presets (including both Northern & Southern hemisphere palettes).
`viewElevation`	`number`	`0.42`	Camera vantage height (`0.0` = looking up from ground level, `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.
`timeSpeed`	`number`	`0.32`	Global wave drift and undulation speed multiplier.
`curtainSharpness`	`number`	`2.0`	Controls vertical falloff exponent from the lower emerald border (`0.8`–`5.0`).
`striationDetail`	`number`	`0.46`	Intensity of longitudinal magnetic field ray striations (`0.0` = pure silk, `1.0` = defined rays).
`exposure`	`number`	`1.48`	HDR tone-mapping exposure multiplier for overlapping ribbon folds.
`horizonCutoff`	`number`	`0.94`	Normalized vertical coordinate (`0.0`–`1.0`) where the aurora fades out near the bottom edge.
`mouseStrength`	`number`	`0.22`	How strongly the aurora curtains bend toward the cursor/touch position.
`curtains`	`Array<CurtainLayer>`	`[3 layers]`	Array of 3 volumetric ribbon objects (`enabled`, `baseY`, `rayHeight`, `amplitude`, `freq1`, `lowColor`, `midColor`, `highColor`).